chore: upgrade to react-router@6

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

@@ -1,4 +1,4 @@
-import { styled } from "@mui/material/styles";
+import { styled } from '@mui/material/styles';
 import BaseForm from 'components/Form';
 
 export const Form = styled(BaseForm)(({ theme }) => ({

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 => ({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 
 type FormProps = {
   children: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import type { AppFields } from 'types/app';
-import { useFormContext } from "react-hook-form";
+import { useFormContext } from 'react-hook-form';
 
 import TextField from 'components/TextField';
 

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

@@ -1,5 +1,6 @@
 import { useMemo, forwardRef } from 'react';
-import ListItem from '@mui/material/ListItem';
+import { useMatch } from 'react-router-dom';
+import ListItem from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { Link, LinkProps } from 'react-router-dom';
@@ -12,6 +13,7 @@ type ListItemLinkProps = {
 
 export default function ListItemLink(props: ListItemLinkProps) {
   const { icon, primary, to } = props;
+  const selected = useMatch({ path: to, end: false });
 
   const CustomLink = useMemo(
     () =>
@@ -26,9 +28,9 @@ export default function ListItemLink(props: ListItemLinkProps) {
 
   return (
     <li>
-      <ListItem button component={CustomLink} sx={{ pl: { xs: 2, sm: 3 } }}>
-        <ListItemIcon>{icon}</ListItemIcon>
-        <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1' }} />
+      <ListItem component={CustomLink} sx={{ pl: { xs: 2, sm: 3 } }} selected={!!selected}>
+        <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
+        <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1', }} />
       </ListItem>
     </li>
   );

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

@@ -1,5 +1,5 @@
 import {
   BrowserRouter as Router,
-} from "react-router-dom";
+} from 'react-router-dom';
 
 export default Router;

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

@@ -1,6 +1,6 @@
-import { useRef } from "react";
-import { Controller, Control, FieldValues } from "react-hook-form";
-import MuiTextField, { TextFieldProps as MuiTextFieldProps } from "@mui/material/TextField";
+import { useRef } from 'react';
+import { Controller, Control, FieldValues } from 'react-hook-form';
+import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';