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

fixed redundant labels, margins and alignments

Browse source
This commit is contained in:
Jerilyn Yare 2024-01-06 15:22:30 +08:00
parent 287cdbc99e
commit 8bc9760834
2 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/Pages/AddTransactionPage/AddTransactionPage.tsx
View file

@ -121,12 +121,12 @@ export default function AddTransactionPage() {
marginRight: "1rem",
}}
/>
<p style={{ ...styles.text_dark, ...styles.text_L }}>New Transaction</p>
<p style={{ ...styles.text_dark, ...styles.text_L }}>Borrowing Form</p>
</div>
<div style={styles.flex_column}>
<div style={{...styles.flex_column, marginLeft: "1rem", marginRight: "1rem"}}>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Items Requested</FormLabel>
<FormLabel style={{...styles.text_dark, ...styles.bform_label2}}>Items Requested</FormLabel>
<Select
multiple
value={transaction.equipments}
@ -136,7 +136,7 @@ export default function AddTransactionPage() {
equipments: event.target.value as number[],
})
}
input={<OutlinedInput label="Name" />}
input={<OutlinedInput />}
>
{equipments.data
?.filter((equipment) => equipment.status == "Available")
@ -148,7 +148,7 @@ export default function AddTransactionPage() {
</Select>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Assigned Teacher</FormLabel>
<FormLabel style={{...styles.text_dark, ...styles.bform_label2}}>Assigned Teacher</FormLabel>
<Select
value={transaction.teacher}
onChange={(event) =>
@ -158,7 +158,8 @@ export default function AddTransactionPage() {
})
}
label={"Assigned Teacher"}
input={<OutlinedInput label="Assigned Teacher" />}
input={<OutlinedInput />}
>
{teachers.data?.map((teacher) => (
<MenuItem key={teacher.id} value={teacher.id}>
@ -168,20 +169,19 @@ export default function AddTransactionPage() {
</Select>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Subject</FormLabel>
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Subject</FormLabel>
<TextField
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetTransaction({ ...transaction, subject: e.target.value });
setError("");
}}
label={"Subject"}
value={transaction.subject}
placeholder={"The subject requiring the equipments"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Remarks</FormLabel>
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Remarks</FormLabel>
<TextField
multiline
style={styles.input_form}
@ -189,13 +189,12 @@ export default function AddTransactionPage() {
SetTransaction({ ...transaction, remarks: e.target.value });
setError("");
}}
label={"Remarks"}
value={transaction.remarks}
placeholder={"Optionally add a brief description of the request"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Consumables</FormLabel>
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Consumables</FormLabel>
<TextField
multiline
style={styles.input_form}
@ -203,13 +202,12 @@ export default function AddTransactionPage() {
SetTransaction({ ...transaction, consumables: e.target.value });
setError("");
}}
label={"Consumables"}
value={transaction.consumables}
placeholder={"Write down any consumables here"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Additional Members</FormLabel>
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Additional Members</FormLabel>
<TextField
multiline
style={styles.input_form}
@ -220,7 +218,6 @@ export default function AddTransactionPage() {
});
setError("");
}}
label={"Additional Members"}
value={transaction.additional_members}
placeholder={
"Write down any additional members borrowing on behalf of this transaction"

8
src/styles.tsx
View file

@ -131,6 +131,14 @@ const styles: { [key: string]: React.CSSProperties } = {
marginTop: "10px",
},
bform_label2: {
display: "flex",
justifyContent: "left",
marginTop: "10px",
marginBottom: "10px",
},
};