From 8bc97608346ccf0b12c8bcd64e0284ffd0cc8cb7 Mon Sep 17 00:00:00 2001
From: Jerilyn Yare <102701655+Jy-re@users.noreply.github.com>
Date: Sat, 6 Jan 2024 15:22:30 +0800
Subject: [PATCH] fixed redundant labels, margins and alignments

---
 .../AddTransactionPage/AddTransactionPage.tsx | 25 ++++++++-----------
 src/styles.tsx                                |  8 ++++++
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
index d088a53..4b698f9 100644
--- a/src/Pages/AddTransactionPage/AddTransactionPage.tsx
+++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
@@ -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"
diff --git a/src/styles.tsx b/src/styles.tsx
index 5bc2d0e..315f0fa 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -131,6 +131,14 @@ const styles: { [key: string]: React.CSSProperties } = {
     marginTop: "10px",
   },
 
+  bform_label2: {
+    display: "flex",
+    justifyContent: "left",
+    marginTop: "10px",
+    marginBottom: "10px",
+  },
+
+
   
 };