From 011bf9cd7787169dfa4516ce1943e0e2e7f3f24b Mon Sep 17 00:00:00 2001
From: Nathan Richards <nathan@li.finance>
Date: Fri, 24 Nov 2023 20:12:21 +0100
Subject: [PATCH] fix: amends after code review

---
 packages/widget/src/components/Badge.tsx      |  1 +
 .../components/Header/NavigationHeader.tsx    | 20 +++++++++--
 ...ton.style.tsx => SettingsButton.style.tsx} |  6 ++--
 .../src/components/Header/SettingsButton.tsx  |  2 +-
 .../Header/TransactionHistoryButton.style.ts  |  6 ----
 .../Header/TransactionHistoryButton.tsx       | 23 ------------
 .../widget/src/components/Tabs/Tabs.style.tsx |  4 ++-
 .../SelectEnabledToolsPage.tsx                |  1 +
 .../BridgeAndExchangeSettings.tsx             |  6 ++--
 .../pages/SettingsPage/GasPriceSettings.tsx   | 24 ++++++-------
 .../pages/SettingsPage/LanguageSetting.tsx    |  4 +--
 .../SettingsPage/RoutePrioritySettings.tsx    | 15 +++-----
 .../SendToWalletOptionSetting.tsx             | 22 ++++++++----
 .../BadgedAdditionalInformation.tsx           | 20 -----------
 .../SettingsPage/SettingsCard/BadgedValue.tsx | 22 ++++++++++++
 .../SettingsCard/SettingCard.style.tsx        | 16 ++++-----
 .../SettingsCard/SettingCardButton.tsx        | 19 +++++-----
 .../SettingsCard/SettingCardContainer.tsx     | 22 ------------
 .../SettingsCard/SettingCardExpandable.tsx    | 27 +++++++-------
 .../pages/SettingsPage/SettingsCard/index.ts  |  3 +-
 .../{SettingCard.types.ts => types.ts}        |  0
 .../SlippageLimitsWarning.tsx                 | 15 --------
 .../SlippageSettings/SlippageSettings.tsx     | 36 ++++++++++---------
 .../src/pages/SettingsPage/ThemeSettings.tsx  | 14 ++++----
 24 files changed, 144 insertions(+), 184 deletions(-)
 rename packages/widget/src/components/Header/{SettingsButon.style.tsx => SettingsButton.style.tsx} (91%)
 delete mode 100644 packages/widget/src/components/Header/TransactionHistoryButton.style.ts
 delete mode 100644 packages/widget/src/components/Header/TransactionHistoryButton.tsx
 delete mode 100644 packages/widget/src/pages/SettingsPage/SettingsCard/BadgedAdditionalInformation.tsx
 create mode 100644 packages/widget/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx
 delete mode 100644 packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardContainer.tsx
 rename packages/widget/src/pages/SettingsPage/SettingsCard/{SettingCard.types.ts => types.ts} (100%)
 delete mode 100644 packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageLimitsWarning.tsx

diff --git a/packages/widget/src/components/Badge.tsx b/packages/widget/src/components/Badge.tsx
index 5d094e017..a18ec07d8 100644
--- a/packages/widget/src/components/Badge.tsx
+++ b/packages/widget/src/components/Badge.tsx
@@ -12,5 +12,6 @@ export const Badge = styled(MuiBadge)(({ theme }) => ({
     // the following removes MUI styling so we can position with the badge with flex
     position: 'relative',
     transform: 'translateX(0)',
+    borderRadius: '50%',
   },
 }));
diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
index fdb2f3c0d..f30da3bc7 100644
--- a/packages/widget/src/components/Header/NavigationHeader.tsx
+++ b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -1,5 +1,5 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useAccount, useNavigateBack } from '../../hooks';
@@ -15,8 +15,24 @@ import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
 import { SettingsButton } from './SettingsButton';
-import { TransactionHistoryButton } from './TransactionHistoryButton';
+import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 
+export const TransactionHistoryButton = () => {
+  const { t } = useTranslation();
+  const { navigate } = useNavigateBack();
+
+  return (
+    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
+      <IconButton
+        size="medium"
+        edge="start"
+        onClick={() => navigate(navigationRoutes.transactionHistory)}
+      >
+        <ReceiptLongIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
   const { subvariant, hiddenUI, variant } = useWidgetConfig();
diff --git a/packages/widget/src/components/Header/SettingsButon.style.tsx b/packages/widget/src/components/Header/SettingsButton.style.tsx
similarity index 91%
rename from packages/widget/src/components/Header/SettingsButon.style.tsx
rename to packages/widget/src/components/Header/SettingsButton.style.tsx
index 4c578ae13..72f53ef17 100644
--- a/packages/widget/src/components/Header/SettingsButon.style.tsx
+++ b/packages/widget/src/components/Header/SettingsButton.style.tsx
@@ -22,11 +22,13 @@ export const SettingsIconButton = styled(IconButton, {
         backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
       },
     },
-    default: {},
+    default: {
+      marginRight: theme.spacing(-1.25),
+    },
   };
 
   return {
-    borderRadius: theme.shape.borderRadiusSecondary,
+    borderRadius: 20,
     ...notificationStyles[notification ?? 'default'],
   };
 });
diff --git a/packages/widget/src/components/Header/SettingsButton.tsx b/packages/widget/src/components/Header/SettingsButton.tsx
index 5ddbe9728..2b6d6695d 100644
--- a/packages/widget/src/components/Header/SettingsButton.tsx
+++ b/packages/widget/src/components/Header/SettingsButton.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { useNavigateBack, useSettingMonitor } from '../../hooks';
 import { navigationRoutes } from '../../utils';
-import { SettingsIconButton } from './SettingsButon.style';
+import { SettingsIconButton } from './SettingsButton.style';
 import { Badge } from '../../components/Badge';
 
 export const SettingsButton = () => {
diff --git a/packages/widget/src/components/Header/TransactionHistoryButton.style.ts b/packages/widget/src/components/Header/TransactionHistoryButton.style.ts
deleted file mode 100644
index 1d17723a9..000000000
--- a/packages/widget/src/components/Header/TransactionHistoryButton.style.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { IconButton } from '@mui/material';
-
-export const HistoryIconButton = styled(IconButton)(({ theme }) => ({
-  borderRadius: theme.shape.borderRadiusSecondary,
-}));
diff --git a/packages/widget/src/components/Header/TransactionHistoryButton.tsx b/packages/widget/src/components/Header/TransactionHistoryButton.tsx
deleted file mode 100644
index e5fb30870..000000000
--- a/packages/widget/src/components/Header/TransactionHistoryButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Tooltip } from '@mui/material';
-import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
-import { navigationRoutes } from '../../utils';
-import { useTranslation } from 'react-i18next';
-import { useNavigateBack } from '../../hooks';
-import { HistoryIconButton } from './TransactionHistoryButton.style';
-
-export const TransactionHistoryButton = () => {
-  const { t } = useTranslation();
-  const { navigate } = useNavigateBack();
-
-  return (
-    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
-      <HistoryIconButton
-        size="medium"
-        edge="start"
-        onClick={() => navigate(navigationRoutes.transactionHistory)}
-      >
-        <ReceiptLongIcon />
-      </HistoryIconButton>
-    </Tooltip>
-  );
-};
diff --git a/packages/widget/src/components/Tabs/Tabs.style.tsx b/packages/widget/src/components/Tabs/Tabs.style.tsx
index c1f95f10d..c146b55ae 100644
--- a/packages/widget/src/components/Tabs/Tabs.style.tsx
+++ b/packages/widget/src/components/Tabs/Tabs.style.tsx
@@ -25,7 +25,9 @@ export const Tabs: StyledComponent<TabsProps> = styled(MuiTabs)(
         theme.palette.mode === 'dark'
           ? theme.palette.background.default
           : theme.palette.common.white,
-      borderRadius: theme.shape.borderRadiusSecondary,
+      borderRadius:
+        Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary) -
+        4,
       boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
     },
   }),
diff --git a/packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx
index 8d0b17f7e..b2910a1cc 100644
--- a/packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx
+++ b/packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx
@@ -24,6 +24,7 @@ interface SelectAllCheckboxProps {
   onClick: MouseEventHandler;
   anyCheckboxesSelected: boolean;
 }
+
 const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
   allCheckboxesSelected,
   anyCheckboxesSelected,
diff --git a/packages/widget/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx b/packages/widget/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx
index d1853291a..f951eee11 100644
--- a/packages/widget/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx
+++ b/packages/widget/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx
@@ -6,7 +6,7 @@ import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { useSettingsStore } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { useSettingMonitor } from '../../hooks';
-import { SettingCardButton, BadgedAdditionalInformation } from './SettingsCard';
+import { SettingCardButton, BadgedValue } from './SettingsCard';
 
 const supportedIcons = {
   Bridges: AirlineStopsIcon,
@@ -41,10 +41,10 @@ export const BridgeAndExchangeSettings: React.FC<{
       icon={<Icon />}
       title={t(`settings.enabled${type}`)}
     >
-      <BadgedAdditionalInformation
+      <BadgedValue
         badgeColor="info"
         showBadge={customisationLookUp[type]}
-      >{`${enabledTools}/${tools}`}</BadgedAdditionalInformation>
+      >{`${enabledTools}/${tools}`}</BadgedValue>
     </SettingCardButton>
   );
 };
diff --git a/packages/widget/src/pages/SettingsPage/GasPriceSettings.tsx b/packages/widget/src/pages/SettingsPage/GasPriceSettings.tsx
index be640e7d1..b56abf7ee 100644
--- a/packages/widget/src/pages/SettingsPage/GasPriceSettings.tsx
+++ b/packages/widget/src/pages/SettingsPage/GasPriceSettings.tsx
@@ -3,10 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useSettings, useSettingsStore } from '../../stores';
 import { Tab, Tabs } from '../../components/Tabs';
 import { useSettingMonitor } from '../../hooks';
-import {
-  SettingCardExpandable,
-  BadgedAdditionalInformation,
-} from './SettingsCard';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
 
 export const GasPriceSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -20,13 +17,10 @@ export const GasPriceSettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      additionalInfo={
-        <BadgedAdditionalInformation
-          badgeColor="info"
-          showBadge={isGasPriceChanged}
-        >
+      value={
+        <BadgedValue badgeColor="info" showBadge={isGasPriceChanged}>
           {t(`settings.gasPrice.${gasPrice}` as any)}
-        </BadgedAdditionalInformation>
+        </BadgedValue>
       }
       icon={<EvStationIcon />}
       title={t(`settings.gasPrice.title`)}
@@ -38,9 +32,13 @@ export const GasPriceSettings: React.FC = () => {
         onChange={handleGasPriceChange}
         sx={{ mt: 1.5 }}
       >
-        <Tab label={t(`settings.gasPrice.slow`)} value="slow" />
-        <Tab label={t(`settings.gasPrice.normal`)} value="normal" />
-        <Tab label={t(`settings.gasPrice.fast`)} value="fast" />
+        <Tab label={t(`settings.gasPrice.slow`)} value="slow" disableRipple />
+        <Tab
+          label={t(`settings.gasPrice.normal`)}
+          value="normal"
+          disableRipple
+        />
+        <Tab label={t(`settings.gasPrice.fast`)} value="fast" disableRipple />
       </Tabs>
     </SettingCardExpandable>
   );
diff --git a/packages/widget/src/pages/SettingsPage/LanguageSetting.tsx b/packages/widget/src/pages/SettingsPage/LanguageSetting.tsx
index 41df9aa11..0704aba69 100644
--- a/packages/widget/src/pages/SettingsPage/LanguageSetting.tsx
+++ b/packages/widget/src/pages/SettingsPage/LanguageSetting.tsx
@@ -5,7 +5,7 @@ import { useWidgetConfig } from '../../providers';
 import { HiddenUI } from '../../types';
 import { navigationRoutes } from '../../utils';
 import { useLanguages } from '../../hooks';
-import { SettingCardButton, SettingSummaryText } from './SettingsCard';
+import { SettingCardButton, SummaryValue } from './SettingsCard';
 
 export const LanguageSetting: React.FC = () => {
   const { t } = useTranslation();
@@ -27,7 +27,7 @@ export const LanguageSetting: React.FC = () => {
       icon={<LanguageIcon />}
       title={t(`language.title`)}
     >
-      <SettingSummaryText>{selectedLanguageDisplayName}</SettingSummaryText>
+      <SummaryValue>{selectedLanguageDisplayName}</SummaryValue>
     </SettingCardButton>
   );
 };
diff --git a/packages/widget/src/pages/SettingsPage/RoutePrioritySettings.tsx b/packages/widget/src/pages/SettingsPage/RoutePrioritySettings.tsx
index 646ff824e..e5e2f9692 100644
--- a/packages/widget/src/pages/SettingsPage/RoutePrioritySettings.tsx
+++ b/packages/widget/src/pages/SettingsPage/RoutePrioritySettings.tsx
@@ -4,10 +4,7 @@ import { Orders } from '@lifi/sdk';
 import { Tab, Tabs } from '../../components/Tabs';
 import { useSettings, useSettingsStore } from '../../stores';
 import { useSettingMonitor } from '../../hooks';
-import {
-  SettingCardExpandable,
-  BadgedAdditionalInformation,
-} from './SettingsCard';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
 
 type SupportedRoute = (typeof Orders)[number];
 
@@ -27,13 +24,10 @@ export const RoutePrioritySettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      additionalInfo={
-        <BadgedAdditionalInformation
-          badgeColor="info"
-          showBadge={isRoutePriorityChanged}
-        >
+      value={
+        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
           {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
-        </BadgedAdditionalInformation>
+        </BadgedValue>
       }
       icon={<RouteIcon />}
       title={t(`settings.routePriority`)}
@@ -52,6 +46,7 @@ export const RoutePrioritySettings: React.FC = () => {
               key={order}
               label={t(`main.tags.${order.toLowerCase()}` as any)}
               value={order}
+              disableRipple
             />
           );
         })}
diff --git a/packages/widget/src/pages/SettingsPage/SendToWalletOptionSetting.tsx b/packages/widget/src/pages/SettingsPage/SendToWalletOptionSetting.tsx
index 0c70fa129..d65b417bb 100644
--- a/packages/widget/src/pages/SettingsPage/SendToWalletOptionSetting.tsx
+++ b/packages/widget/src/pages/SettingsPage/SendToWalletOptionSetting.tsx
@@ -9,7 +9,12 @@ import {
   useSettingsStore,
 } from '../../stores';
 import { HiddenUI } from '../../types';
-import { SettingCardContainer } from './SettingsCard';
+import {
+  SettingCard,
+  SummaryRowContainer,
+  SummaryTitleContainer,
+  SummaryValue,
+} from './SettingsCard';
 
 export const SendToWalletOptionSetting = () => {
   const { t } = useTranslation();
@@ -30,11 +35,14 @@ export const SendToWalletOptionSetting = () => {
   };
 
   return (
-    <SettingCardContainer
-      icon={<WalletIcon />}
-      title={t(`settings.sendToWalletOption`)}
-    >
-      <Switch checked={showDestinationWallet} onChange={onChange} />
-    </SettingCardContainer>
+    <SettingCard>
+      <SummaryRowContainer>
+        <SummaryTitleContainer>
+          <WalletIcon />
+          <SummaryValue>{t(`settings.sendToWalletOption`)}</SummaryValue>
+        </SummaryTitleContainer>
+        <Switch checked={showDestinationWallet} onChange={onChange} />
+      </SummaryRowContainer>
+    </SettingCard>
   );
 };
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedAdditionalInformation.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedAdditionalInformation.tsx
deleted file mode 100644
index dba7f62dd..000000000
--- a/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedAdditionalInformation.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { BadgeProps } from '@mui/material';
-import { Badge } from '../../../components/Badge';
-import { SettingSummaryText } from './SettingCard.style';
-
-interface BadgedAdditionalInformationProps {
-  showBadge: boolean;
-  badgeColor?: BadgeProps['color'];
-}
-
-export const BadgedAdditionalInformation: React.FC<
-  PropsWithChildren<BadgedAdditionalInformationProps>
-> = ({ showBadge, badgeColor, children }) =>
-  showBadge && badgeColor ? (
-    <Badge variant="dot" color={badgeColor}>
-      <SettingSummaryText>{children}</SettingSummaryText>
-    </Badge>
-  ) : (
-    <SettingSummaryText>{children}</SettingSummaryText>
-  );
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx
new file mode 100644
index 000000000..5ec89cba8
--- /dev/null
+++ b/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx
@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+import type { BadgeProps } from '@mui/material';
+import { Badge } from '../../../components/Badge';
+import { SummaryValue } from './SettingCard.style';
+
+interface BadgedValueProps {
+  showBadge: boolean;
+  badgeColor?: BadgeProps['color'];
+}
+
+export const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>> = ({
+  showBadge,
+  badgeColor,
+  children,
+}) =>
+  showBadge && badgeColor ? (
+    <Badge variant="dot" color={badgeColor}>
+      <SummaryValue>{children}</SummaryValue>
+    </Badge>
+  ) : (
+    <SummaryValue>{children}</SummaryValue>
+  );
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx
index b6cde6a38..0e2619d8d 100644
--- a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx
+++ b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx
@@ -8,23 +8,20 @@ export const SettingsList = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1, 3, 2),
 }));
 
-export const SettingTitle = styled(Box)(({ theme }) => ({
+export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1.5),
 }));
 
-const SettingSummaryBase = {
+export const SummaryRowContainer = styled(Box)({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
-};
-export const SettingSummary = styled(Box)({
-  ...SettingSummaryBase,
 });
 
-export const SettingSummaryButton = styled(ButtonBase)({
+export const SummaryRowButton = styled(ButtonBase)({
   background: 'none',
   color: 'inherit',
   border: 'none',
@@ -32,10 +29,13 @@ export const SettingSummaryButton = styled(ButtonBase)({
   font: 'inherit',
   cursor: 'pointer',
   outline: 'inherit',
-  ...SettingSummaryBase,
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
 });
 
-export const SettingSummaryText = styled(Typography)({
+export const SummaryValue = styled(Typography)({
   lineHeight: '1.25',
   fontWeight: 500,
 });
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardButton.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardButton.tsx
index 27754d5a0..80290a9a2 100644
--- a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardButton.tsx
+++ b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardButton.tsx
@@ -1,25 +1,26 @@
 import type { MouseEventHandler, PropsWithChildren } from 'react';
-import type { SettingCardTitle } from './SettingCard.types';
+import type { SettingCardTitle } from './types';
 import { SettingCard } from './SettingCard';
 import {
-  SettingSummaryButton,
-  SettingSummaryText,
-  SettingTitle,
+  SummaryRowButton,
+  SummaryValue,
+  SummaryTitleContainer,
 } from './SettingCard.style';
 
 interface SettingCardButtonProps extends SettingCardTitle {
   onClick: MouseEventHandler;
 }
+
 export const SettingCardButton: React.FC<
   PropsWithChildren<SettingCardButtonProps>
 > = ({ onClick, icon, title, children }) => (
   <SettingCard>
-    <SettingSummaryButton onClick={onClick} focusRipple>
-      <SettingTitle>
+    <SummaryRowButton onClick={onClick} disableRipple>
+      <SummaryTitleContainer>
         {icon}
-        <SettingSummaryText>{title}</SettingSummaryText>
-      </SettingTitle>
+        <SummaryValue>{title}</SummaryValue>
+      </SummaryTitleContainer>
       {children}
-    </SettingSummaryButton>
+    </SummaryRowButton>
   </SettingCard>
 );
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardContainer.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardContainer.tsx
deleted file mode 100644
index d731414e4..000000000
--- a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardContainer.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { SettingCardTitle } from './SettingCard.types';
-import { SettingCard } from './SettingCard';
-import {
-  SettingSummary,
-  SettingTitle,
-  SettingSummaryText,
-} from './SettingCard.style';
-
-export const SettingCardContainer: React.FC<
-  PropsWithChildren<SettingCardTitle>
-> = ({ icon, title, children }) => (
-  <SettingCard>
-    <SettingSummary>
-      <SettingTitle>
-        {icon}
-        <SettingSummaryText>{title}</SettingSummaryText>
-      </SettingTitle>
-      {children}
-    </SettingSummary>
-  </SettingCard>
-);
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx
index fcb80ea65..8c6b5535a 100644
--- a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx
+++ b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx
@@ -1,40 +1,41 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 import { useId } from 'react';
 import { Collapse } from '@mui/material';
-import type { SettingCardTitle } from './SettingCard.types';
+import type { SettingCardTitle } from './types';
 import { SettingCard } from './SettingCard';
 import {
-  SettingSummaryButton,
-  SettingSummaryText,
-  SettingTitle,
+  SummaryRowButton,
+  SummaryValue,
+  SummaryTitleContainer,
 } from './SettingCard.style';
 import { useSettingsCardExpandable } from './SettingsAccordian';
 
 interface SettingCardExpandableProps extends SettingCardTitle {
-  additionalInfo: ReactNode;
+  value: ReactNode;
 }
+
 export const SettingCardExpandable: React.FC<
   PropsWithChildren<SettingCardExpandableProps>
-> = ({ icon, title, additionalInfo, children }) => {
+> = ({ icon, title, value, children }) => {
   const { expanded, toggleExpanded } = useSettingsCardExpandable();
   const buttonId = useId();
   const collapseId = useId();
 
   return (
     <SettingCard>
-      <SettingSummaryButton
+      <SummaryRowButton
         id={buttonId}
         aria-expanded={expanded}
         aria-controls={collapseId}
         onClick={toggleExpanded}
-        focusRipple
+        disableRipple
       >
-        <SettingTitle>
+        <SummaryTitleContainer>
           {icon}
-          <SettingSummaryText>{title}</SettingSummaryText>
-        </SettingTitle>
-        {!expanded && additionalInfo}
-      </SettingSummaryButton>
+          <SummaryValue>{title}</SummaryValue>
+        </SummaryTitleContainer>
+        {!expanded && value}
+      </SummaryRowButton>
       <Collapse
         id={collapseId}
         role="region"
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/index.ts b/packages/widget/src/pages/SettingsPage/SettingsCard/index.ts
index b4cdba47e..6b1647618 100644
--- a/packages/widget/src/pages/SettingsPage/SettingsCard/index.ts
+++ b/packages/widget/src/pages/SettingsPage/SettingsCard/index.ts
@@ -1,7 +1,6 @@
 export * from './SettingCard';
 export * from './SettingCard.style';
 export * from './SettingCardButton';
-export * from './SettingCardContainer';
 export * from './SettingCardExpandable';
-export * from './BadgedAdditionalInformation';
+export * from './BadgedValue';
 export * from './SettingsAccordian';
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.types.ts b/packages/widget/src/pages/SettingsPage/SettingsCard/types.ts
similarity index 100%
rename from packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.types.ts
rename to packages/widget/src/pages/SettingsPage/SettingsCard/types.ts
diff --git a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageLimitsWarning.tsx b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageLimitsWarning.tsx
deleted file mode 100644
index 42a07e20f..000000000
--- a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageLimitsWarning.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { Typography } from '@mui/material';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { SlippageLimitsWarningContainer } from './SlippageSettings.style';
-
-export const SlippageLimitsWarning: React.FC<PropsWithChildren> = ({
-  children,
-}) => (
-  <SlippageLimitsWarningContainer>
-    <WarningRoundedIcon color="warning" />
-    <Typography fontSize={13} fontWeight={400}>
-      {children}
-    </Typography>
-  </SlippageLimitsWarningContainer>
-);
diff --git a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx
index e415c846d..78a7eed82 100644
--- a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx
+++ b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx
@@ -9,15 +9,14 @@ import {
   SettingsFieldSet,
   SlippageCustomInput,
   SlippageDefaultButton,
+  SlippageLimitsWarningContainer,
 } from './SlippageSettings.style';
-import { SlippageLimitsWarning } from './SlippageLimitsWarning';
-import { Box } from '@mui/material';
-import {
-  SettingCardExpandable,
-  BadgedAdditionalInformation,
-} from '../SettingsCard';
+import { Box, Typography } from '@mui/material';
+import { SettingCardExpandable, BadgedValue } from '../SettingsCard';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 const slippageDefault = '0.5';
+
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation();
   const { isSlippageOutsideRecommendedLimits, isSlippageChanged } =
@@ -25,7 +24,7 @@ export const SlippageSettings: React.FC = () => {
   const { slippage } = useSettings(['slippage']);
   const setValue = useSettingsStore((state) => state.setValue);
   const defaultValue = useRef(slippage);
-  const [focused, setFocused] = useState('');
+  const [focused, setFocused] = useState<'input' | 'button' | undefined>();
 
   const handleDefaultClick = () => {
     setValue('slippage', formatSlippage(slippageDefault, defaultValue.current));
@@ -47,11 +46,11 @@ export const SlippageSettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      additionalInfo={
-        <BadgedAdditionalInformation
+      value={
+        <BadgedValue
           badgeColor={badgeColor}
           showBadge={!!badgeColor}
-        >{`${slippage}%`}</BadgedAdditionalInformation>
+        >{`${slippage}%`}</BadgedValue>
       }
       icon={<PercentIcon />}
       title={t(`settings.slippage`)}
@@ -64,12 +63,12 @@ export const SlippageSettings: React.FC = () => {
               setFocused('button');
             }}
             onBlur={() => {
-              setFocused('');
+              setFocused(undefined);
             }}
             onClick={handleDefaultClick}
-            focusRipple
+            disableRipple
           >
-            0.5
+            {slippageDefault}
           </SlippageDefaultButton>
           <SlippageCustomInput
             selected={slippageDefault !== slippage && focused !== 'button'}
@@ -82,16 +81,19 @@ export const SlippageSettings: React.FC = () => {
               setFocused('input');
             }}
             onBlur={() => {
-              setFocused('');
+              setFocused(undefined);
             }}
             value={customInputValue}
             autoComplete="off"
           />
         </SettingsFieldSet>
         {isSlippageOutsideRecommendedLimits && (
-          <SlippageLimitsWarning>
-            {t('warning.message.slippageOutsideRecommendedLimits')}
-          </SlippageLimitsWarning>
+          <SlippageLimitsWarningContainer>
+            <WarningRoundedIcon color="warning" />
+            <Typography fontSize={13} fontWeight={400}>
+              {t('warning.message.slippageOutsideRecommendedLimits')}
+            </Typography>
+          </SlippageLimitsWarningContainer>
         )}
       </Box>
     </SettingCardExpandable>
diff --git a/packages/widget/src/pages/SettingsPage/ThemeSettings.tsx b/packages/widget/src/pages/SettingsPage/ThemeSettings.tsx
index 7f55721f5..ca3445c80 100644
--- a/packages/widget/src/pages/SettingsPage/ThemeSettings.tsx
+++ b/packages/widget/src/pages/SettingsPage/ThemeSettings.tsx
@@ -7,10 +7,10 @@ import Nightlight from '@mui/icons-material/Nightlight';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useAppearance } from '../../stores';
-import { SettingCardExpandable, SettingSummaryText } from './SettingsCard';
+import { SettingCardExpandable, SummaryValue } from './SettingsCard';
 import { Tab, Tabs } from '../../components/Tabs';
 
-const themeIconLookUp = {
+const themeIcons = {
   light: LightModeIcon,
   dark: Nightlight,
   auto: BrightnessAuto,
@@ -31,7 +31,7 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
   ...props
 }) => (
   <Tooltip title={title} arrow>
-    <Tab icon={Icon} value={value} {...props} />
+    <Tab icon={Icon} value={value} {...props} disableRipple />
   </Tooltip>
 );
 
@@ -44,7 +44,7 @@ export const ThemeSettings: React.FC = () => {
     return null;
   }
 
-  const ThemeIcon = themeIconLookUp[appearance];
+  const ThemeIcon = themeIcons[appearance];
 
   const handleThemeChange = (
     _: React.SyntheticEvent,
@@ -55,9 +55,7 @@ export const ThemeSettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      additionalInfo={
-        <SettingSummaryText>{t(`button.${appearance}`)} </SettingSummaryText>
-      }
+      value={<SummaryValue>{t(`button.${appearance}`)} </SummaryValue>}
       icon={<ThemeIcon />}
       title={t('settings.theme')}
     >
@@ -68,7 +66,7 @@ export const ThemeSettings: React.FC = () => {
         onChange={handleThemeChange}
         sx={{ mt: 1.5 }}
       >
-        {Object.entries(themeIconLookUp).map(([theme, Icon]) => {
+        {Object.entries(themeIcons).map(([theme, Icon]) => {
           const supportedThemeOption = theme as Appearance;
 
           return (