keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-09-16 20:49:36 +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
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>
);
}