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
-          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>

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 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}
         />

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>
   );