♻️ change types and ids

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

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

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