feat: table header styling

Greenstand · Jul 29, 2023 · 84aa92c · 84aa92c
1 parent 2301162
commit 84aa92c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
-
  );
 };