Merge pull request #489 from ImanMahmoudinasab/feat/migrate-landing-p…

…age-to-mui

feat: migrate landing page to MUI

.gitignore

@@ -70,3 +70,6 @@ credentials
 # Minio
 /data
 example/data
+
+# OS files
+.DS_Store

packages/dashboard/package.json

@@ -29,14 +29,14 @@
     "@apollo/client": "^3.3.11",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.5",
     "@mui/lab": "5.0.0-alpha.53",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
     "@mui/x-data-grid": "^5.0.0-beta.6",
     "@popperjs/core": "^2.4.0",
     "@sorry-cypress/common": "1.0.0",
-    "bold-ui": "^1.0.0-beta.40",
     "date-fns": "^2.21.3",
     "dotenv": "^8.2.0",
     "ejs": "^2.7.1",
@@ -90,7 +90,9 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "style-loader": "^1.0.0",
+    "svg-url-loader": "^7.1.1",
     "typescript": "^4.1.5",
+    "url-loader": "^4.1.1",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.3",
     "webpack-dev-middleware": "^3.7.2",

packages/dashboard/src/components/common/textFieldLabel.tsx

@@ -26,15 +26,8 @@ export const InputFieldLabel = (
     </Tooltip>
   );
   return (
-    <FormControl
-      fullWidth
-      required={required}
-      style={{ marginBottom: '1.5rem' }}
-    >
-      <FormLabel
-        htmlFor={htmlFor}
-        sx={{ display: 'flex', marginBottom: '0.5rem' }}
-      >
+    <FormControl fullWidth required={required} sx={{ mb: 1.5 }}>
+      <FormLabel htmlFor={htmlFor} sx={{ display: 'flex', marginBottom: 0.5 }}>
         {Help}
         <span>{label}</span>
       </FormLabel>

packages/dashboard/src/components/layout/header.tsx

@@ -13,17 +13,13 @@ import {
 } from '@mui/icons-material';
 import {
   Breadcrumbs,
-  FormControlLabel,
-  FormGroup,
   IconButton,
   Link,
   styled,
-  Switch,
   Toolbar,
   Tooltip,
 } from '@mui/material';
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
-import { useAutoRefresh } from '@sorry-cypress/dashboard/hooks';
 import {
   NavItemType,
   navStructure,
@@ -75,7 +71,6 @@ export const Header: HeaderComponent = ({ open, onMenuClick }) => {
   const lastNavItem = nav.length > 1 ? last(nav) : nav?.[0];
   const LastItemIcon =
     lastNavItem && !isNil(lastNavItem.type) && ICONS[lastNavItem.type];
-  const [shouldAutoRefresh, setShouldAutoRefresh] = useAutoRefresh();
 
   return (
     <AppBar position="fixed" open={open}>
@@ -169,29 +164,6 @@ export const Header: HeaderComponent = ({ open, onMenuClick }) => {
             </Tooltip>
           )}
         </Breadcrumbs>
-        <FormGroup>
-          <Tooltip
-            title="Toggle polling for updates
-          "
-          >
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={!!shouldAutoRefresh}
-                  onChange={() => {
-                    setShouldAutoRefresh(!shouldAutoRefresh);
-                    window.location.reload();
-                  }}
-                  inputProps={{ 'aria-label': 'Auto Refresh' }}
-                />
-              }
-              sx={{
-                color: 'text.primary',
-              }}
-              label="Auto Refresh"
-            />
-          </Tooltip>
-        </FormGroup>
       </Toolbar>
     </AppBar>
   );

packages/dashboard/src/components/layout/layout.tsx

@@ -1,7 +1,6 @@
 import { Box, Container, Toolbar, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useLocalStorage } from '@sorry-cypress/dashboard/hooks';
-import { WithMaterial } from '@sorry-cypress/dashboard/lib/material';
 import React, { PropsWithChildren } from 'react';
 import { Header } from './header';
 import { Sidebar } from './sidebar';
@@ -23,10 +22,8 @@ export const Layout = ({ children }: PropsWithChildren<any>) => {
     <Box
       sx={{ display: 'flex', minHeight: '100vh', backgroundColor: '#E8E8EC' }}
     >
-      <WithMaterial>
-        <Sidebar open={open} onToggleSidebar={toggleSidebar} />
-        <Header open={open} onMenuClick={toggleSidebar} />
-      </WithMaterial>
+      <Sidebar open={open} onToggleSidebar={toggleSidebar} />
+      <Header open={open} onMenuClick={toggleSidebar} />
       <Container
         maxWidth="xl"
         component="main"
@@ -37,9 +34,7 @@ export const Layout = ({ children }: PropsWithChildren<any>) => {
           width: 'auto',
         }}
       >
-        <WithMaterial>
-          <Toolbar />
-        </WithMaterial>
+        <Toolbar />
         {children}
       </Container>
     </Box>

packages/dashboard/src/components/layout/sidebar.tsx

@@ -42,6 +42,7 @@ import {
   NavItemType,
   navStructure,
 } from '@sorry-cypress/dashboard/lib/navigation';
+import logoDark from '@sorry-cypress/dashboard/resources/logo-dark.svg';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { version } from '../../../package.json';
@@ -67,7 +68,6 @@ const sidebarTheme = createTheme({
   typography: {
     fontWeightBold: 700,
     fontWeightMedium: 500,
-    fontFamily: 'IBM Plex Sans',
     fontWeightRegular: 400,
   },
 });
@@ -338,14 +338,14 @@ export const Sidebar: SidebarType = ({ open, onToggleSidebar }) => {
           component="div"
           sx={{
             justifyContent: 'center',
-            maxWidth: 300,
+            maxWidth: 275,
           }}
         >
           <ListItemAvatar sx={{ minWidth: '42px' }}>
             <RouterLink to="/">
               <Avatar
                 alt="Sorry Cypress Dashboard Home"
-                src={`https://gblobscdn.gitbook.com/spaces%2F-MS6gDAYECuzpKjjzrdc%2Favatar-1611996755562.png?alt=media`}
+                src={logoDark}
                 variant="square"
                 sx={{
                   transition: 'all 0.3s',