From 04ce14a5a0e75c3286f9595d6f084af5f771a941 Mon Sep 17 00:00:00 2001
From: Jerilyn Yare <102701655+Jy-re@users.noreply.github.com>
Date: Sun, 7 Jan 2024 12:56:01 +0800
Subject: [PATCH] student and teacher dashboard responsive

---
 .../DashboardPage/Student/StudentDashboard.tsx  | 17 +++++++----------
 .../Student/StudentTransactionListView.tsx      |  7 ++++---
 .../Teacher/TeacherTransactionListView.tsx      |  2 +-
 .../TransactionEntry/TransactionEntry.tsx       |  4 ++--
 .../TransactionFilterMenu.tsx                   |  3 ++-
 src/Pages/DashboardPage/DashboardPage.tsx       |  6 +++---
 6 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/Components/DashboardPage/Student/StudentDashboard.tsx b/src/Components/DashboardPage/Student/StudentDashboard.tsx
index 24fbc03..fcc8f40 100644
--- a/src/Components/DashboardPage/Student/StudentDashboard.tsx
+++ b/src/Components/DashboardPage/Student/StudentDashboard.tsx
@@ -1,7 +1,6 @@
+
 import styles from "../../../styles";
 import { Button } from "@mui/material";
-import AddBoxIcon from "@mui/icons-material/AddBox";
-import { colors } from "../../../styles";
 import { useNavigate } from "react-router-dom";
 export default function StudentDashboard() {
   const navigate = useNavigate();
@@ -17,7 +16,7 @@ export default function StudentDashboard() {
             justifyContent: "center",
             flexWrap: "wrap",
             marginTop: "40px",
-           
+            width: "100%"         
           
            
           },
@@ -28,11 +27,10 @@ export default function StudentDashboard() {
             ...styles.flex_column,
             ...{
               alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
               backgroundColor: "#CCDDFF",    
-              paddingInline: "90px", 
-              borderRadius: "20px"      
+              borderRadius: "20px",   
+              paddingInline: "100px", 
+              width: "100%",
             },
           }}
           onClick={() => {
@@ -43,9 +41,8 @@ export default function StudentDashboard() {
           <p
             style={{
               ...styles.text_dark_blue,
-
-              ...styles.text_M,
-              fontSize: "15px"
+              fontSize: "15px",
+              
             }}
           >
            CLICK TO REQUEST BORROW ITEMS
diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
index ef08e2c..f41bf1f 100644
--- a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
+++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
@@ -39,10 +39,11 @@ export default function StudentTransactionListView() {
     );
   }
   return (
-    <div >
+    <div style={{ width: "100%" }}>
       <div style={{
-       marginTop: "60px",  
-
+        marginTop: "60px",
+        width: "85%",
+        marginInline: "6.5%"
        }}>
         <TransactionFilterMenu filter={filter} setFilter={setFilter} />
         <div style={{ marginTop: "16px" }} />
diff --git a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
index 69d6818..351b62a 100644
--- a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
+++ b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
@@ -48,7 +48,7 @@ export default function TeacherTransactionListView() {
         <div
           style={{
             ...styles.flex_column,
-            ...{ height: "50vh", overflowY: "scroll" },
+            ...{ height: "50vh", overflowY: "scroll", width: "85%", marginInline: "6.5%" },
           }}
         >
           {transactions.data ? (
diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx
index 2a47bff..757d53a 100644
--- a/src/Components/TransactionEntry/TransactionEntry.tsx
+++ b/src/Components/TransactionEntry/TransactionEntry.tsx
@@ -18,11 +18,11 @@ export default function TransactionEntry(props: props) {
       style={{
         alignSelf: "center",
         justifySelf: "center",
-        width: "584px",
         backgroundColor: colors.header_color,
         borderRadius: 16,
-        margin: "10px",
+        marginTop: "10px",
         paddingTop: "15px",
+        width: "100%"
        
       }}
       onClick={props.onClick}
diff --git a/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx b/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
index 467b007..a3c9f24 100644
--- a/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
+++ b/src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
@@ -41,10 +41,11 @@ export default function TransactionFilterMenu(props: props) {
             alignSelf: "center",
             justifyContent: "center",
             flexWrap: "wrap",
+            width: "100%"
           },
         }}
       >
-        <FormControl sx={{ width: "384px" }}>
+        <FormControl sx={{ width: "550px", marginInline: "30px" }}>
           <InputLabel style={{ backgroundColor: "white", padding: 0 }}>
             Filter Transactions
           </InputLabel>
diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx
index 4f493d9..6dd68b6 100644
--- a/src/Pages/DashboardPage/DashboardPage.tsx
+++ b/src/Pages/DashboardPage/DashboardPage.tsx
@@ -21,10 +21,10 @@ export default function Dashboard() {
           style={{
             ...styles.flex_column,
             ...{
-              flexWrap: "wrap",
               justifyContent: "center",
-              marginLeft: "16px",
-              marginRight: "16px",
+              alignItems: "center",
+              marginInline: "10px"
+
             },
           }}
         >