Fixture/widget lable (#66)

* Updated Widget label Ui and add Company logo from top of side nav
* update change for logo placement
* Updated: minor fixes
* Update: Center subtitle

Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/components/DashboardNavbar/index.js

@@ -63,9 +63,10 @@ import {
   // setOpenConfigurator
 } from 'context';
 // import SearchBar from 'components/SearchBar';
-import { Box, Typography } from '@mui/material';
+// import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 
-import FSRServicesLogo from 'assets/images/fsrServicesLogo.png';
+// import FSRServicesLogo from 'assets/images/fsrServicesLogo.png';
 
 const useStyles = makeStyles(() => ({
   overlayStyle: {
@@ -199,8 +200,8 @@ function DashboardNavbar({ absolute, light, isMini /*, children*/ }) {
           paddingBottom: '8px',
           marginBottom: '5px',
           boxShadow: '0px 1px 4px rgb(0 0 0 / 8%)',
-          width: '100% !important',
-          background: 'linear-gradient(90deg, #2d373c 1%, #ffffff 100%)'
+          width: '100% !important'
+          // background: 'linear-gradient(90deg, #2d373c 1%, #ffffff 100%)'
         }}
       >
         <Toolbar className="custom-header">
@@ -210,14 +211,14 @@ function DashboardNavbar({ absolute, light, isMini /*, children*/ }) {
                 sx={{ width: '100%', maxWidth: '100%', display: 'flex', alignItems: 'center' }}
                 pr={3}
               >
-                <img
+                {/* <img
                   src={FSRServicesLogo}
                   alt="FSR services logo"
                   style={{
                     height: '2.3em'
                   }}
                 />
-                <Typography sx={{ color: '#fff', marginLeft: '60px' }}>We Know Roofing</Typography>
+                <Typography sx={{ color: '#fff', marginLeft: '60px' }}>We Know Roofing</Typography> */}
               </MDBox>
               <MDBox display="flex" color={light ? 'white' : 'inherit'}>
                 <IconButton

src/components/Sidenav/index.js

@@ -38,7 +38,9 @@ import SidenavItem from 'components/Sidenav/SidenavItem';
 
 // Custom styles for the Sidenav
 import SidenavRoot from 'components/Sidenav/SidenavRoot';
-import sidenavLogoLabel from 'components/Sidenav/styles/sidenav';
+// import sidenavLogoLabel from 'components/Sidenav/styles/sidenav';
+import Logo from 'assets/images/logo-white-1.png';
+import FSRServicesLogo from 'assets/images/fsrServicesLogo.png';
 
 // Material Dashboard 2 PRO React context
 import {
@@ -47,8 +49,9 @@ import {
   setTransparentSidenav,
   setWhiteSidenav
 } from 'context';
+import { Typography } from '@mui/material';
 
-function Sidenav({ color, brandName, routes, ...rest }) {
+function Sidenav({ color, routes, ...rest }) {
   const [openCollapse, setOpenCollapse] = useState(false);
   const [openNestedCollapse, setOpenNestedCollapse] = useState(false);
   const [controller, dispatch] = useMaterialUIController();
@@ -257,18 +260,14 @@ function Sidenav({ color, brandName, routes, ...rest }) {
         </MDBox>
         <MDBox component={NavLink} to="/" display="flex" alignItems="center">
           <MDBox
-            width={!brandName && '100%'}
-            sx={(theme) => sidenavLogoLabel(theme, { miniSidenav })}
+            sx={{
+              textAlign: 'center'
+            }}
           >
-            <MDTypography
-              fontSize="2rem"
-              component="h1"
-              variant="button"
-              fontWeight="bold"
-              color={textColor}
-            >
-              {brandName}
-            </MDTypography>
+            <img src={FSRServicesLogo} all="logo" width="100%" />
+            <Typography sx={{ color: '#fff', marginLeft: '0px', fontSize: '16px' }}>
+              We Know Roofing
+            </Typography>
           </MDBox>
         </MDBox>
       </MDBox>
@@ -278,7 +277,32 @@ function Sidenav({ color, brandName, routes, ...rest }) {
           (darkMode && !transparentSidenav && whiteSidenav)
         }
       /> */}
-      <List>{renderRoutes}</List>
+      <List sx={{ marginBottom: '30px' }}>{renderRoutes}</List>
+      <MDBox
+        component={NavLink}
+        to="/"
+        display="flex"
+        alignItems="center"
+        sx={{ display: 'inline-block', marginTop: 'auto', textAlign: 'center' }}
+      >
+        <MDBox>
+          {/* <MDTypography
+              fontSize="2rem"
+              component="h1"
+              variant="button"
+              fontWeight="bold"
+              color={textColor}
+            >
+              {brandName}
+            </MDTypography> */}
+          <img
+            src={Logo}
+            all="logo"
+            width="60%"
+            style={{ marginLeft: '-15px', marginBottom: '15px' }}
+          />
+        </MDBox>
+      </MDBox>
     </SidenavRoot>
   );
 }

src/pages/widgetLabel/index.js

@@ -1,4 +1,4 @@
-import { Box, Grid, TableBody, TableCell, TableRow } from '@mui/material';
+import { Box, TableBody, TableCell, TableRow } from '@mui/material';
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
 import { makeStyles } from '@mui/styles';
@@ -10,6 +10,9 @@ import SearchBar from 'components/SearchBar';
 import BasicTable from 'components/BasicTable';
 import Barcodeimage from 'assets/images/barcode-number.png';
 import MDButton from 'components/Button';
+import Checkbox from '@mui/material/Checkbox';
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 import Breadcrumbs from 'components/Breadcrumbs';
 
 const useStyles = makeStyles({
@@ -175,8 +178,14 @@ function WidgetLabel() {
           ]}
         />
         <Box mx={3} my={3}>
-          <Grid container spacing={2}>
-            <Grid item xs={12} sm={3} md={3}>
+          <Box
+            sx ={{
+              display: 'grid',
+              gridTemplateColumns: ' repeat(5, 1fr)',
+              gridColumnGap :'20px'
+            }}
+          >
+            <Box>
               <Box component="div" className={classes.labelSize}>
                 Select Inventory
               </Box>
@@ -205,8 +214,8 @@ function WidgetLabel() {
                   <MenuItem>Lorem Ipsum</MenuItem>
                 </Select>
               </Box>
-            </Grid>
-            <Grid item xs={12} sm={3} md={3}>
+            </Box>
+            <Box>
               <Box component="div" className={classes.labelSize}>
                 Select Family
               </Box>
@@ -235,8 +244,8 @@ function WidgetLabel() {
                   <MenuItem>Lorem Ipsum</MenuItem>
                 </Select>
               </Box>
-            </Grid>
-            <Grid item xs={12} sm={3} md={3}>
+            </Box>
+            <Box>
               <Box component="div" className={classes.labelSize}>
                 Select Sub Family
               </Box>
@@ -265,16 +274,19 @@ function WidgetLabel() {
                   <MenuItem>Lorem Ipsum</MenuItem>
                 </Select>
               </Box>
-            </Grid>
-            <Grid item xs={12} sm={3} md={3}>
+            </Box>
+            <Box>
               <Box component="div" className={classes.labelSize}>
                 Search Keyword
               </Box>
               <Box className={classes.customLabel}>
                 <SearchBar />
               </Box>
-            </Grid>
-          </Grid>
+            </Box>
+            <Box>
+              <MDButton color="primary" sx={{ minWidth:'100%', marginTop:'30px', padding:'13px 40px' }} >{'Filter'}</MDButton>
+            </Box>
+          </Box>
           <Box sx={{ marginTop: '24px', backgroundColor: '#FFFFFF' }}>
             <BasicTable
               headCells={headCells}
@@ -286,7 +298,7 @@ function WidgetLabel() {
                 {records &&
                   records.map((item) => (
                     <TableRow key={item.id}>
-                      <TableCell>{item.warehouse}</TableCell>
+                      <TableCell><Checkbox {...label} sx={{ marginRight:'2px' }} /> {item.warehouse}</TableCell>
                       <TableCell>{item.zone}</TableCell>
                       <TableCell>{item.area}</TableCell>
                       <TableCell>{item.row}</TableCell>