From e6b70135fbed8b0d4017307cb531061b5f1d3f7b Mon Sep 17 00:00:00 2001
From: Juan Pablo Rombola <juampi.rombola@gmail.com>
Date: Tue, 19 Sep 2023 11:08:14 -0300
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20change=20types=20and=20ids?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AdvancedSwitch/index.tsx | 6 +++---
 components/DropdownMenu/index.tsx   | 4 ++--
 components/Settings/index.tsx       | 7 +++----
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/AdvancedSwitch/index.tsx b/components/AdvancedSwitch/index.tsx
index 6b1ec58cb..3657604df 100644
--- a/components/AdvancedSwitch/index.tsx
+++ b/components/AdvancedSwitch/index.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, BoxProps, Typography } from '@mui/material';
 import { useCustomTheme } from 'contexts/ThemeContext';
 import { useTranslation } from 'react-i18next';
 import Switch from 'components/Switch';
 
 type Props = {
-  sx?: React.ComponentProps<typeof Box>['sx'];
+  sx?: BoxProps['sx'];
   fontSize?: number;
 };
 
@@ -14,7 +14,7 @@ const AdvancedViewSwitch: FC<Props> = ({ sx, fontSize = 14 }) => {
   const { view, setView } = useCustomTheme();
 
   return (
-    <Box display="flex" alignItems="center" justifyContent="space-between" gap={1} sx={{ ...sx }}>
+    <Box display="flex" alignItems="center" justifyContent="space-between" gap={1} sx={sx}>
       <Typography fontSize={fontSize}>{t('Advanced view')}</Typography>
       <Switch
         checked={view === 'advanced'}
diff --git a/components/DropdownMenu/index.tsx b/components/DropdownMenu/index.tsx
index bfd443daf..0930a03c4 100644
--- a/components/DropdownMenu/index.tsx
+++ b/components/DropdownMenu/index.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactNode, useCallback, useState } from 'react';
-import { Box, Button, Menu, type MenuProps, MenuItem } from '@mui/material';
+import { Box, Button, Menu, type MenuProps, MenuItem, ButtonProps } from '@mui/material';
 import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 
 interface Props<T> extends Pick<MenuProps, 'anchorOrigin' | 'transformOrigin'> {
@@ -10,7 +10,7 @@ interface Props<T> extends Pick<MenuProps, 'anchorOrigin' | 'transformOrigin'> {
   renderOption: (value: T) => ReactNode;
   'data-testid'?: string;
   disabled?: boolean;
-  buttonSx?: React.ComponentProps<typeof Button>['sx'];
+  buttonSx?: ButtonProps['sx'];
 }
 
 function InnerButton({ children }: PropsWithChildren) {
diff --git a/components/Settings/index.tsx b/components/Settings/index.tsx
index 165253441..11b3d773f 100644
--- a/components/Settings/index.tsx
+++ b/components/Settings/index.tsx
@@ -17,24 +17,23 @@ const Settings = () => {
   return (
     <>
       <IconButton
-        id="view-contracts-button"
+        id="settings"
         aria-controls={open ? 'basic-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
         size="small"
         sx={{ outline: '1px solid', width: '32px', height: '32px', borderRadius: '50%', p: '0px' }}
-        // variant="outlined"
       >
         <SettingsRoundedIcon sx={{ fontSize: 20 }} />
       </IconButton>
       <Menu
-        id="basic-menu"
+        id="settings-menu"
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         MenuListProps={{
-          'aria-labelledby': 'view-contracts-button',
+          'aria-labelledby': 'settings-menu',
         }}
         slotProps={{
           paper: {