feat: update theme

2021-12-09 19:51:42 +01:00
parent cab2d281f3
commit c855a5f555
8 changed files with 140 additions and 48 deletions
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/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
-          sx={{
-            background: (theme) => theme.palette.primary.dark,
-            zIndex: (theme) => theme.zIndex.drawer + 1
-          }}>
+        <MuiAppBar>
          <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>
--- a/packages/web/src/components/AppRow/index.tsx
+++ b/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>
--- a/packages/web/src/components/Drawer/index.tsx
+++ b/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 OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
-
+import SwapCallsIcon from '@mui/icons-material/SwapCalls';
+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}
        />
--- a/packages/web/src/components/Drawer/style.ts
+++ b/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,
--- a/packages/web/src/components/Layout/index.tsx
+++ b/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 />
--- a/packages/web/src/components/ListItemLink/index.tsx
+++ b/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>
  );
--- a/packages/web/src/locales/en.json
+++ b/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",
--- a/packages/web/src/styles/theme.ts
+++ b/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),
-      lineHeight: 1.5,
-      fontWeight: 700,
-    },
-    body2: {
-      fontSize: theme.typography.pxToRem(16),
+      fontSize: referenceTheme.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),
+          }
+        }
+      }
+    }
  }
 });