UI improvements

uonafya · May 27, 2021 · 579538e · 579538e
1 parent e418550
commit 579538e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 24 deletions.
diff --git a/public/manifest.webapp b/public/manifest.webapp
@@ -1,5 +1,5 @@
 {
-  "version": "1.1.9-beta",
+  "version": "1.2.0-beta",
   "name": "Health Commodities Dashboard - Beta",
   "appType": "APP",
   "description": "An App to Visualize Health Commodities data",

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
@@ -129,6 +129,7 @@
 
 /* Background */
 .bcclear{ background-color: transparent !important; }
+.bcprimary{ background-color: #01579b !important; }
 .bcdefault{ background: #f9fbfb !important; }
 .bcwhite{ background-color: #ffffff !important; }
 .bcblack{ background-color: #1a1a1a !important; }
@@ -465,12 +466,25 @@ body{
 /* ------------------------- CELL FILL/> -------------------------- */
 
 .sidenavbtn.active{
-    background-color: #01579b;
-    color: #f9fbfb;
+    background-color: #01579b !important;
+    color: #f9fbfb !important;
 }
 .sidenavbtn.active:focus,
 .sidenavbtn.active:active,
 .sidenavbtn.active:hover{
-    background-color: #094777;
+    background-color: #094777 !important;
+}
+.active-sidebar-group{
+    background-color: #01579b !important;
+    border-radius: 5px;
+    color: #ffffff !important;
+}
+.active-sidebar-group > span
+.active-sidebar-group > div{
+    border-radius: 5px;
+}
+.active-sidebar-group > div  > span{
+    color: #f9fbfb;
+    border-radius: 5px;
 }
     /* custom */
diff --git a/src/layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav.js b/src/layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 /* eslint-disable react/display-name */
 import React, { forwardRef } from 'react';
-import { NavLink as RouterLink } from 'react-router-dom';
+import { NavLink as RouterLink, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import makeStyles from '@material-ui/styles/makeStyles';
@@ -67,7 +67,7 @@ const useStyles = makeStyles(theme => ({
         marginLeft: '15px'
     },
     chevrons: {
-        color: '#cccccc'
+        color: '#777'
     }
 }));
 
@@ -82,18 +82,17 @@ const CustomRouterLink = forwardRef((props, ref) => (
 ));
 
 const SidebarNav = props => {
-
     const { className, location, ...rest } = props;
-
+    console.log("SidebarNav: location.pathname = ", location)
     if (location.hash == "" || location.hash == undefined) { location.hash = "" }
     const classes = useStyles();
 
     //multi menu
-    const [open1, setOpen1] = React.useState(false); const handleClick1 = () => setOpen1(!open1);
-    const [open2, setOpen2] = React.useState(false); const handleClick2 = () => setOpen2(!open2);
-    const [open3, setOpen3] = React.useState(false); const handleClick3 = () => setOpen3(!open3);
-    const [open4, setOpen4] = React.useState(false); const handleClick4 = () => setOpen4(!open4);
-    const [open5, setOpen5] = React.useState(false); const handleClick5 = () => setOpen5(!open5);
+    const [open1, setOpen1] = React.useState(location.pathname.includes("/ss/")); const handleClick1 = () => setOpen1(!open1);
+    const [open2, setOpen2] = React.useState(location.pathname.includes("/rr/")); const handleClick2 = () => setOpen2(!open2);
+    const [open3, setOpen3] = React.useState(location.pathname.includes("/dq/")); const handleClick3 = () => setOpen3(!open3);
+    const [open4, setOpen4] = React.useState(location.pathname.includes("/scp/")); const handleClick4 = () => setOpen4(!open4);
+    const [open5, setOpen5] = React.useState(location.pathname.includes("/hff/")); const handleClick5 = () => setOpen5(!open5);
     //multi menu
 
     return (
@@ -108,7 +107,7 @@ const SidebarNav = props => {
             <ListSubheader disableSticky style={{ color: '#aaaaaa', fontSize: 'small' }}>COUNTY</ListSubheader>
             <Divider />
             {/* ==============multi menu=============== */}
-            <ListItem button onClick={handleClick1}>
+            <ListItem button onClick={handleClick1} className={location.pathname.includes("/ss/") ? " active-sidebar-group" : ""}>
                 <ListItemText className={classes.fwmedium} primary="Stock Status" />
                 {open1 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
             </ListItem>
@@ -122,7 +121,7 @@ const SidebarNav = props => {
                 </List>
             </Collapse>
 
-            <ListItem button onClick={handleClick2}>
+            <ListItem button onClick={handleClick2} className={location.pathname.includes("/rr/") ? " active-sidebar-group" : ""}>
                 <ListItemText className={classes.fwmedium} primary="Reporting Rate" />
                 {open2 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
             </ListItem>
@@ -136,7 +135,7 @@ const SidebarNav = props => {
                 </List>
             </Collapse>
 
-            <ListItem button onClick={handleClick3}>
+            <ListItem button onClick={handleClick3} className={location.pathname.includes("/dq/") ? " active-sidebar-group" : ""}>
                 <ListItemText className={classes.fwmedium} primary="Data Quality" />
                 {open3 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
             </ListItem>
@@ -150,7 +149,7 @@ const SidebarNav = props => {
                 </List>
             </Collapse>
 
-            <ListItem button onClick={handleClick4}>
+            <ListItem button onClick={handleClick4} className={location.pathname.includes("/scp/") ? " active-sidebar-group" : ""}>
                 <ListItemText className={classes.fwmedium} primary="Supply Chain" />
                 {open4 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
             </ListItem>
@@ -177,7 +176,7 @@ const SidebarNav = props => {
             ) : "")}
 
 
-            <ListItem button onClick={handleClick5}>
+            <ListItem button onClick={handleClick5} className={location.pathname.includes("/hff/") ? " active-sidebar-group" : ""}>
                 <ListItemText className={classes.fwmedium} primary="Facility Follow-up" />
                 {open4 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
             </ListItem>

diff --git a/src/views/HFFollowup/Overstocked.js b/src/views/HFFollowup/Overstocked.js
@@ -236,15 +236,15 @@ if (e_rr.msg.includes('aborted') || e_rr.msg.includes('NetworkError')) {
   return (
     <div className={classes.root}>
       <Grid container spacing={1}>
-			<Grid item xs={12} sm={6}>
+			<Grid item xs={12} sm={6} style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
 			{err.error ? (
 				<></>
 			) : (
 				<Select
 					className={(classes.gridchild, 'text-bold p-0')}
-					variant="outlined"
+					variant="standard"
 					autoWidth={true}
-					style={{ fontSize: '1rem' }}
+					style={{ fontSize: '1rem', padding: '5px' }}
 					defaultValue={endpoints[0][process.env.REACT_APP_ENV == "dev" ? "local_url": "url"]}
 					onChange={chp => {
 						sessionStorage.setItem(

diff --git a/src/views/HFFollowup/Understocked.js b/src/views/HFFollowup/Understocked.js
@@ -233,15 +233,15 @@ if (e_rr.msg.includes('aborted') || e_rr.msg.includes('NetworkError')) {
   return (
     <div className={classes.root}>
 	  <Grid container spacing={1}>
-			<Grid item xs={12} sm={6}>
+			<Grid item xs={12} sm={6} style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
 			{err.error ? (
 				<></>
 			) : (
 				<Select
 					className={(classes.gridchild, 'text-bold p-0')}
-					variant="outlined"
+					variant="standard"
 					autoWidth={true}
-					style={{ fontSize: '1rem' }}
+					style={{ fontSize: '1rem', padding: '5px' }}
 					defaultValue={endpoints[0][process.env.REACT_APP_ENV == "dev" ? "local_url": "url"]}
 					onChange={chp => {
 						sessionStorage.setItem(