chore: upgrade to react-router@6

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

@@ -35,19 +35,19 @@ export default function Drawer(props: SwipeableDrawerProps) {
 
       <List>
         <ListItemLink
-          icon={<SwapCallsIcon htmlColor={theme.palette.primary.dark} />}
+          icon={<SwapCallsIcon htmlColor={theme.palette.primary.main} />}
           primary={formatMessage('drawer.flows')}
           to={URLS.FLOWS}
         />
 
         <ListItemLink
-          icon={<AppsIcon htmlColor={theme.palette.primary.dark} />}
+          icon={<AppsIcon htmlColor={theme.palette.primary.main} />}
           primary={formatMessage('drawer.apps')}
           to={URLS.APPS}
         />
 
         <ListItemLink
-          icon={<ExploreIcon htmlColor={theme.palette.primary.dark} />}
+          icon={<ExploreIcon htmlColor={theme.palette.primary.main} />}
           primary={formatMessage('drawer.explore')}
           to={URLS.EXPLORE}
         />

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

@@ -4,12 +4,15 @@ import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer';
 const drawerWidth = 300;
 
 const openedMixin = (theme: Theme): CSSObject => ({
-  width: drawerWidth,
   transition: theme.transitions.create('width', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.enteringScreen,
   }),
   overflowX: 'hidden',
+  width: '100vw',
+  [theme.breakpoints.up('sm')]: {
+    width: drawerWidth,
+  },
 });
 
 const closedMixin = (theme: Theme): CSSObject => ({