keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add styles for student

Browse source
This commit is contained in:
sopheedaire 2024-01-06 11:44:46 +08:00
parent c4bcb30b80
commit 93768f4d4a
4 changed files with 141 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/Components/StatusTextColor/StatusTextColor.tsx
View file

@ -11,7 +11,7 @@ export default function StatusTextColor(status: string) {
status === "Finalized" ||
status === "Borrowed"
) {
return colors.green;
return colors.dark_green;
} else {
return colors.red;
}

241
src/Components/TransactionEntry/TransactionEntry.tsx
View file

@ -2,174 +2,135 @@ import styles from "../../styles";
import { colors } from "../../styles";
import { TransactionType } from "../Types/Types";
import StatusTextColor from "../StatusTextColor/StatusTextColor";
import CircleSharpIcon from '@mui/icons-material/CircleSharp';
export interface props {
transaction: TransactionType;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
}
export default function TransactionEntry(props: props) {
return (
<button
style={{
alignSelf: "center",
justifySelf: "center",
width: "384px",
width: "584px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
margin: "10px",
paddingTop: "15px",
}}
onClick={props.onClick}
>
<div style={styles.flex_row}>
<div style={{
display: "flex",
flexDirection: "row",
padding: "0px",
margin: "0px"
}}>
<p
style={{
...styles.text_dark,
...styles.text_S,
...styles.text_super_dark,
...styles.text_M,
...{ textAlign: "left", flex: 1 },
padding: "0px",
margin: "0px",
}}
>
ID: {props.transaction.id}
Transaction ID: {props.transaction.id}
</p>
<p
<div style={{
display: "flex",
alignItems: "center",
flexDirection: "row",
margin: "0"
}}>
<CircleSharpIcon
style={{
width: "9px",
height: "8px",
color: StatusTextColor(props.transaction.transaction_status),
marginRight: "9px"
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{
textAlign: "center",
margin: 0,
color: StatusTextColor(props.transaction.transaction_status),
},
}}
>
{`${props.transaction.transaction_status}`}
</p>
</div>
</div>
<div style={{
flex:1,
marginTop: "3px",
alignItems: "center"
}}>
<p
style={{
...styles.text_gray,
...styles.text_S,
...{ textAlign: "left", flex: 2 },
fontStyle: "italic"
}}
>
{props.transaction.timestamp}
</p>
</div>
{/* //GIWALA */}
<div
style={{
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
padding: "7px",
margin: "0px",
}}>
<p
style={{
...styles.text_gray,
...styles.text_S,
...{ textAlign: "right", flex: 2 },
padding: "0px",
margin: "0px"
}}
>
{props.transaction.timestamp}
TAP TO VIEW
</p>
</div>
<div style={styles.flex_row}>
<div style={{ flex: 1 }}>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
}}
>
Borrower: {props.transaction.borrower.name}{" "}
{`(ID:${props.transaction.borrower.id})`}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
}}
>
{`(${props.transaction.borrower.course})`}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "left", margin: 0 },
}}
>
Teacher: {props.transaction.teacher.name}{" "}
{`(ID:${props.transaction.teacher.id})`}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
textAlign: "left",
margin: 0,
maxWidth: "128px",
wordWrap: "break-word",
},
}}
>
Subject: {props.transaction.subject}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
maxHeight: "64px",
textAlign: "left",
margin: 0,
marginTop: "8px",
flexWrap: "wrap",
overflowY: "scroll",
maxWidth: "192px",
wordWrap: "break-word",
},
}}
>
Remarks: {props.transaction.remarks}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
maxHeight: "64px",
textAlign: "left",
margin: 0,
marginTop: "8px",
flexWrap: "wrap",
overflowY: "scroll",
maxWidth: "192px",
wordWrap: "break-word",
},
}}
>
Consumables: {props.transaction.consumables}
</p>
</div>
<div style={{ flex: 1 }}>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "right", margin: 0 },
}}
>
Equipments:
</p>
<div
style={{
...styles.flex_column,
...{ height: "96px", overflowY: "scroll" },
}}
>
{props.transaction.equipments.map((equipment) => (
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
textAlign: "right",
wordWrap: "break-word",
margin: 0,
},
}}
>
{` - ${equipment.name} (ID:${equipment.id})`}
</p>
))}
</div>
</div>
</div>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{
textAlign: "center",
margin: 0,
color: StatusTextColor(props.transaction.transaction_status),
},
}}
>
{`${props.transaction.transaction_status}`}
</p>
</button>
);
}

2
src/Pages/DashboardPage/DashboardPage.tsx
View file

@ -19,7 +19,7 @@ export default function Dashboard() {
<RestrictedComponent allow_only={"Student"}>
<div
style={{
...styles.flex_row,
...styles.flex_column,
...{
flexWrap: "wrap",
justifyContent: "center",

38
src/styles.tsx
View file

@ -9,6 +9,12 @@ export const colors = {
red: "#a44141",
orange: "#c57331",
green: "#80b28a",
gray: "#8F8F8F",
dark_green: "#17561D",
dark_blue: "#19639D"
};
const styles: { [key: string]: React.CSSProperties } = {
background: {
@ -16,19 +22,37 @@ const styles: { [key: string]: React.CSSProperties } = {
position: "fixed",
top: 0,
left: 0,
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
overflowY: "scroll",
},
text_dark: {
color: colors.font_dark,
fontWeight: "bold",
},
text_super_dark: {
color: colors.font_dark,
fontWeight: 900,
},
text_light: {
color: colors.font_light,
fontWeight: "bold",
},
text_dark_blue:{
color:colors.dark_blue,
fontWeight:"bold"
},
text_gray: {
color: colors.gray,
},
text_red: {
color: colors.red,
@ -42,9 +66,16 @@ const styles: { [key: string]: React.CSSProperties } = {
color: colors.green,
fontWeight: "bold",
},
text_dark_green: {
color: colors.dark_green,
fontWeight: "bold",
},
text_XL: {
fontSize: "clamp(2rem, 3rem, 8rem)",
},
text_L: {
fontSize: "clamp(1.5rem, 2rem, 6rem)",
},
@ -94,6 +125,13 @@ const styles: { [key: string]: React.CSSProperties } = {
marginLeft: "1rem",
marginRight: "1rem",
},
bform_label: {
display: "flex",
justifyContent: "left",
marginTop: "10px",
},
};
export default styles;