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>

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'
     },