feat: transfer status filter, styling

src/pages/MyTransfers/TransfersTable.js

@@ -1,4 +1,5 @@
 import {
+  FormControl,
   Grid,
   Paper,
   Table,
@@ -9,24 +10,83 @@ import {
   TableRow,
   Typography,
 } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
+import { ArrowDropDownIcon, FilterLabelText, SelectMenuItem, TransferSelectFilter } from './TransfersTable.styled';
 
 
-const TableHeader = ({ tableTitle }) => {
+const statusList = [
+  {
+    label: 'Completed',
+    value: 'Completed',
+    color: '#86C232',
+  },
+  {
+    label: 'Pending',
+    value: 'Pending',
+    color: 'black',
+  },
+  {
+    label: 'Failed',
+    value: 'Failed',
+    color: 'red',
+  },
+];
+
+const TransferFilter = ({ transferFilterValue, setTransferFilterValue }) => {
+
+  // select value color must match the menuitem color
+  // 'None' option has a default color
+  const getSelectColor = () => {
+    return transferFilterValue
+      ? statusList.find(x => x.value === transferFilterValue).color
+      : '#585B5D';
+  };
+
+  return (
+    <FormControl sx={{ width: '192px' }}>
+      <FilterLabelText>Transfer Status</FilterLabelText>
+
+      <TransferSelectFilter
+        displayEmpty
+        value={transferFilterValue}
+        onChange={(e) => setTransferFilterValue(e.target.value)}
+        IconComponent={ArrowDropDownIcon}
+        sx={{ color: getSelectColor() }}
+      >
+        <SelectMenuItem value={''}>None</SelectMenuItem>
+
+        {statusList.map((status, index) => <SelectMenuItem key={index} value={status.value}
+                                                           sx={{ color: status.color }}>{status.label}</SelectMenuItem>)}
+      </TransferSelectFilter>
+    </FormControl>);
+};
+
+// const Date;
+
+const TableHeader = ({ tableTitle, transferFilterValue, setTransferFilterValue }) => {
   return (
     <Grid item sx={{ paddingBottom: '15px' }}>
       <Typography variant={'h4'}>
         {tableTitle}
       </Typography>
+      <TransferFilter
+        transferFilterValue={transferFilterValue}
+        setTransferFilterValue={setTransferFilterValue}
+      />
+
     </Grid>
 
   );
 };
 
 
 const TransfersTable = ({ tableTitle, tableColumns }) => {
+
+  const [tranferFilterValue, setTransferFilterValue] = useState('');
+
   return (<Grid container direction={'column'}>
-    <TableHeader tableTitle={tableTitle} />
+    <TableHeader tableTitle={tableTitle} transferFilterValue={tranferFilterValue}
+                 setTransferFilterValue={setTransferFilterValue} />
     {/*<Grid>*/}
     {/*  <Paper elevation={3} sx={{ height: '400px', width: '1000px' }}>*/}
     {/*    */}

src/pages/MyTransfers/TransfersTable.styled.js

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { MenuItem, Select, Typography } from '@mui/material';
+import { ArrowDropDown } from '@mui/icons-material';
+
+export const FilterLabelText = styled(Typography)({
+  fontWeight: '700',
+  fontSize: '16px',
+  lineHeight: '24px',
+  marginBottom: '3px',
+});
+
+export const TransferSelectFilter = styled(Select)({
+  fontSize: '16px',
+  borderRadius: '4px',
+  border: '1px solid #E0E0E0',
+  background: 'var(--neutral-white, #FFF)',
+  height: '40px',
+  fontWeight: '400',
+  opacity: '0.8',
+  padding: '8px',
+  '& .MuiSelect-select:focus': {
+    backgroundColor: 'transparent',
+    color: 'inherit',
+  },
+});
+
+export const SelectMenuItem = styled(MenuItem)({
+  fontSize: '16px',
+});
+
+export const ArrowDropDownIcon = styled(ArrowDropDown)({
+  fontSize: '24px',
+});
+