From 93768f4d4a893e5e76954dcef0d5df5656c774c5 Mon Sep 17 00:00:00 2001
From: sopheedaire <psofiiadara@gmail.com>
Date: Sat, 6 Jan 2024 11:44:46 +0800
Subject: [PATCH] Add styles for student

---
 .../StatusTextColor/StatusTextColor.tsx       |   2 +-
 .../TransactionEntry/TransactionEntry.tsx     | 241 ++++++++----------
 src/Pages/DashboardPage/DashboardPage.tsx     |   2 +-
 src/styles.tsx                                |  38 +++
 4 files changed, 141 insertions(+), 142 deletions(-)

diff --git a/src/Components/StatusTextColor/StatusTextColor.tsx b/src/Components/StatusTextColor/StatusTextColor.tsx
index 17695fb..4354cff 100644
--- a/src/Components/StatusTextColor/StatusTextColor.tsx
+++ b/src/Components/StatusTextColor/StatusTextColor.tsx
@@ -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;
   }
diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx
index ca8e9d5..2a47bff 100644
--- a/src/Components/TransactionEntry/TransactionEntry.tsx
+++ b/src/Components/TransactionEntry/TransactionEntry.tsx
@@ -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>
   );
 }
diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx
index 89ce800..11f01e2 100644
--- a/src/Pages/DashboardPage/DashboardPage.tsx
+++ b/src/Pages/DashboardPage/DashboardPage.tsx
@@ -19,7 +19,7 @@ export default function Dashboard() {
       <RestrictedComponent allow_only={"Student"}>
         <div
           style={{
-            ...styles.flex_row,
+            ...styles.flex_column,
             ...{
               flexWrap: "wrap",
               justifyContent: "center",
diff --git a/src/styles.tsx b/src/styles.tsx
index 2e4c3ba..5bc2d0e 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -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;