Feat/wms 51 (#44)

* Added: icons
* Updated: routes
* Updated: Tilebasic component
* Updated: homepage component and styling
* Updated: Setup page styles and component
* Updated: Labelling home styles and components
* Fixed: missing footer
* Updated: reorder routes
* Fixed: tiles width for many items
* Fixed: warehouse missing path
* Fixed: setup screen icon sizes

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>

src/components/TileBasic/index.js

@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import MDBox from 'components/MDBox';
 import { makeStyles } from '@mui/styles';
 import { Grid } from '@mui/material';
+import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles({
+  iconSize: {
+    width: '50%',
+    height: '50%',
+    marginBottom: '10px'
+  },
+  margin: {
+    marginBottom: '20px'
+  },
   centerContent: {
     display: 'flex',
     alignItems: 'center',
@@ -14,13 +23,19 @@ const useStyles = makeStyles({
     boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.05)',
     borderRadius: '8px',
     marginBottom: '20px',
+    cursor: 'pointer !important',
+    '& svg': {
+      '&path': {
+        stroke: '#007AFF !important'
+      }
+    },
     '&:hover': {
       backgroundColor: '#007AFF',
       cursor: 'default',
       color: 'white',
       '& svg': {
         '& path': {
-          fill: '#fff'
+          stroke: '#fff'
         }
       }
     }
@@ -31,28 +46,31 @@ export default function TileBasic({ tiles }) {
   const classes = useStyles();
   return (
     <>
-      <Grid container spacing={2}>
-        {tiles &&
-          tiles.map((tile) => (
+      <MDBox px={2} py={3}>
+        <Grid container spacing={2}>
+          {tiles.map((items) => (
             <>
-              <Grid item xs={12} sm={6} md={tiles.length <= 4 ? undefined : 4}>
-                <MDBox
-                  key={tile.name + tile.path}
-                  data={{ name: tile.name, path: tile.path }}
-                  className={classes.centerContent}
-                  sx={{
-                    height: 200,
-                    backgroundColor: ({ palette: { white } }) => white.main,
-                    padding: '32px 40px'
-                  }}
-                >
-                  {tile.icon}
-                  {tile.name}
-                </MDBox>
+              <Grid item xs={12} sm={6} md={tiles.length > 4 ? 4 : 6}>
+                <Link to={items.path}>
+                  <MDBox
+                    key={items.name + items.path}
+                    data={{ name: items.name, path: items.path }}
+                    className={classes.centerContent}
+                    sx={{
+                      height: 230,
+                      backgroundColor: ({ palette: { white } }) => white.main,
+                      padding: '32px 40px'
+                    }}
+                  >
+                    {items.icon}
+                    {items.name}
+                  </MDBox>
+                </Link>
               </Grid>
             </>
           ))}
-      </Grid>
+        </Grid>
+      </MDBox>
     </>
   );
 }