feat: update theme

packages/web/src/components/AppBar/index.tsx

@@ -4,10 +4,10 @@ import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import MenuIcon from '@mui/icons-material/Menu';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 import HideOnScroll from 'components/HideOnScroll';
 import { FormattedMessage } from 'react-intl';
-import SearchInput from 'components/SearchInput';
 
 type AppBarProps = {
   onMenuClick: () => void;
@@ -17,11 +17,7 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
   return (
     <Box sx={{ flexGrow: 1 }}>
       <HideOnScroll>
-        <MuiAppBar
+        <MuiAppBar>
-          sx={{
-            background: (theme) => theme.palette.primary.dark,
-            zIndex: (theme) => theme.zIndex.drawer + 1
-          }}>
           <Toolbar>
             <IconButton
               size="large"
@@ -31,7 +27,6 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
               onClick={onMenuClick}
               sx={{ mr: 2 }}
             >
-              {/* TODO: make Drawer in Layout togglable. */}
               <MenuIcon />
             </IconButton>
 
@@ -44,7 +39,14 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
               <FormattedMessage id="brandText" />
             </Typography>
 
-            <SearchInput />
+            <IconButton
+              size="large"
+              edge="start"
+              color="inherit"
+              aria-label="open settings"
+            >
+              <SettingsIcon />
+            </IconButton>
           </Toolbar>
         </MuiAppBar>
       </HideOnScroll>

packages/web/src/components/AppRow/index.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
 import useFormatMessage from 'hooks/useFormatMessage';
 import AppIcon from 'components/AppIcon';
@@ -14,7 +14,14 @@ type AppRowProps = {
   application: App;
 }
 
-const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><br /></>);
+const countTranslation = (value: React.ReactNode) => (
+  <>
+    <Typography variant="body1">
+      {value}
+    </Typography>
+    <br />
+  </>
+);
 
 function AppRow(props: AppRowProps) {
   const formatMessage = useFormatMessage();
@@ -36,19 +43,19 @@ function AppRow(props: AppRowProps) {
             </Box>
 
             <Box sx={{ px: 2 }}>
-              <Typography variant="body2">
+              <Typography variant="caption" color="textSecondary">
                 {formatMessage('app.connectionCount', { count: countTranslation(connectionCount) })}
               </Typography>
             </Box>
 
             <Box sx={{ px: 2 }}>
-              <Typography variant="body2">
+              <Typography variant="caption" color="textSecondary">
                 {formatMessage('app.flowCount', { count: countTranslation(0) })}
               </Typography>
             </Box>
 
             <Box>
-              <ChevronRightIcon />
+              <ArrowForwardIosIcon sx={{ color: (theme) => theme.palette.primary.main }} />
             </Box>
           </CardContent>
         </CardActionArea>

packages/web/src/components/Drawer/index.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { DrawerProps } from '@mui/material/Drawer';
+import { useTheme } from '@mui/material/styles';
+import { SwipeableDrawerProps } from '@mui/material/SwipeableDrawer';
 import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import AppsIcon from '@mui/icons-material/Apps';
-import LanguageIcon from '@mui/icons-material/Language';
+import SwapCallsIcon from '@mui/icons-material/SwapCalls';
-import OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
+import ExploreIcon from '@mui/icons-material/Explore';
-
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import ListItemLink from 'components/ListItemLink';
 import HideOnScroll from 'components/HideOnScroll';
@@ -14,14 +15,19 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import { Drawer as BaseDrawer } from './style';
 
+const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
 
-export default function Drawer(props: DrawerProps) {
+export default function Drawer(props: SwipeableDrawerProps) {
+  const theme = useTheme();
+  const matchesSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
   const formatMessage = useFormatMessage();
 
   return (
     <BaseDrawer
       {...props}
-      variant="permanent"
+      disableBackdropTransition={!iOS}
+      disableDiscovery={iOS}
+      variant={matchesSmallScreens ? 'temporary' : 'permanent'}
     >
       <HideOnScroll unmountOnExit>
         <Toolbar />
@@ -29,19 +35,19 @@ export default function Drawer(props: DrawerProps) {
 
       <List>
         <ListItemLink
-          icon={<OfflineBoltIcon />}
+          icon={<SwapCallsIcon htmlColor={theme.palette.primary.dark} />}
           primary={formatMessage('drawer.flows')}
           to={URLS.FLOWS}
         />
 
         <ListItemLink
-          icon={<AppsIcon />}
+          icon={<AppsIcon htmlColor={theme.palette.primary.dark} />}
           primary={formatMessage('drawer.apps')}
           to={URLS.APPS}
         />
 
         <ListItemLink
-          icon={<LanguageIcon />}
+          icon={<ExploreIcon htmlColor={theme.palette.primary.dark} />}
           primary={formatMessage('drawer.explore')}
           to={URLS.EXPLORE}
         />

packages/web/src/components/Drawer/style.ts

@@ -1,7 +1,7 @@
 import { styled, Theme, CSSObject } from '@mui/material/styles';
-import MuiDrawer from '@mui/material/Drawer';
+import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer';
 
-const drawerWidth = 240;
+const drawerWidth = 300;
 
 const openedMixin = (theme: Theme): CSSObject => ({
   width: drawerWidth,
@@ -18,13 +18,13 @@ const closedMixin = (theme: Theme): CSSObject => ({
     duration: theme.transitions.duration.leavingScreen,
   }),
   overflowX: 'hidden',
-  width: `calc(${theme.spacing(7)} + 1px)`,
+  width: 0,
   [theme.breakpoints.up('sm')]: {
     width: `calc(${theme.spacing(9)} + 1px)`,
   },
 });
 
-export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+export const Drawer = styled(MuiSwipeableDrawer)(
   ({ theme, open }) => ({
     width: drawerWidth,
     flexShrink: 0,

packages/web/src/components/Layout/index.tsx

@@ -17,7 +17,11 @@ export default function Layout({ children }: LayoutProps) {
       <AppBar onMenuClick={onMenuClick} />
 
       <Box sx={{ display: 'flex', }}>
-        <Drawer open={isDrawerOpen} />
+        <Drawer
+          open={isDrawerOpen}
+          onOpen={onMenuClick}
+          onClose={onMenuClick}
+        />
 
         <Box sx={{ flex: 1 }}>
           <Toolbar />

packages/web/src/components/ListItemLink/index.tsx

@@ -26,9 +26,9 @@ export default function ListItemLink(props: ListItemLinkProps) {
 
   return (
     <li>
-      <ListItem button component={CustomLink}>
+      <ListItem button component={CustomLink} sx={{ pl: { xs: 2, sm: 3 } }}>
         <ListItemIcon>{icon}</ListItemIcon>
-        <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body2' }} />
+        <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1' }} />
       </ListItem>
     </li>
   );

packages/web/src/locales/en.json

@@ -1,5 +1,5 @@
 {
-  "brandText": "automatisch",
+  "brandText": "Automatisch",
   "searchPlaceholder": "Search...",
   "welcomeText": "Here comes the dashboard homepage.",
   "drawer.dashboard": "Dashboard",

packages/web/src/styles/theme.ts

@@ -1,6 +1,13 @@
 import { createTheme } from '@mui/material/styles';
 
-const theme = createTheme();
+const referenceTheme = createTheme({
+  palette: {
+    primary: {
+      main: '#0059F7',
+      dark: '#001F52',
+    }
+  }
+});
 
 const extendedTheme = createTheme({
   palette: {
@@ -10,7 +17,7 @@ const extendedTheme = createTheme({
       dark: '#001F52',
       contrastText: '#fff'
     },
-    divider: '#0000001F',
+    divider: 'rgba(194, 194, 194, .2)',
     common: {
       black: '#1D1D1D',
       white: '#fff'
@@ -52,9 +59,12 @@ const extendedTheme = createTheme({
     },
     background: {
       paper: '#fff',
-      default: '#F3F7FD'
+      default: '#FAFAFA'
     }
   },
+  shape: {
+    borderRadius: 4,
+  },
   typography: {
     fontFamily: [
       'Inter',
@@ -65,75 +75,138 @@ const extendedTheme = createTheme({
       'sans-serif',
     ].join(','),
     h1: {
-      fontSize: theme.typography.pxToRem(72),
+      fontSize: referenceTheme.typography.pxToRem(72),
       lineHeight: 1.11,
       fontWeight: 700,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(48),
+      }
     },
     h2: {
-      fontSize: theme.typography.pxToRem(48),
+      fontSize: referenceTheme.typography.pxToRem(48),
       lineHeight: 1.16,
       fontWeight: 700,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(24),
+      }
     },
     h3: {
-      fontSize: theme.typography.pxToRem(32),
+      fontSize: referenceTheme.typography.pxToRem(32),
       lineHeight: 1.16,
       fontWeight: 700,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(24),
+      }
     },
     h4: {
-      fontSize: theme.typography.pxToRem(24),
+      fontSize: referenceTheme.typography.pxToRem(32),
       lineHeight: 1.3,
       fontWeight: 700,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(16),
+      }
     },
     h5: {
-      fontSize: theme.typography.pxToRem(24),
+      fontSize: referenceTheme.typography.pxToRem(24),
       lineHeight: 1.3,
       fontWeight: 400,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(16),
+      }
     },
     h6: {
-      fontSize: theme.typography.pxToRem(20),
+      fontSize: referenceTheme.typography.pxToRem(20),
       lineHeight: 1.2,
       fontWeight: 500,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(20),
+      }
     },
     subtitle1: {
-      fontSize: theme.typography.pxToRem(14),
+      fontSize: referenceTheme.typography.pxToRem(14),
       lineHeight: 1.71,
       fontWeight: 400,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(14),
+      },
       textTransform: 'uppercase',
     },
     subtitle2: {
-      fontSize: theme.typography.pxToRem(14),
+      fontSize: referenceTheme.typography.pxToRem(14),
       lineHeight: 1.14,
       fontWeight: 400,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(14),
+      }
     },
     body1: {
-      fontSize: theme.typography.pxToRem(16),
+      fontSize: referenceTheme.typography.pxToRem(16),
-      lineHeight: 1.5,
-      fontWeight: 700,
-    },
-    body2: {
-      fontSize: theme.typography.pxToRem(16),
       lineHeight: 1.5,
       fontWeight: 400,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(16),
+      }
+    },
+    body2: {
+      fontSize: referenceTheme.typography.pxToRem(16),
+      lineHeight: 1.5,
+      fontWeight: 700,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(16),
+      }
     },
     button: {
+      fontSize: referenceTheme.typography.pxToRem(16),
       fontWeight: 700,
+      [referenceTheme.breakpoints.down('sm')]: {
+        fontSize: referenceTheme.typography.pxToRem(16),
+      }
     }
   },
   components: {
     MuiButton: {
       styleOverrides: {
         root: {
-          padding: '12px 16px'
+          padding: '12px 16px',
+          textTransform: 'none',
         }
       }
     },
+    MuiContainer: {
+      defaultProps: {
+        maxWidth: 'xl',
+      }
+    },
     MuiCssBaseline: {
       styleOverrides: {
+        html: {
+          scrollBehavior: 'smooth',
+        },
         a: {
           textDecoration: 'none',
         },
       },
     },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          background: referenceTheme.palette.primary.main,
+          zIndex: referenceTheme.zIndex.drawer + 1,
+        }
+      },
+      defaultProps: {
+        elevation: 2,
+      },
+    },
+    MuiToolbar: {
+      styleOverrides: {
+        root: {
+          '@media all': {
+            paddingRight: referenceTheme.spacing(1.5),
+          }
+        }
+      }
+    }
   }
 });