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 === "Finalized" ||
status === "Borrowed" status === "Borrowed"
) { ) {
return colors.green; return colors.dark_green;
} else { } else {
return colors.red; return colors.red;
} }

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

@ -2,174 +2,135 @@ import styles from "../../styles";
import { colors } from "../../styles"; import { colors } from "../../styles";
import { TransactionType } from "../Types/Types"; import { TransactionType } from "../Types/Types";
import StatusTextColor from "../StatusTextColor/StatusTextColor"; import StatusTextColor from "../StatusTextColor/StatusTextColor";
import CircleSharpIcon from '@mui/icons-material/CircleSharp';
export interface props { export interface props {
transaction: TransactionType; transaction: TransactionType;
onClick?: React.MouseEventHandler<HTMLButtonElement>; onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
}
export default function TransactionEntry(props: props) { export default function TransactionEntry(props: props) {
return ( return (
<button <button
style={{ style={{
alignSelf: "center", alignSelf: "center",
justifySelf: "center", justifySelf: "center",
width: "384px", width: "584px",
backgroundColor: colors.header_color, backgroundColor: colors.header_color,
borderRadius: 16, borderRadius: 16,
margin: "8px", margin: "10px",
padding: "8px", paddingTop: "15px",
}} }}
onClick={props.onClick} onClick={props.onClick}
> >
<div style={styles.flex_row}> <div style={{
display: "flex",
flexDirection: "row",
padding: "0px",
margin: "0px"
}}>
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_super_dark,
...styles.text_S, ...styles.text_M,
...{ textAlign: "left", flex: 1 }, ...{ textAlign: "left", flex: 1 },
padding: "0px",
margin: "0px",
}} }}
> >
ID: {props.transaction.id} Transaction ID: {props.transaction.id}
</p> </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={{ style={{
...styles.text_dark, ...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, ...styles.text_S,
...{ textAlign: "right", flex: 2 }, padding: "0px",
margin: "0px"
}} }}
> >
{props.transaction.timestamp} TAP TO VIEW
</p> </p>
</div> </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> </button>
); );
} }

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

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

38
src/styles.tsx
View file

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