Skip to content

Commit 579538e

Browse files
benzerbettbenzerbett
committed
UI improvements
1 parent e418550 commit 579538e

File tree

5 files changed

+37
-24
lines changed

5 files changed

+37
-24
lines changed

‎public/manifest.webapp

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "1.1.9-beta",
2+
"version": "1.2.0-beta",
33
"name": "Health Commodities Dashboard - Beta",
44
"appType": "APP",
55
"description": "An App to Visualize Health Commodities data",

‎src/assets/css/custom.css

+17-3
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@
129129

130130
/* Background */
131131
.bcclear{ background-color: transparent !important; }
132+
.bcprimary{ background-color: #01579b !important; }
132133
.bcdefault{ background: #f9fbfb !important; }
133134
.bcwhite{ background-color: #ffffff !important; }
134135
.bcblack{ background-color: #1a1a1a !important; }
@@ -465,12 +466,25 @@ body{
465466
/* ------------------------- CELL FILL/> -------------------------- */
466467

467468
.sidenavbtn.active{
468-
background-color: #01579b;
469-
color: #f9fbfb;
469+
background-color: #01579b !important;
470+
color: #f9fbfb !important;
470471
}
471472
.sidenavbtn.active:focus,
472473
.sidenavbtn.active:active,
473474
.sidenavbtn.active:hover{
474-
background-color: #094777;
475+
background-color: #094777 !important;
476+
}
477+
.active-sidebar-group{
478+
background-color: #01579b !important;
479+
border-radius: 5px;
480+
color: #ffffff !important;
481+
}
482+
.active-sidebar-group > span
483+
.active-sidebar-group > div{
484+
border-radius: 5px;
485+
}
486+
.active-sidebar-group > div > span{
487+
color: #f9fbfb;
488+
border-radius: 5px;
475489
}
476490
/* custom */

‎src/layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav.js

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/no-multi-comp */
22
/* eslint-disable react/display-name */
33
import React, { forwardRef } from 'react';
4-
import { NavLink as RouterLink } from 'react-router-dom';
4+
import { NavLink as RouterLink, useLocation } from 'react-router-dom';
55
import clsx from 'clsx';
66
import PropTypes from 'prop-types';
77
import makeStyles from '@material-ui/styles/makeStyles';
@@ -67,7 +67,7 @@ const useStyles = makeStyles(theme => ({
6767
marginLeft: '15px'
6868
},
6969
chevrons: {
70-
color: '#cccccc'
70+
color: '#777'
7171
}
7272
}));
7373

@@ -82,18 +82,17 @@ const CustomRouterLink = forwardRef((props, ref) => (
8282
));
8383

8484
const SidebarNav = props => {
85-
8685
const { className, location, ...rest } = props;
87-
86+
console.log("SidebarNav: location.pathname = ", location)
8887
if (location.hash == "" || location.hash == undefined) { location.hash = "" }
8988
const classes = useStyles();
9089

9190
//multi menu
92-
const [open1, setOpen1] = React.useState(false); const handleClick1 = () => setOpen1(!open1);
93-
const [open2, setOpen2] = React.useState(false); const handleClick2 = () => setOpen2(!open2);
94-
const [open3, setOpen3] = React.useState(false); const handleClick3 = () => setOpen3(!open3);
95-
const [open4, setOpen4] = React.useState(false); const handleClick4 = () => setOpen4(!open4);
96-
const [open5, setOpen5] = React.useState(false); const handleClick5 = () => setOpen5(!open5);
91+
const [open1, setOpen1] = React.useState(location.pathname.includes("/ss/")); const handleClick1 = () => setOpen1(!open1);
92+
const [open2, setOpen2] = React.useState(location.pathname.includes("/rr/")); const handleClick2 = () => setOpen2(!open2);
93+
const [open3, setOpen3] = React.useState(location.pathname.includes("/dq/")); const handleClick3 = () => setOpen3(!open3);
94+
const [open4, setOpen4] = React.useState(location.pathname.includes("/scp/")); const handleClick4 = () => setOpen4(!open4);
95+
const [open5, setOpen5] = React.useState(location.pathname.includes("/hff/")); const handleClick5 = () => setOpen5(!open5);
9796
//multi menu
9897

9998
return (
@@ -108,7 +107,7 @@ const SidebarNav = props => {
108107
<ListSubheader disableSticky style={{ color: '#aaaaaa', fontSize: 'small' }}>COUNTY</ListSubheader>
109108
<Divider />
110109
{/* ==============multi menu=============== */}
111-
<ListItem button onClick={handleClick1}>
110+
<ListItem button onClick={handleClick1} className={location.pathname.includes("/ss/") ? " active-sidebar-group" : ""}>
112111
<ListItemText className={classes.fwmedium} primary="Stock Status" />
113112
{open1 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
114113
</ListItem>
@@ -122,7 +121,7 @@ const SidebarNav = props => {
122121
</List>
123122
</Collapse>
124123

125-
<ListItem button onClick={handleClick2}>
124+
<ListItem button onClick={handleClick2} className={location.pathname.includes("/rr/") ? " active-sidebar-group" : ""}>
126125
<ListItemText className={classes.fwmedium} primary="Reporting Rate" />
127126
{open2 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
128127
</ListItem>
@@ -136,7 +135,7 @@ const SidebarNav = props => {
136135
</List>
137136
</Collapse>
138137

139-
<ListItem button onClick={handleClick3}>
138+
<ListItem button onClick={handleClick3} className={location.pathname.includes("/dq/") ? " active-sidebar-group" : ""}>
140139
<ListItemText className={classes.fwmedium} primary="Data Quality" />
141140
{open3 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
142141
</ListItem>
@@ -150,7 +149,7 @@ const SidebarNav = props => {
150149
</List>
151150
</Collapse>
152151

153-
<ListItem button onClick={handleClick4}>
152+
<ListItem button onClick={handleClick4} className={location.pathname.includes("/scp/") ? " active-sidebar-group" : ""}>
154153
<ListItemText className={classes.fwmedium} primary="Supply Chain" />
155154
{open4 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
156155
</ListItem>
@@ -177,7 +176,7 @@ const SidebarNav = props => {
177176
) : "")}
178177

179178

180-
<ListItem button onClick={handleClick5}>
179+
<ListItem button onClick={handleClick5} className={location.pathname.includes("/hff/") ? " active-sidebar-group" : ""}>
181180
<ListItemText className={classes.fwmedium} primary="Facility Follow-up" />
182181
{open4 ? <ChevronLeftOutlinedIcon className={classes.chevrons} /> : <ChevronRightOutlined className={classes.chevrons} />}
183182
</ListItem>

‎src/views/HFFollowup/Overstocked.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -236,15 +236,15 @@ if (e_rr.msg.includes('aborted') || e_rr.msg.includes('NetworkError')) {
236236
return (
237237
<div className={classes.root}>
238238
<Grid container spacing={1}>
239-
<Grid item xs={12} sm={6}>
239+
<Grid item xs={12} sm={6} style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
240240
{err.error ? (
241241
<></>
242242
) : (
243243
<Select
244244
className={(classes.gridchild, 'text-bold p-0')}
245-
variant="outlined"
245+
variant="standard"
246246
autoWidth={true}
247-
style={{ fontSize: '1rem' }}
247+
style={{ fontSize: '1rem', padding: '5px' }}
248248
defaultValue={endpoints[0][process.env.REACT_APP_ENV == "dev" ? "local_url": "url"]}
249249
onChange={chp => {
250250
sessionStorage.setItem(

‎src/views/HFFollowup/Understocked.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -233,15 +233,15 @@ if (e_rr.msg.includes('aborted') || e_rr.msg.includes('NetworkError')) {
233233
return (
234234
<div className={classes.root}>
235235
<Grid container spacing={1}>
236-
<Grid item xs={12} sm={6}>
236+
<Grid item xs={12} sm={6} style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
237237
{err.error ? (
238238
<></>
239239
) : (
240240
<Select
241241
className={(classes.gridchild, 'text-bold p-0')}
242-
variant="outlined"
242+
variant="standard"
243243
autoWidth={true}
244-
style={{ fontSize: '1rem' }}
244+
style={{ fontSize: '1rem', padding: '5px' }}
245245
defaultValue={endpoints[0][process.env.REACT_APP_ENV == "dev" ? "local_url": "url"]}
246246
onChange={chp => {
247247
sessionStorage.setItem(

0 commit comments

Comments
 (0)