Countcard fixes and removing serarch (#41)

Signed-off-by: Courtney Gosselin <[email protected]> Co-authored-by: Courtney Gosselin <[email protected]>
CanDIG · May 10, 2022 · 2a180e0 · 2a180e0
1 parent 41aeeb1
commit 2a180e0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 34 deletions.
diff --git a/src/layout/MainLayout/Header/SearchSection/index.js b/src/layout/MainLayout/Header/SearchSection/index.js
@@ -175,15 +175,6 @@ const SearchSection = () => {
                             <IconSearch stroke={1.5} size="1rem" className={classes.startAdornment} />
                         </InputAdornment>
                     }
-                    endAdornment={
-                        <InputAdornment position="end">
-                            <ButtonBase sx={{ borderRadius: '12px' }}>
-                                <Avatar variant="rounded" className={classes.headerAvatar}>
-                                    <IconAdjustmentsHorizontal stroke={1.5} size="1.3rem" />
-                                </Avatar>
-                            </ButtonBase>
-                        </InputAdornment>
-                    }
                     aria-describedby="search-helper-text"
                     inputProps={{
                         'aria-label': 'weight'

diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
@@ -7,7 +7,7 @@ import { Avatar, Box, ButtonBase } from '@material-ui/core';
 
 // project imports
 import LogoSection from '../LogoSection';
-import SearchSection from './SearchSection';
+// import SearchSection from './SearchSection';
 import ProfileSection from './ProfileSection';
 // import NotificationSection from './NotificationSection';
 
@@ -59,7 +59,7 @@ const Header = ({ handleLeftDrawerToggle }) => {
             </div>
 
             {/* header search */}
-            <SearchSection theme="light" />
+            {/* <SearchSection theme="light" />  Currently not needed */}
             <div className={classes.grow} />
             <div className={classes.grow} />
 

diff --git a/src/ui-component/cards/CountCard.js b/src/ui-component/cards/CountCard.js
@@ -10,8 +10,6 @@ import MainCard from 'ui-component/cards/MainCard';
 import SkeletonEarningCard from 'ui-component/cards/Skeleton/EarningCard';
 
 // assets
-import EarningIcon from 'assets/images/icons/earning.svg';
-import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
 import GetAppTwoToneIcon from '@material-ui/icons/GetAppOutlined';
 import FileCopyTwoToneIcon from '@material-ui/icons/FileCopyOutlined';
@@ -62,6 +60,7 @@ const useStyles = makeStyles((theme) => ({
         ...theme.typography.commonAvatar,
         ...theme.typography.largeAvatar,
         backgroundColor: ({ primary }) => (primary ? theme.palette.primary[800] : theme.palette.secondary[800]),
+        color: ({ primary }) => (primary ? theme.palette.primary[200] : theme.palette.secondary[200]),
         marginTop: '8px'
     },
     avatarRight: {
@@ -100,14 +99,14 @@ const useStyles = makeStyles((theme) => ({
 
 //= ==========================|| INDIVIDUAL OVERVIEW - COUNT CARD ||===========================//
 
-const CountCard = ({ isLoading, title, count, primary }) => {
+const CountCard = ({ isLoading, title, count, primary, icon }) => {
     const classes = useStyles({ primary });
 
     const [anchorEl, setAnchorEl] = React.useState(null);
 
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
+    // const handleClick = (event) => {
+    //     setAnchorEl(event.currentTarget);
+    // };
 
     const handleClose = () => {
         setAnchorEl(null);
@@ -124,19 +123,10 @@ const CountCard = ({ isLoading, title, count, primary }) => {
                             <Grid container justifyContent="space-between">
                                 <Grid item>
                                     <Avatar variant="rounded" className={classes.avatar}>
-                                        <img src={EarningIcon} alt="Notification" />
+                                        {icon}
                                     </Avatar>
                                 </Grid>
                                 <Grid item>
-                                    <Avatar
-                                        variant="rounded"
-                                        className={classes.avatarRight}
-                                        aria-controls="menu-earning-card"
-                                        aria-haspopup="true"
-                                        onClick={handleClick}
-                                    >
-                                        <MoreHorizIcon fontSize="inherit" />
-                                    </Avatar>
                                     <Menu
                                         id="menu-earning-card"
                                         anchorEl={anchorEl}
@@ -195,7 +185,8 @@ CountCard.propTypes = {
     isLoading: PropTypes.bool,
     title: PropTypes.string,
     count: PropTypes.number,
-    primary: PropTypes.bool
+    primary: PropTypes.bool,
+    icon: PropTypes.any
 };
 
 export default CountCard;
diff --git a/src/views/overview/individuals.js b/src/views/overview/individuals.js
@@ -16,8 +16,9 @@ import { fetchKatsu } from 'store/api';
 import { gridSpacing } from 'store/constant';
 
 // assets
-import TableChartOutlinedIcon from '@material-ui/icons/TableChartOutlined';
-import StorefrontTwoToneIcon from '@material-ui/icons/StorefrontTwoTone';
+import BiotechIcon from '@material-ui/icons/Biotech';
+import QueryStatsIcon from '@material-ui/icons/QueryStats';
+import PersonIcon from '@material-ui/icons/Person';
 
 /*
  * Return the aggregation of diseases
@@ -112,10 +113,22 @@ function IndividualsOverview() {
             <Grid item xs={12}>
                 <Grid container spacing={gridSpacing}>
                     <Grid item lg={4} md={6} sm={6} xs={12}>
-                        <CountCard isLoading={isLoading} title="Number of Individuals" count={individualCounter} primary />
+                        <CountCard
+                            isLoading={isLoading}
+                            title="Number of Individuals"
+                            count={individualCounter}
+                            primary
+                            icon={<PersonIcon fontSize="inherit" />}
+                        />
                     </Grid>
                     <Grid item lg={4} md={6} sm={6} xs={12}>
-                        <CountCard isLoading={isLoading} title="Phenotypic Features in Database" count={featureCount} primary={false} />
+                        <CountCard
+                            isLoading={isLoading}
+                            title="Phenotypic Features in Database"
+                            count={featureCount}
+                            primary={false}
+                            icon={<PersonIcon fontSize="inherit" />}
+                        />
                     </Grid>
                     <Grid item lg={4} md={12} sm={12} xs={12}>
                         <Grid container spacing={gridSpacing}>
@@ -125,15 +138,15 @@ function IndividualsOverview() {
                                     title="Number of Diseases"
                                     count={diseasesSum}
                                     dark
-                                    icon={<TableChartOutlinedIcon fontSize="inherit" />}
+                                    icon={<QueryStatsIcon fontSize="inherit" />}
                                 />
                             </Grid>
                             <Grid item sm={6} xs={12} md={6} lg={12}>
                                 <SmallCountCard
                                     title="Number of Biosamples"
                                     count={biosampleCount}
                                     dark={false}
-                                    icon={<StorefrontTwoToneIcon fontSize="inherit" />}
+                                    icon={<BiotechIcon fontSize="inherit" />}
                                 />
                             </Grid>
                         </Grid>