Feature - Header, sidebar, buttons, dropdown - wms-7,wms-9,wms-12,wms-20 (#18)

* sidebar and header design completed

* Feature - Button Component

* feature - create component for dropdown

* feature - made changes for style of Dropdown

* Fixed Search Icon import

* Linted

* Removed package lock

* Removed: index page style

* Removed: unused style.css file

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

public/index.html

@@ -22,7 +22,7 @@ Software.
     <meta name="theme-color" content="#1A73E8" />
     <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Material Dashboard 2 PRO React</title>
+    <title>WMS - Plaidware</title>
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"

src/App.js

@@ -42,8 +42,8 @@ import themeDark from 'assets/theme-dark';
 import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from 'context';
 
 // Images
-import brandWhite from 'assets/images/logo-ct.png';
-import brandDark from 'assets/images/logo-ct-dark.png';
+// import brandWhite from 'assets/images/logo-ct.png';
+// import brandDark from 'assets/images/logo-ct-dark.png';
 
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -61,8 +61,8 @@ export default function App() {
     layout,
     openConfigurator,
     sidenavColor,
-    transparentSidenav,
-    whiteSidenav,
+    // transparentSidenav,
+    // whiteSidenav,
     darkMode
   } = controller;
   const [onMouseEnter, setOnMouseEnter] = useState(false);
@@ -149,8 +149,8 @@ export default function App() {
             <>
               <Sidenav
                 color={sidenavColor}
-                brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-                brandName="FSR"
+                // brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
+                brandName="Plaidware"
                 routes={routes}
                 onMouseEnter={handleOnMouseEnter}
                 onMouseLeave={handleOnMouseLeave}

src/assets/fonts/new-fonts/stylesheet.css

@@ -0,0 +1,192 @@
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-BoldItalic.eot');
+    src: url('./Averta-BoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-BoldItalic.woff2') format('woff2'),
+        url('./Averta-BoldItalic.woff') format('woff'),
+        url('./Averta-BoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Bold.eot');
+    src: url('./Averta-Bold.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Bold.woff2') format('woff2'),
+        url('./Averta-Bold.woff') format('woff'),
+        url('./Averta-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Black.eot');
+    src: url('./Averta-Black.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Black.woff2') format('woff2'),
+        url('./Averta-Black.woff') format('woff'),
+        url('./Averta-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-BlackItalic.eot');
+    src: url('./Averta-BlackItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-BlackItalic.woff2') format('woff2'),
+        url('./Averta-BlackItalic.woff') format('woff'),
+        url('./Averta-BlackItalic.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ExtraBoldItalic.eot');
+    src: url('./Averta-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ExtraBoldItalic.woff2') format('woff2'),
+        url('./Averta-ExtraBoldItalic.woff') format('woff'),
+        url('./Averta-ExtraBoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ExtraBold.eot');
+    src: url('./Averta-ExtraBold.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ExtraBold.woff2') format('woff2'),
+        url('./Averta-ExtraBold.woff') format('woff'),
+        url('./Averta-ExtraBold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ExtrathinItalic.eot');
+    src: url('./Averta-ExtrathinItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ExtrathinItalic.woff2') format('woff2'),
+        url('./Averta-ExtrathinItalic.woff') format('woff'),
+        url('./Averta-ExtrathinItalic.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-LightItalic.eot');
+    src: url('./Averta-LightItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-LightItalic.woff2') format('woff2'),
+        url('./Averta-LightItalic.woff') format('woff'),
+        url('./Averta-LightItalic.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Light.eot');
+    src: url('./Averta-Light.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Light.woff2') format('woff2'),
+        url('./Averta-Light.woff') format('woff'),
+        url('./Averta-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Extrathin.eot');
+    src: url('./Averta-Extrathin.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Extrathin.woff2') format('woff2'),
+        url('./Averta-Extrathin.woff') format('woff'),
+        url('./Averta-Extrathin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-RegularItalic.eot');
+    src: url('./Averta-RegularItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-RegularItalic.woff2') format('woff2'),
+        url('./Averta-RegularItalic.woff') format('woff'),
+        url('./Averta-RegularItalic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-SemiboldItalic.eot');
+    src: url('./Averta-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-SemiboldItalic.woff2') format('woff2'),
+        url('./Averta-SemiboldItalic.woff') format('woff'),
+        url('./Averta-SemiboldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Semibold.eot');
+    src: url('./Averta-Semibold.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Semibold.woff2') format('woff2'),
+        url('./Averta-Semibold.woff') format('woff'),
+        url('./Averta-Semibold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Thin.eot');
+    src: url('./Averta-Thin.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Thin.woff2') format('woff2'),
+        url('./Averta-Thin.woff') format('woff'),
+        url('./Averta-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Regular.eot');
+    src: url('./Averta-Regular.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Regular.woff2') format('woff2'),
+        url('./Averta-Regular.woff') format('woff'),
+        url('./Averta-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ThinItalic.eot');
+    src: url('./Averta-ThinItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ThinItalic.woff2') format('woff2'),
+        url('./Averta-ThinItalic.woff') format('woff'),
+        url('./Averta-ThinItalic.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+

src/assets/images/SearchIcon.js

@@ -0,0 +1,24 @@
+const Search = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.5">
+      <circle
+        cx="11.7666"
+        cy="11.7669"
+        r="8.98856"
+        stroke="#202020"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.0183 18.4854L21.5423 22.0002"
+        stroke="#202020"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  </svg>
+);
+
+export default Search;

src/assets/theme/base/colors.js

@@ -21,7 +21,7 @@ Coded by www.creative-tim.com
 
 export default {
   background: {
-    default: '#f0f2f5'
+    default: '#f9f9f9'
   },
 
   text: {
@@ -38,6 +38,10 @@ export default {
     focus: '#ffffff'
   },
 
+  sidenavcolor:{
+    main:'#2d373c'
+  },
+
   black: {
     light: '#000000',
     main: '#000000',
@@ -45,8 +49,8 @@ export default {
   },
 
   primary: {
-    main: '#e91e63',
-    focus: '#e91e63'
+    main: '#007aff',
+    focus: '#007aff'
   },
 
   secondary: {
@@ -60,8 +64,8 @@ export default {
   },
 
   success: {
-    main: '#4CAF50',
-    focus: '#67bb6a'
+    main: '#34C759',
+    focus: '#34C759'
   },
 
   warning: {
@@ -70,8 +74,8 @@ export default {
   },
 
   error: {
-    main: '#F44335',
-    focus: '#f65f53'
+    main: '#FF3B30',
+    focus: '#FF3B30'
   },
 
   light: {
@@ -251,6 +255,7 @@ export default {
     error: '#f44336',
     light: '#adb5bd',
     dark: '#404040'
+    
   },
 
   inputBorderColor: '#d2d6da',

src/assets/theme/base/typography.js

@@ -28,7 +28,7 @@ import pxToRem from 'assets/theme/functions/pxToRem';
 const { dark } = colors;
 
 const baseProperties = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"Averta", "Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,

src/assets/theme/components/button/contained.js

@@ -54,9 +54,10 @@ export default {
   },
 
   large: {
-    minHeight: pxToRem(44),
-    padding: `${pxToRem(12)} ${pxToRem(64)}`,
+    minHeight: pxToRem(43),
+    padding: `${pxToRem(12)} ${pxToRem(70)}`,
     fontSize: size.sm,
+    minWidth:pxToRem(240),
 
     '& .material-icon, .material-icons-round, svg': {
       fontSize: `${pxToRem(22)} !important`

src/assets/theme/components/button/outlined.js

@@ -51,9 +51,10 @@ export default {
   },
 
   large: {
-    minHeight: pxToRem(46),
-    padding: `${pxToRem(12)} ${pxToRem(64)}`,
+    minHeight: pxToRem(43),
+    padding: `${pxToRem(10)} ${pxToRem(70)}`,
     fontSize: size.sm,
+    minWidth:pxToRem(240),
 
     '& .material-icon, .material-icons-round, svg': {
       fontSize: `${pxToRem(22)} !important`

src/assets/theme/components/button/root.js

@@ -15,29 +15,32 @@ Coded by www.creative-tim.com
 
 // Material Dashboard 2 PRO React Base Styles
 import typography from 'assets/theme/base/typography';
-import borders from 'assets/theme/base/borders';
+// import borders from 'assets/theme/base/borders';
 
 // Material Dashboard 2 PRO React Helper Functions
 import pxToRem from 'assets/theme/functions/pxToRem';
 
-const { fontWeightBold, size } = typography;
-const { borderRadius } = borders;
+const { fontWeightRegular, size } = typography;
+// const { borderRadius } = borders;
 
 export default {
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: size.xs,
-  fontWeight: fontWeightBold,
-  borderRadius: borderRadius.lg,
+  fontSize: size.sm,
+  fontWeight: fontWeightRegular,
+  borderRadius: '4px',
   padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`,
-  lineHeight: 1.4,
+  lineHeight: 1.2,
   textAlign: 'center',
   textTransform: 'uppercase',
   userSelect: 'none',
   backgroundSize: '150% !important',
   backgroundPositionX: '25% !important',
   transition: 'all 150ms ease-in',
+  letterSpacing: '0.01em',
+  minWidth:`${pxToRem(105)}`,
+  // boxShadow:'none !important',
 
   '&:disabled': {
     pointerEvent: 'none',

src/assets/theme/components/form/select.js

@@ -17,7 +17,7 @@ Coded by www.creative-tim.com
 import colors from 'assets/theme/base/colors';
 
 // Material Dashboard 2 PRO React helper functions
-import pxToRem from 'assets/theme/functions/pxToRem';
+// import pxToRem from 'assets/theme/functions/pxToRem';
 
 const { transparent } = colors;
 
@@ -26,7 +26,7 @@ export default {
     select: {
       display: 'grid',
       alignItems: 'center',
-      padding: `0 ${pxToRem(12)} !important`,
+      // padding: `0 ${pxToRem(12)} !important`,
 
       '& .Mui-selected': {
         backgroundColor: transparent.main
@@ -41,7 +41,11 @@ export default {
     },
 
     icon: {
-      display: 'none'
+      // display: 'none'
+      width: '2em',
+      height: '2em',
+      top: 'calc(50% - 0.9em)',
+      color: '#000'
     }
   }
 };

src/assets/theme/components/sidenav.js

@@ -15,13 +15,15 @@ Coded by www.creative-tim.com
 
 // Material Dashboard 2 PRO React base styles
 import colors from 'assets/theme/base/colors';
-import borders from 'assets/theme/base/borders';
+// import borders from 'assets/theme/base/borders';
 
 // Material Dashboard 2 PRO React helper functions
 import pxToRem from 'assets/theme/functions/pxToRem';
 
 const { white } = colors;
-const { borderRadius } = borders;
+// const { borderRadius } = borders;
+
+
 
 export default {
   styleOverrides: {
@@ -32,11 +34,11 @@ export default {
     },
 
     paper: {
-      width: pxToRem(250),
+      width: pxToRem(300),
       backgroundColor: white.main,
-      height: `calc(100vh - ${pxToRem(32)})`,
-      margin: pxToRem(16),
-      borderRadius: borderRadius.xl,
+      height: `calc(100vh - ${pxToRem(0)})`,
+      margin: pxToRem(0),
+      borderRadius: 'none',
       border: 'none'
     },
 

src/components/Breadcrumbs/index.js

@@ -75,15 +75,7 @@ function Breadcrumbs({ icon, title, route, light }) {
           {title.replace('-', ' ')}
         </MDTypography>
       </MuiBreadcrumbs>
-      <MDTypography
-        noWrap
-        fontWeight="bold"
-        textTransform="capitalize"
-        variant="h6"
-        color={light ? 'white' : 'dark'}
-      >
-        {title.replace('-', ' ')}
-      </MDTypography>
+
     </MDBox>
   );
 }

src/components/Button/MDButtonRoot.js

@@ -0,0 +1,276 @@
+/* eslint-disable prefer-destructuring */
+/**
+=========================================================
+* Material Dashboard 2 PRO React - v2.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-pro-react
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+export default styled(Button)(({ theme, ownerState }) => {
+  const { palette, functions, borders, boxShadows } = theme;
+  const { color, variant, size, circular, iconOnly, darkMode } = ownerState;
+
+  const { white, text, transparent, gradients, grey } = palette;
+  const { boxShadow, linearGradient, pxToRem, rgba } = functions;
+  const { borderRadius } = borders;
+  const { colored } = boxShadows;
+
+  // styles for the button with variant="contained"
+  const containedStyles = () => {
+    // background color value
+    const backgroundValue = palette[color] ? palette[color].main : white.main;
+
+    // backgroundColor value when button is focused
+    const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus;
+
+    // boxShadow value
+    const boxShadowValue = colored[color]
+      ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
+        [0, 3],
+        [1, -2],
+        palette[color].main,
+        0.2
+      )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
+      : 'none';
+
+    // boxShadow value when button is hovered
+    const hoveredBoxShadowValue = colored[color]
+      ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
+        [0, 4],
+        [23, 0],
+        palette[color].main,
+        0.15
+      )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
+      : 'none';
+
+    // color value
+    let colorValue = white.main;
+
+    if (!darkMode && (color === 'white' || color === 'light' || !palette[color])) {
+      colorValue = text.main;
+    } else if (darkMode && (color === 'white' || color === 'light' || !palette[color])) {
+      colorValue = grey[600];
+    }
+
+    // color value when button is focused
+    let focusedColorValue = white.main;
+
+    if (color === 'white') {
+      focusedColorValue = text.main;
+    } else if (color === 'primary' || color === 'error' || color === 'dark') {
+      focusedColorValue = white.main;
+    }
+
+    return {
+      background: backgroundValue,
+      color: colorValue,
+      boxShadow: boxShadowValue,
+
+      '&:hover': {
+        backgroundColor: backgroundValue,
+        boxShadow: hoveredBoxShadowValue
+      },
+
+      '&:focus:not(:hover)': {
+        backgroundColor: focusedBackgroundValue,
+        boxShadow: palette[color]
+          ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
+          : boxShadow([0, 0], [0, 3.2], white.main, 0.5)
+      },
+
+      '&:disabled': {
+        backgroundColor: backgroundValue,
+        color: focusedColorValue
+      }
+    };
+  };
+
+  // styles for the button with variant="outlined"
+  const outliedStyles = () => {
+    // background color value
+    const backgroundValue = color === 'white' ? rgba(white.main, 0.1) : transparent.main;
+
+    // color value
+    const colorValue = palette[color] ? palette[color].main : white.main;
+
+    // boxShadow value
+    const boxShadowValue = palette[color]
+      ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
+      : boxShadow([0, 0], [0, 3.2], white.main, 0.5);
+
+    // border color value
+    let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75);
+
+    if (color === 'white') {
+      borderColorValue = rgba(white.main, 0.75);
+    }
+
+    return {
+      background: backgroundValue,
+      color: colorValue,
+      borderColor: borderColorValue,
+
+      '&:hover': {
+        background: transparent.main,
+        borderColor: colorValue
+      },
+
+      '&:focus:not(:hover)': {
+        background: transparent.main,
+        boxShadow: boxShadowValue
+      },
+
+      '&:active:not(:hover)': {
+        backgroundColor: colorValue,
+        color: white.main,
+        opacity: 0.85
+      },
+
+      '&:disabled': {
+        color: colorValue,
+        borderColor: colorValue
+      }
+    };
+  };
+
+  // styles for the button with variant="gradient"
+  const gradientStyles = () => {
+    // background value
+    const backgroundValue =
+      color === 'white' || !gradients[color]
+        ? white.main
+        : linearGradient(gradients[color].main, gradients[color].state);
+
+    // boxShadow value
+    const boxShadowValue = colored[color]
+      ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow(
+        [0, 3],
+        [1, -2],
+        palette[color].main,
+        0.2
+      )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
+      : 'none';
+
+    // boxShadow value when button is hovered
+    const hoveredBoxShadowValue = colored[color]
+      ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow(
+        [0, 4],
+        [23, 0],
+        palette[color].main,
+        0.15
+      )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
+      : 'none';
+
+    // color value
+    let colorValue = white.main;
+
+    if (color === 'white') {
+      colorValue = text.main;
+    } else if (color === 'light') {
+      colorValue = gradients.dark.state;
+    }
+
+    return {
+      background: backgroundValue,
+      color: colorValue,
+      boxShadow: boxShadowValue,
+
+      '&:hover': {
+        boxShadow: hoveredBoxShadowValue
+      },
+
+      '&:focus:not(:hover)': {
+        boxShadow: boxShadowValue
+      },
+
+      '&:disabled': {
+        background: backgroundValue,
+        color: colorValue
+      }
+    };
+  };
+
+  // styles for the button with variant="text"
+  const textStyles = () => {
+    // color value
+    const colorValue = palette[color] ? palette[color].main : white.main;
+
+    // color value when button is focused
+    const focusedColorValue = palette[color] ? palette[color].focus : white.focus;
+
+    return {
+      color: colorValue,
+
+      '&:hover': {
+        color: 'focusedColorValue'
+      },
+
+      '&:focus:not(:hover)': {
+        color: focusedColorValue
+      }
+    };
+  };
+
+  // styles for the button with circular={true}
+  const circularStyles = () => ({
+    borderRadius: borderRadius.section
+  });
+
+  // styles for the button with iconOnly={true}
+  const iconOnlyStyles = () => {
+    // width, height, minWidth and minHeight values
+    let sizeValue = pxToRem(38);
+
+    if (size === 'small') {
+      sizeValue = pxToRem(25.4);
+    } else if (size === 'large') {
+      sizeValue = pxToRem(52);
+    }
+
+    // padding value
+    let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`;
+
+    if (size === 'small') {
+      paddingValue = pxToRem(4.5);
+    } else if (size === 'large') {
+      paddingValue = pxToRem(16);
+    }
+
+    return {
+      width: sizeValue,
+      minWidth: sizeValue,
+      height: sizeValue,
+      minHeight: sizeValue,
+      padding: paddingValue,
+
+      '& .material-icons': {
+        marginTop: 0
+      },
+
+      '&:hover, &:focus, &:active': {
+        transform: 'none'
+      }
+    };
+  };
+
+  return {
+    ...(variant === 'contained' && containedStyles()),
+    ...(variant === 'outlined' && outliedStyles()),
+    ...(variant === 'gradient' && gradientStyles()),
+    ...(variant === 'text' && textStyles()),
+    ...(circular && circularStyles()),
+    ...(iconOnly && iconOnlyStyles())
+  };
+});

src/components/Button/index.js

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+
+// prop-types is a library for typechecking of props
+import PropTypes from 'prop-types';
+
+// Custom styles for MDButton
+import MDButtonRoot from 'components/MDButton/MDButtonRoot';
+
+// Material Dashboard 2 PRO React contexts
+import { useMaterialUIController } from 'context';
+
+const MDButton = forwardRef(
+  ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => {
+    const [controller] = useMaterialUIController();
+    const { darkMode } = controller;
+
+    return (
+      <MDButtonRoot
+        {...rest}
+        ref={ref}
+        color="primary"
+        variant={variant === 'gradient' ? 'contained' : variant}
+        size={size}
+        ownerState={{ color, variant, size, circular, iconOnly, darkMode }}
+      >
+        {children}
+      </MDButtonRoot>
+    );
+  }
+);
+
+// Setting default values for the props of MDButton
+MDButton.defaultProps = {
+  size: 'medium',
+  variant: 'contained',
+  color: 'white',
+  circular: false,
+  iconOnly: false
+};
+
+// Typechecking props for the MDButton
+MDButton.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['text', 'contained', 'outlined', 'gradient']),
+  color: PropTypes.oneOf([
+    'white',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'light',
+    'dark'
+  ]),
+  circular: PropTypes.bool,
+  iconOnly: PropTypes.bool,
+  children: PropTypes.node.isRequired
+};
+
+export default MDButton;

src/components/DashboardNavbar/index.js

@@ -14,9 +14,11 @@ Coded by www.creative-tim.com
 */
 
 import { useState, useEffect } from 'react';
+// import Grid from '@mui/material/Grid';
+
 
 // react-router components
-import { useLocation, Link } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 // prop-types is a library for typechecking of props.
 import PropTypes from 'prop-types';
@@ -30,20 +32,23 @@ import Icon from '@mui/material/Icon';
 
 // Material Dashboard 2 PRO React components
 import MDBox from 'components/MDBox';
-import MDInput from 'components/MDInput';
+// import MDInput from 'components/MDInput';
 import MDBadge from 'components/MDBadge';
 
 // Material Dashboard 2 PRO React example components
 import Breadcrumbs from 'components/Breadcrumbs';
 import NotificationItem from 'components/NotificationItem';
 
+// import InputAdornment from '@mui/material/InputAdornment';
+
+
 // Custom styles for DashboardNavbar
 import {
-  navbar,
-  navbarContainer,
+  // navbar,
+  // navbarContainer,
   navbarRow,
   navbarIconButton,
-  navbarDesktopMenu,
+  // navbarDesktopMenu,
   navbarMobileMenu
 } from 'components/Navbars/DashboardNavbar/styles';
 
@@ -54,6 +59,11 @@ import {
   setMiniSidenav,
   setOpenConfigurator
 } from 'context';
+import SearchBar from 'components/SearchBar';
+import { Box } from '@mui/material';
+
+
+
 
 function DashboardNavbar({ absolute, light, isMini }) {
   const [navbarType, setNavbarType] = useState();
@@ -61,6 +71,7 @@ function DashboardNavbar({ absolute, light, isMini }) {
   const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
   const [openMenu, setOpenMenu] = useState(false);
   const route = useLocation().pathname.split('/').slice(1);
+  
 
   useEffect(() => {
     // Setting the navbar type
@@ -72,7 +83,7 @@ function DashboardNavbar({ absolute, light, isMini }) {
 
     // A function that sets the transparent state of the navbar.
     function handleTransparentNavbar() {
-      setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
+      setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) && !fixedNavbar);
     }
 
     /** 
@@ -124,71 +135,75 @@ function DashboardNavbar({ absolute, light, isMini }) {
       return colorValue;
     }
   });
-
+  
   return (
     <AppBar
       position={absolute ? 'absolute' : navbarType}
+      top={top ? '0' : navbarType}
       color="inherit"
-      sx={(theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode })}
+      className="header"
+      // sx={(theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode })}
     >
-      <Toolbar sx={(theme) => navbarContainer(theme)}>
-        <MDBox color="inherit" mb={{ xs: 1, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
-          <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
-          <IconButton disableRipple sx={navbarDesktopMenu} size="small" onClick={handleMiniSidenav}>
-            <Icon fontSize="medium" sx={iconsStyle}>
-              {miniSidenav ? 'menu_open' : 'menu'}
-            </Icon>
-          </IconButton>
-        </MDBox>
-        {isMini ? null : (
-          <MDBox sx={(theme) => navbarRow(theme, { isMini })}>
-            <MDBox pr={1}>
-              <MDInput label="Search here" />
-            </MDBox>
-            <MDBox color={light ? 'white' : 'inherit'}>
-              <Link to="/authentication/sign-in/basic">
-                <IconButton disableRipple sx={navbarIconButton} size="small">
-                  <Icon sx={iconsStyle}>account_circle</Icon>
+      <Box 
+        sx={{
+          paddingTop: '8px',
+          paddingBottom: '8px',
+          marginBottom: '5px',
+          boxShadow: '0px 1px 4px rgb(0 0 0 / 8%)',
+          width: '100% !important'
+        }}>
+        <Toolbar className="custom-header" >
+          {isMini ? null : (
+          
+            <MDBox display="flex" width="100% !important" max-width="100% !important">
+              <MDBox sx={{ width:'100%',  maxWidth: '100%' }} pr={3}>
+                <SearchBar />
+              </MDBox>
+              <MDBox display="flex" color={light ? 'white' : 'inherit'}>
+                <IconButton
+                  disableRipple
+                  size="small"
+                  color="inherit"
+                  sx={navbarMobileMenu}
+                  onClick={handleMiniSidenav}
+                >
+                  <Icon sx={iconsStyle} fontSize="medium">
+                    {miniSidenav ? 'menu_open' : 'menu'}
+                  </Icon>
                 </IconButton>
-              </Link>
-              <IconButton
-                disableRipple
-                size="small"
-                color="inherit"
-                sx={navbarMobileMenu}
-                onClick={handleMiniSidenav}
-              >
-                <Icon sx={iconsStyle} fontSize="medium">
-                  {miniSidenav ? 'menu_open' : 'menu'}
-                </Icon>
-              </IconButton>
-              <IconButton
-                disableRipple
-                size="small"
-                color="inherit"
-                sx={navbarIconButton}
-                onClick={handleConfiguratorOpen}
-              >
-                <Icon sx={iconsStyle}>settings</Icon>
-              </IconButton>
-              <IconButton
-                disableRipple
-                size="small"
-                color="inherit"
-                sx={navbarIconButton}
-                aria-controls="notification-menu"
-                aria-haspopup="true"
-                variant="contained"
-                onClick={handleOpenMenu}
-              >
-                <MDBadge circular badgeContent={9} color="error" size="xs">
-                  <Icon sx={iconsStyle}>notifications</Icon>
-                </MDBadge>
-              </IconButton>
-              {renderMenu()}
+                <IconButton
+                  disableRipple
+                  size="small"
+                  color="inherit"
+                  sx={navbarIconButton}
+                  onClick={handleConfiguratorOpen}
+                >
+                  <Icon sx={iconsStyle}>settings</Icon>
+                </IconButton>
+                <IconButton
+                  disableRipple
+                  size="small"
+                  color="inherit"
+                  sx={navbarIconButton}
+                  aria-controls="notification-menu"
+                  aria-haspopup="true"
+                  variant="contained"
+                  onClick={handleOpenMenu}
+                >
+                  <MDBadge circular badgeContent={9} color="error" size="xs">
+                    <Icon sx={iconsStyle}>notifications</Icon>
+                  </MDBadge>
+                </IconButton>
+                {renderMenu()}
+              </MDBox>
             </MDBox>
-          </MDBox>
-        )}
+          )}
+        </Toolbar>
+      </Box> 
+      <Toolbar variant='dense'>
+        <MDBox color="inherit" mb={{ xs: 2, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
+          <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
+        </MDBox>
       </Toolbar>
     </AppBar>
   );
@@ -206,6 +221,7 @@ DashboardNavbar.propTypes = {
   absolute: PropTypes.bool,
   light: PropTypes.bool,
   isMini: PropTypes.bool
+  
 };
 
 export default DashboardNavbar;

src/components/Dropdown/index.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+// import InputLabel from '@mui/material/InputLabel'
+import OutlinedInput from '@mui/material/OutlinedInput';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
+export default function Dropdown() {
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event) => {
+    const {
+      target: { value }
+    } = event;
+    setAge(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value
+    );
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <FormControl sx={{ width: '100%' }}>
+        {/* <InputLabel id="demo-simple-select-label">Equipment</InputLabel> */}
+        <Select
+          displayEmpty
+          input={<OutlinedInput />}
+          value={age}
+          renderValue={(selected) => {
+            if (selected.length === 0) {
+              return <span>Placeholder</span>;
+            }
+
+            return selected;
+          }}
+          inputProps={{ 'aria-label': 'Without label' }}
+          onChange={handleChange}
+        >
+          <MenuItem disabled value="">
+            {' '}
+            <span>Placeholder</span>{' '}
+          </MenuItem>
+          <MenuItem value={'Ten'}>Ten</MenuItem>
+          <MenuItem value={'Twenty'}>Twenty</MenuItem>
+          <MenuItem value={'Thirty'}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

src/components/SearchBar/index.js

@@ -0,0 +1,24 @@
+import { TextField, InputAdornment, SvgIcon } from '@mui/material';
+import Search from 'assets/images/SearchIcon';
+
+function SearchBar() {
+  return (
+    <>
+      <TextField
+        fullWidth
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SvgIcon fontSize="small" color="action">
+                <Search />
+              </SvgIcon>
+            </InputAdornment>
+          )
+        }}
+        placeholder="Search"
+        variant="outlined"
+      />
+    </>
+  );
+}
+export default SearchBar;

src/components/Sidenav/SidenavItem.js

@@ -56,7 +56,7 @@ function SidenavItem({ color, name, active, nested, children, open, ...rest }) {
             })
           }
         >
-          <ListItemText primary={name} />
+          <ListItemText primary={name}  />
           {children && (
             <Icon
               component="i"

src/components/Sidenav/SidenavList.js

@@ -23,8 +23,9 @@ function SidenavList({ children }) {
   return (
     <List
       sx={{
-        px: 2,
-        my: 0.3
+        px: 0,
+        my: 0.3,
+        borderRadius: 'none'
       }}
     >
       {children}

src/components/Sidenav/SidenavRoot.js

@@ -21,20 +21,21 @@ export default styled(Drawer)(({ theme, ownerState }) => {
   const { palette, boxShadows, transitions, breakpoints, functions } = theme;
   const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState;
 
-  const sidebarWidth = 250;
-  const { transparent, gradients, white, background } = palette;
+  const sidebarWidth = 280;
+  const { transparent, sidenavcolor, white, background } = palette;
   const { xxl } = boxShadows;
-  const { pxToRem, linearGradient } = functions;
+  const { pxToRem } = functions;
 
   let backgroundValue = darkMode
     ? background.sidenav
-    : linearGradient(gradients.dark.main, gradients.dark.state);
+    : sidenavcolor.main;
 
   if (transparentSidenav) {
     backgroundValue = transparent.main;
   } else if (whiteSidenav) {
     backgroundValue = white.main;
   }
+  
 
   // styles for the sidenav when miniSidenav={false}
   const drawerOpenStyles = () => ({
@@ -71,7 +72,7 @@ export default styled(Drawer)(({ theme, ownerState }) => {
       boxShadow: transparentSidenav ? 'none' : xxl,
       marginBottom: transparentSidenav ? 0 : 'inherit',
       left: '0',
-      width: pxToRem(96),
+      width: pxToRem(65),
       overflowX: 'hidden',
       transform: 'translateX(0)',
       transition: transitions.create(['width', 'background-color'], {

src/components/Sidenav/index.js

@@ -48,7 +48,7 @@ import {
   setWhiteSidenav
 } from 'context';
 
-function Sidenav({ color, brand, brandName, routes, ...rest }) {
+function Sidenav({ color, brandName, routes, ...rest }) {
   const [openCollapse, setOpenCollapse] = useState(false);
   const [openNestedCollapse, setOpenNestedCollapse] = useState(false);
   const [controller, dispatch] = useMaterialUIController();
@@ -59,6 +59,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
   const items = pathname.split('/').slice(1);
   const itemParentName = items[1];
   const itemName = items[items.length - 1];
+  
 
   let textColor = 'white';
 
@@ -231,7 +232,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
       variant="permanent"
       ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }}
     >
-      <MDBox pt={3} pb={1} px={4} textAlign="center">
+      <MDBox pt={3} pb={3} px={2} textAlign="center">
         <MDBox
           display={{ xs: 'block', xl: 'none' }}
           position="absolute"
@@ -246,23 +247,22 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
           </MDTypography>
         </MDBox>
         <MDBox component={NavLink} to="/" display="flex" alignItems="center">
-          {brand && <MDBox component="img" src={brand} alt="Brand" width="2rem" />}
           <MDBox
             width={!brandName && '100%'}
             sx={(theme) => sidenavLogoLabel(theme, { miniSidenav })}
           >
-            <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
+            <MDTypography fontSize="2rem"  component="h1" variant="button" fontWeight="bold"  color={textColor}>
               {brandName}
             </MDTypography>
           </MDBox>
         </MDBox>
       </MDBox>
-      <Divider
+      {/* <Divider
         light={
           (!darkMode && !whiteSidenav && !transparentSidenav) ||
           (darkMode && !transparentSidenav && whiteSidenav)
         }
-      />
+      /> */}
       <List>{renderRoutes}</List>
     </SidenavRoot>
   );

src/components/Sidenav/styles/sidenavCollapse.js

@@ -13,12 +13,12 @@ Coded by www.creative-tim.com
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 */
 function collapseItem(theme, ownerState) {
-  const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme;
+  const { palette, transitions, breakpoints, boxShadows, functions } = theme;
   const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
 
   const { white, transparent, dark, grey } = palette;
   const { md } = boxShadows;
-  const { borderRadius } = borders;
+  // const { borderRadius } = borders;
   const { pxToRem, rgba } = functions;
 
   return {
@@ -41,9 +41,9 @@ function collapseItem(theme, ownerState) {
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    padding: `${pxToRem(8)} ${pxToRem(16)}`,
-    margin: `${pxToRem(1.5)} ${pxToRem(16)}`,
-    borderRadius: borderRadius.md,
+    padding: `${pxToRem(1.6)} ${pxToRem(14)}`,
+    margin: `${pxToRem(1.5)} ${pxToRem(0)}`,
+    borderRadius:'none',
     cursor: 'pointer',
     userSelect: 'none',
     whiteSpace: 'nowrap',
@@ -96,9 +96,9 @@ const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({
 
 function collapseText(theme, ownerState) {
   const { typography, transitions, breakpoints, functions } = theme;
-  const { miniSidenav, transparentSidenav, active } = ownerState;
+  const { miniSidenav, transparentSidenav } = ownerState;
 
-  const { size, fontWeightRegular, fontWeightLight } = typography;
+  const { size, fontWeightRegular } = typography;
   const { pxToRem } = functions;
 
   return {
@@ -115,7 +115,7 @@ function collapseText(theme, ownerState) {
     },
 
     '& span': {
-      fontWeight: active ? fontWeightRegular : fontWeightLight,
+      fontWeight: fontWeightRegular,
       fontSize: size.sm,
       lineHeight: 0
     }

src/components/Sidenav/styles/sidenavItem.js

@@ -15,19 +15,19 @@ Coded by www.creative-tim.com
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 */
 function item(theme, ownerState) {
-  const { palette, borders, functions, transitions } = theme;
+  const { palette, functions, transitions } = theme;
   const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState;
 
   const { transparent, white, grey } = palette;
-  const { borderRadius } = borders;
+  // const { borderRadius } = borders;
   const { rgba } = functions;
 
   return {
-    pl: 3,
+    pl: 4.5,
     mt: 0.375,
     mb: 0.3,
     width: '100%',
-    borderRadius: borderRadius.md,
+    borderRadius: 'none',
     cursor: 'pointer',
     backgroundColor: () => {
       let backgroundValue = transparent.main;
@@ -73,8 +73,8 @@ function itemContent(theme, ownerState) {
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    padding: `${pxToRem(12)} ${pxToRem(16)}`,
-    marginLeft: pxToRem(18),
+    padding: `${pxToRem(7)} ${pxToRem(0)}`,
+    marginLeft: pxToRem(20),
     userSelect: 'none',
     position: 'relative',
 
@@ -104,9 +104,9 @@ function itemContent(theme, ownerState) {
       position: 'absolute',
       top: '50%',
       transform: 'translateY(-50%)',
-      left: pxToRem(-15),
+      left: pxToRem(-25),
       opacity: 1,
-      borderRadius: '50%',
+      borderRadius: 'none',
       fontSize: size.sm
     }
   };

src/layouts/DashboardLayout/index.js

@@ -39,11 +39,11 @@ function DashboardLayout({ children }) {
   return (
     <MDBox
       sx={({ breakpoints, transitions, functions: { pxToRem } }) => ({
-        p: 3,
+        p: 0,
         position: 'relative',
 
         [breakpoints.up('xl')]: {
-          marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
+          marginLeft: miniSidenav ? pxToRem(65) : pxToRem(280),
           transition: transitions.create(['margin-left', 'margin-right'], {
             easing: transitions.easing.easeInOut,
             duration: transitions.duration.standard

src/pages/dashboard/index.js

@@ -12,7 +12,7 @@ function DashboardScreen() {
   return (
     <DashboardLayout>
       <DashboardNavbar />
-      <MDBox py={3}>
+      <MDBox px={2} py={3}>
         <h1>Hello Dashboard</h1>
         <button onClick={handleLogout}>Logout</button>
       </MDBox>
@@ -20,5 +20,4 @@ function DashboardScreen() {
     </DashboardLayout>
   );
 }
-
 export default DashboardScreen;

src/routes/index.js

@@ -40,13 +40,13 @@ import DashboardScreen from 'pages/dashboard';
 import LoginScreen from 'pages/authentication';
 
 // Material Dashboard 2 PRO React components
-import MDAvatar from 'components/MDAvatar';
+// import MDAvatar from 'components/MDAvatar';
 
 // @mui icons
 import Icon from '@mui/material/Icon';
 
 // Images
-import profilePicture from 'assets/images/team-3.jpg';
+// import profilePicture from 'assets/images/team-3.jpg';
 
 const routes = [
   {
@@ -58,25 +58,25 @@ const routes = [
 ];
 
 const protectedRoutes = [
+  // {
+  //   type: 'collapse',
+  //   name: 'Brooklyn Alice',
+  //   key: 'brooklyn-alice',
+  //   icon: <MDAvatar src={profilePicture} alt="Brooklyn Alice" size="sm" />,
+  //   collapse: [
+  //     {
+  //       name: 'Logout',
+  //       key: 'logout',
+  //       route: '/authentication/sign-in/basic',
+  //       component: <LoginScreen />
+  //     }
+  //   ]
+  // },
+  // { type: 'divider', key: 'divider-0' },
   {
     type: 'collapse',
-    name: 'Brooklyn Alice',
-    key: 'brooklyn-alice',
-    icon: <MDAvatar src={profilePicture} alt="Brooklyn Alice" size="sm" />,
-    collapse: [
-      {
-        name: 'Logout',
-        key: 'logout',
-        route: '/authentication/sign-in/basic',
-        component: <LoginScreen />
-      }
-    ]
-  },
-  { type: 'divider', key: 'divider-0' },
-  {
-    type: 'collapse',
-    name: 'Dashboards',
-    key: 'dashboards',
+    name: 'Home',
+    key: 'Home',
     icon: <Icon fontSize="medium">dashboard</Icon>,
     collapse: [
       {
@@ -86,17 +86,17 @@ const protectedRoutes = [
         component: <DashboardScreen />
       }
     ]
-  },
-  { type: 'title', title: 'Pages', key: 'title-pages' },
-  {
-    type: 'collapse',
-    name: 'Change Log',
-    key: 'changelog',
-    href: 'https://github.com/creativetimofficial/ct-material-dashboard/-pro-material-ui/blob/main/CHANGELOG.md',
-    icon: <Icon fontSize="medium">receipt_long</Icon>,
-    noCollapse: true,
-    layout: '/app'
   }
+  // { type: 'title', title: 'Pages', key: 'title-pages' },
+  // {
+  //   type: 'collapse',
+  //   name: 'Change Log',
+  //   key: 'changelog',
+  //   href: 'https://github.com/creativetimofficial/ct-material-dashboard/-pro-material-ui/blob/main/CHANGELOG.md',
+  //   icon: <Icon fontSize="medium">receipt_long</Icon>,
+  //   noCollapse: true,
+  //   layout: '/app'
+  // }
 ];
 
 export { routes, protectedRoutes };