From 84aa92cd2e862f51ed95b295a9f0886e11125d1f Mon Sep 17 00:00:00 2001
From: Pranav Kakaraparti <pkakaraparti@ufl.edu>
Date: Fri, 28 Jul 2023 20:03:39 -0500
Subject: [PATCH] feat: table header styling

---
 package.json                                 |  2 +
 src/pages/MyTransfers/TableFilters.js        |  1 +
 src/pages/MyTransfers/TableFilters.styled.js | 10 +++++
 src/pages/MyTransfers/TransfersTable.js      | 39 ++++++++++++--------
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 58f8410..606679a 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,12 @@
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.2",
+    "@mui/x-date-pickers": "^6.10.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "dayjs": "^1.11.9",
     "jwt-decode": "^3.1.2",
     "npm": "*",
     "react": "^18.2.0",
diff --git a/src/pages/MyTransfers/TableFilters.js b/src/pages/MyTransfers/TableFilters.js
index 0e32696..bd937b8 100644
--- a/src/pages/MyTransfers/TableFilters.js
+++ b/src/pages/MyTransfers/TableFilters.js
@@ -64,6 +64,7 @@ export const DateRangeFilter = ({ startDate, setStartDate, endDate, setEndDate }
 
   return (
     <FormControl sx={{ width: '192px' }}>
+      <FilterLabelText>Created Date</FilterLabelText>
       <DateRangeButton onClick={handleClick} endIcon={<DateRangeFilterIcon />}>
         {startDate ? getDateText(startDate) : defaultDateText} - {endDate ? getDateText(endDate) : defaultDateText}
         {/*{defaultDateText}*/}
diff --git a/src/pages/MyTransfers/TableFilters.styled.js b/src/pages/MyTransfers/TableFilters.styled.js
index a37baf9..4dcd18f 100644
--- a/src/pages/MyTransfers/TableFilters.styled.js
+++ b/src/pages/MyTransfers/TableFilters.styled.js
@@ -29,6 +29,12 @@ export const SelectFilter = styled(Select)({
     backgroundColor: 'transparent',
     color: 'inherit',
   },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+  },
+  ':hover': {
+    border: '1px solid black',
+  },
 });
 
 export const SelectMenuItem = styled(MenuItem)({
@@ -57,6 +63,10 @@ export const DateRangeButton = styled(Button)({
   textTransform: 'none',
   justifyContent: 'space-between',
   color: '#585B5D',
+  ':hover': {
+    background: 'var(--neutral-white, #FFF)',
+    border: '1px solid black',
+  },
 });
 
 export const DateRangeFilterIcon = styled(DateRangeIcon)({
diff --git a/src/pages/MyTransfers/TransfersTable.js b/src/pages/MyTransfers/TransfersTable.js
index 72ebe0e..b820169 100644
--- a/src/pages/MyTransfers/TransfersTable.js
+++ b/src/pages/MyTransfers/TransfersTable.js
@@ -40,23 +40,30 @@ const TableHeader = ({
                        setEndDate,
                      }) => {
   return (
-    <Grid item sx={{ paddingBottom: '15px' }}>
-      <Typography variant={'h4'}>
-        {tableTitle}
-      </Typography>
-      <TransferFilter
-        transferFilterValue={transferFilterValue}
-        setTransferFilterValue={setTransferFilterValue}
-        statusList={statusList}
-      />
-      <DateRangeFilter
-        startDate={startDate}
-        setStartDate={setStartDate}
-        endDate={endDate}
-        setEndDate={setEndDate}
-      />
+    <Grid item container sx={{ paddingBottom: '15px' }}>
+      <Grid item xs={7} sx={{ display: 'flex', alignItems: 'end' }}>
+        <Typography variant={'h4'}>
+          {tableTitle}
+        </Typography>
+      </Grid>
+      <Grid container xs={5}>
+        <Grid item xs={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <TransferFilter
+            transferFilterValue={transferFilterValue}
+            setTransferFilterValue={setTransferFilterValue}
+            statusList={statusList}
+          />
+        </Grid>
+        <Grid item xs={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <DateRangeFilter
+            startDate={startDate}
+            setStartDate={setStartDate}
+            endDate={endDate}
+            setEndDate={setEndDate}
+          />
+        </Grid>
+      </Grid>
     </Grid>
-
   );
 };