@lifi/widget 3.0.0-alpha.31 → 3.0.0-alpha.32

package/components/SendToWallet/SendToWalletButton.tsx

@@ -1,10 +1,15 @@
-import { Collapse } from '@mui/material';
+import { CloseRounded } from '@mui/icons-material';
+import type { BoxProps } from '@mui/material';
+import { Box, Collapse } from '@mui/material';
+import type { MouseEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useAccount } from '../../hooks/useAccount.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js';
 import { DisabledUI, HiddenUI } from '../../types/widget.js';
@@ -16,11 +21,11 @@ import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { AccountAvatar } from '../Avatar/AccountAvatar.js';
 import { Card } from '../Card/Card.js';
-import { CardRowContainer } from '../Card/CardButton.style.js';
+import { CardIconButton } from '../Card/CardIconButton.js';
 import { CardTitle } from '../Card/CardTitle.js';
 import { SendToWalletCardHeader } from './SendToWallet.style.js';
 
-export const SendToWalletButton = () => {
+export const SendToWalletButton: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { disabledUI, hiddenUI, toAddress, toAddresses } = useWidgetConfig();
@@ -30,7 +35,9 @@ export const SendToWalletButton = () => {
     'toChain',
     'toToken',
   );
+  const { setFieldValue } = useFieldActions();
   const { selectedBookmark } = useBookmarks();
+  const { setSelectedBookmark } = useBookmarkActions();
   const { accounts } = useAccount();
   const { requiredToAddress } = useToAddressRequirements();
   const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
@@ -66,7 +73,9 @@ export const SendToWalletButton = () => {
           ? defaultChainIdsByType[chainType]
           : undefined;
 
-  const isConnectedAccount = selectedBookmark?.isConnectedAccount;
+  const isConnectedAccount =
+    selectedBookmark?.isConnectedAccount &&
+    matchingConnectedAccount?.isConnected;
   const connectedAccountName = matchingConnectedAccount?.connector?.name;
   const bookmarkName = selectedBookmark?.name;
 
@@ -77,6 +86,10 @@ export const SendToWalletButton = () => {
   const headerSubheader =
     isConnectedAccount || bookmarkName || connectedAccountName ? address : null;
 
+  const isSelected = !!toAddressFieldValue && !(toAddress && disabledToAddress);
+
+  const disabledForChanges = Boolean(toAddress) && disabledToAddress;
+
   const handleOnClick = () => {
     navigate(
       toAddresses?.length
@@ -85,6 +98,12 @@ export const SendToWalletButton = () => {
     );
   };
 
+  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setFieldValue('toAddress', '', { isTouched: true });
+    setSelectedBookmark();
+  };
+
   return (
     <Collapse
       timeout={showInstantly ? 0 : 225}
@@ -94,19 +113,14 @@ export const SendToWalletButton = () => {
     >
       <Card
         component="button"
-        onClick={!!toAddress && disabledToAddress ? undefined : handleOnClick}
-        sx={{ mb: 2 }}
+        onClick={disabledForChanges ? undefined : handleOnClick}
+        width="100%"
+        {...props}
       >
-        <CardRowContainer
-          sx={{
-            flexDirection: 'column',
-            padding: 0,
-            alignItems: 'flex-start',
-          }}
-        >
-          <CardTitle required={requiredToAddress}>
-            {t('header.sendToWallet')}
-          </CardTitle>
+        <CardTitle required={requiredToAddress}>
+          {t('header.sendToWallet')}
+        </CardTitle>
+        <Box display="flex" justifyContent="center" alignItems="center">
           <SendToWalletCardHeader
             avatar={
               <AccountAvatar
@@ -117,11 +131,16 @@ export const SendToWalletButton = () => {
             }
             title={headerTitle}
             subheader={headerSubheader}
-            selected={
-              !!toAddressFieldValue && !(toAddress && disabledToAddress)
+            selected={isSelected}
+            action={
+              isSelected && !disabledForChanges ? (
+                <CardIconButton onClick={clearSelectedBookmark} size="small">
+                  <CloseRounded fontSize="inherit" />
+                </CardIconButton>
+              ) : null
             }
           />
-        </CardRowContainer>
+        </Box>
       </Card>
     </Collapse>
   );

package/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -52,7 +52,8 @@ export const SendToWalletExpandButton: React.FC = () => {
         onClick={handleClick}
         sx={{
           minWidth: 48,
-          marginLeft: 1,
+          width: 48,
+          height: 48,
         }}
       >
         <Wallet />

package/components/SmallAvatar.tsx

@@ -2,15 +2,13 @@ import { Avatar, Box, Skeleton, styled } from '@mui/material';
 
 export const SmallAvatar = styled(Avatar)(({ theme }) => ({
   background: theme.palette.background.paper,
-  width: 20,
-  height: 20,
-  border: `2px solid ${theme.palette.background.paper}`,
+  width: 16,
+  height: 16,
 }));
 
 export const SmallAvatarSkeletonBase = styled(Skeleton)(({ theme }) => ({
-  border: `2px solid ${theme.palette.background.paper}`,
-  width: 20,
-  height: 20,
+  width: 16,
+  height: 16,
 }));
 
 export const SmallAvatarSkeletonContainer = styled(Box)(({ theme }) => ({

package/components/Step/StepProcess.style.tsx

@@ -1,7 +1,8 @@
 import type { IconButtonProps, LinkProps } from '@mui/material';
-import { IconButton, styled } from '@mui/material';
+import { styled } from '@mui/material';
+import { CardIconButton } from '../Card/CardIconButton.js';
 
-export const LinkButton = styled(IconButton)<IconButtonProps & LinkProps>(
+export const LinkButton = styled(CardIconButton)<IconButtonProps & LinkProps>(
   ({ theme }) => ({
     padding: theme.spacing(0.5),
   }),

package/components/StepActions/StepActions.style.tsx

@@ -1,27 +1,14 @@
 import {
-  Avatar,
   Box,
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
   Typography,
+  alpha,
   stepConnectorClasses,
   stepLabelClasses,
   styled,
 } from '@mui/material';
-
-export const StepIcon = styled('span', {
-  shouldForwardProp: (prop) =>
-    !['active', 'completed', 'error'].includes(prop as string),
-})(({ theme }) => ({
-  width: 12,
-  height: 12,
-  borderRadius: '50%',
-  border: `2px solid ${
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800]
-  }`,
-}));
+import { AvatarMasked } from '../Avatar/Avatar.style.js';
 
 export const StepConnector = styled(MuiStepConnector, {
   shouldForwardProp: (prop) =>
@@ -43,10 +30,10 @@ export const StepLabel = styled(MuiStepLabel, {
     !['active', 'completed', 'error', 'disabled'].includes(prop as string),
 })(({ theme }) => ({
   padding: 0,
-  alignItems: 'flex-start',
+  alignItems: 'center',
   [`.${stepLabelClasses.iconContainer}`]: {
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(3),
+    paddingLeft: theme.spacing(1.25),
+    paddingRight: theme.spacing(3.25),
   },
   [`.${stepLabelClasses.labelContainer}`]: {
     minHeight: 24,
@@ -80,7 +67,15 @@ export const StepContent = styled(Box, {
   paddingLeft: last ? theme.spacing(4.625) : theme.spacing(4.375),
 }));
 
-export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
+export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({
   color: theme.palette.text.primary,
   backgroundColor: 'transparent',
 }));
+
+export const IconTypography = styled(Typography)(({ theme }) => ({
+  color:
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.32)
+      : alpha(theme.palette.common.white, 0.4),
+  lineHeight: 0,
+}));

package/components/StepActions/StepActions.tsx

@@ -113,9 +113,7 @@ export const IncludedSteps: React.FC<{
       <SmallAvatar
         src={tool.toolDetails.logoURI}
         alt={tool.toolDetails.name}
-        sx={{
-          boxSizing: 'content-box',
-        }}
+        sx={{ width: 20, height: 20 }}
       >
         {tool.toolDetails.name[0]}
       </SmallAvatar>

package/components/StepActions/StepFeeBreakdown.tsx

@@ -5,6 +5,7 @@ import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
 import { getStepFeeCostsBreakdown } from '../../utils/fees.js';
+import { IconTypography } from './StepActions.style.js';
 
 export const StepFeeBreakdown: React.FC<{
   step: LiFiStepExtended;
@@ -87,9 +88,9 @@ export const StepFeeBreakdown: React.FC<{
   return (
     <Box mt={1.5}>
       <Box display="flex" alignItems="center">
-        <Typography ml={1} mr={3} height={24} color="text.secondary">
+        <IconTypography ml={1} mr={3} height={24}>
           <MonetizationOn />
-        </Typography>
+        </IconTypography>
         <Typography
           fontSize={16}
           color="text.primary"

package/components/Tabs/Tabs.style.tsx

@@ -11,41 +11,32 @@ import { getCardFieldsetBackgroundColor } from '../../utils/colors.js';
 
 export const Tabs = styled(MuiTabs)(({ theme }) => ({
   backgroundColor: getCardFieldsetBackgroundColor(theme),
-  borderRadius: Math.max(
-    theme.shape.borderRadius,
-    theme.shape.borderRadiusSecondary,
-  ),
+  borderRadius: theme.shape.borderRadius,
   padding: theme.spacing(0.5),
   flex: 1,
   [`.${tabsClasses.indicator}`]: {
     height: '100%',
     width: '100%',
-    backgroundColor:
-      theme.palette.mode === 'dark'
-        ? theme.palette.background.default
-        : theme.palette.common.white,
-    borderRadius:
-      Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary) - 4,
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius - 4,
     boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
   },
 }));
 
-export const Tab = styled(MuiTab, {
-  shouldForwardProp: (prop) => prop !== 'isDarkMode',
-})<TabProps>(({ theme }) => ({
+export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
   zIndex: 1,
   flex: 1,
   textTransform: 'none',
   fontSize: '1rem',
   fontWeight: 700,
   color:
-    theme.palette.mode === 'dark'
-      ? theme.palette.common.white
-      : theme.palette.common.black,
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white,
   [`&.${tabClasses.selected}`]: {
     color:
-      theme.palette.mode === 'dark'
-        ? theme.palette.common.white
-        : theme.palette.common.black,
+      theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
   },
 }));

package/components/Token/Token.tsx

@@ -64,6 +64,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
         token={token}
         step={step}
         disableDescription={disableDescription}
+        {...other}
       />
     );
   }
@@ -165,11 +166,6 @@ const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
             <SmallAvatar
               src={step?.toolDetails.logoURI}
               alt={step?.toolDetails.name}
-              sx={{
-                width: 16,
-                height: 16,
-                border: 0,
-              }}
             >
               {step?.toolDetails.name[0]}
             </SmallAvatar>

package/components/TokenList/TokenList.style.tsx

@@ -1,5 +1,6 @@
 import type { IconButtonProps, LinkProps } from '@mui/material';
-import { IconButton as MuiIconButton, alpha, styled } from '@mui/material';
+import { IconButton as MuiIconButton, styled } from '@mui/material';
+import { getContrastAlphaColor } from '../../utils/colors.js';
 import { ListItem as ListItemBase } from '../ListItem/ListItem.js';
 
 export const ListItem = styled(ListItemBase)(({ theme }) => ({
@@ -20,10 +21,7 @@ export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
     minWidth: 'unset',
     borderRadius: '50%',
     '&:hover': {
-      backgroundColor:
-        theme.palette.mode === 'light'
-          ? alpha(theme.palette.common.black, 0.04)
-          : alpha(theme.palette.common.white, 0.08),
+      backgroundColor: getContrastAlphaColor(theme, 0.04),
     },
     svg: {
       fontSize: 14,

package/components/TokenList/TokenList.tsx

@@ -43,10 +43,11 @@ export const TokenList: FC<TokenListProps> = ({
     []) as TokenAmount[];
   const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '');
   const searchFilter = normalizedSearchFilter?.toUpperCase() ?? '';
+
   filteredTokens = tokenSearchFilter
     ? filteredTokens.filter(
         (token) =>
-          token.name.toUpperCase().includes(searchFilter) ||
+          token.name?.toUpperCase().includes(searchFilter) ||
           token.symbol.toUpperCase().includes(searchFilter) ||
           token.address.toUpperCase().includes(searchFilter),
       )

package/components/TokenList/TokenListItem.tsx

@@ -148,7 +148,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
         ) : (
           <Box sx={{ textAlign: 'right' }}>
             {token.amount ? (
-              <Typography variant="body1" noWrap>
+              <Typography fontWeight={600} noWrap>
                 {t('format.number', {
                   value: formatTokenAmount(token.amount, token.decimals),
                 })}

package/components/TokenList/useTokenSelect.ts

@@ -9,7 +9,7 @@ import { WidgetEvent } from '../../types/events.js';
 
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const tokenKey = FormKeyHelper.getTokenKey(formType);
-  const { onChange, onBlur } = useFieldController({ name: tokenKey });
+  const { onChange } = useFieldController({ name: tokenKey });
   const { setFieldValue, getFieldValues } = useFieldActions();
   const { subvariant } = useWidgetConfig();
   const emitter = useWidgetEvents();
@@ -17,7 +17,6 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
       onChange(tokenAddress);
-      onBlur();
       const selectedChainId =
         chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0];
       // Set chain again to trigger URL builder update
@@ -60,7 +59,6 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       emitter,
       formType,
       getFieldValues,
-      onBlur,
       onChange,
       onClick,
       setFieldValue,

package/config/theme.ts

@@ -45,9 +45,9 @@ declare module '@mui/material/Typography' {
 
 const palette = {
   primary: {
-    main: '#3F49E1',
-    light: lighten('#3F49E1', 0.5),
-    dark: darken('#3F49E1', 0.2),
+    main: '#5C67FF',
+    light: lighten('#5C67FF', 0.5),
+    dark: darken('#5C67FF', 0.2),
   },
   secondary: {
     main: '#F5B5FF',
@@ -73,6 +73,9 @@ const palette = {
 };
 
 const paletteLight = {
+  // background: {
+  //   default: '#F5F5F5',
+  // },
   text: {
     primary: '#000000',
     secondary: '#747474',
@@ -87,7 +90,7 @@ const paletteDark = {
 
 const shape = {
   borderRadius: 12,
-  borderRadiusSecondary: 8,
+  borderRadiusSecondary: 12,
 };
 
 const enterKeyframe = keyframes`
@@ -123,6 +126,8 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
     getContrastRatio(palette.common.white, alpha(primaryMainColor, 0.08)) >= 3
       ? palette.common.white
       : palette.common.black;
+  const borderRadiusSecondary =
+    theme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary;
   return createMuiTheme({
     typography: {
       fontFamily: 'Inter var, Inter, sans-serif',
@@ -160,8 +165,8 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
     },
     breakpoints: {
       values: {
-        xs: 0,
-        sm: 392,
+        xs: 360,
+        sm: 416,
         md: 900,
         lg: 1200,
         xl: 1536,
@@ -199,15 +204,15 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
         },
         styleOverrides: {
           root: {
-            borderRadius:
-              theme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary,
+            borderRadius: borderRadiusSecondary,
             textTransform: 'none',
-            fontSize: '1rem',
+            fontSize: 16,
+            fontWeight: 600,
             [`&.Mui-disabled, &.Mui-disabled:hover`]: {
-              color:
-                mode === 'light'
-                  ? alpha(palette.common.black, 0.56)
-                  : alpha(palette.common.white, 0.56),
+              color: alpha(
+                mode === 'light' ? palette.common.black : palette.common.white,
+                0.56,
+              ),
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },
@@ -255,8 +260,17 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
       MuiIconButton: {
         styleOverrides: {
           root: {
+            // backgroundColor: alpha(
+            //   mode === 'light' ? palette.common.black : palette.common.white,
+            //   0.04,
+            // ),
             color: 'inherit',
+            // borderRadius: borderRadiusSecondary,
             '&:hover': {
+              // backgroundColor: alpha(
+              //   mode === 'light' ? palette.common.black : palette.common.white,
+              //   0.08,
+              // ),
               color: 'inherit',
             },
           },
@@ -277,13 +291,13 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
       MuiListItemText: {
         styleOverrides: {
           primary: ({ theme }) => ({
-            fontWeight: '500',
+            fontWeight: 600,
             fontSize: '1.125rem',
             lineHeight: '1.2778',
             color: theme.palette.text.primary,
           }),
           secondary: ({ theme }) => ({
-            fontWeight: '400',
+            fontWeight: 500,
             fontSize: '0.75rem',
             color: theme.palette.text.secondary,
           }),

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.31';
+export const version = '3.0.0-alpha.32';

package/hooks/useToAddressReset.ts

@@ -27,8 +27,8 @@ export const useToAddressReset = () => {
     // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
     // but it keeps toAddress value set for the previous chain pair.
     if (shouldResetToAddress) {
-      setSelectedBookmark();
       setFieldValue('toAddress', '');
+      setSelectedBookmark();
     }
   };
 

package/i18n/en.json

@@ -28,10 +28,7 @@
     "done": "Done",
     "exchange": "Exchange",
     "getGas": "Get gas",
-    "hide": "Hide",
     "learnMore": "Learn more",
-    "lifiCheckout": "LI.FI Checkout",
-    "lifiExchange": "LI.FI Exchange",
     "light": "Light",
     "max": "max",
     "ok": "Ok",
@@ -168,7 +165,6 @@
     },
     "numberOfSteps": "A number of exchange steps. Each step can contain 1-2 transactions that require a signature.",
     "progressToNextUpdate": "Quotes will update in {{value}} seconds. <0/> Click here to update now.",
-    "recommended": "A cheap route that balances complexity and ease of use.",
     "settingsModified": "Settings (modified)",
     "selectAll": "Select all",
     "deselectAll": "Deselect all"
@@ -247,13 +243,11 @@
     "supportId": "Support ID",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {
-      "cheapest": "Cheap",
-      "fastest": "Fast",
+      "cheapest": "Best Return",
+      "fastest": "Fastest",
       "insurable": "Insurable",
       "insurance": "Insurance",
-      "insured": "Insured",
-      "recommended": "Recommended",
-      "safest": "Safe"
+      "insured": "Insured"
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
@@ -280,7 +274,7 @@
     "routePriority": "Route priority",
     "slippage": "Slippage",
     "custom": "Custom",
-    "resetSettings": "You're using custom setting limiting the number of available routes."
+    "resetSettings": "You're using custom settings that can affect the number or sorting of available routes."
   },
   "sendToWallet": {
     "addBookmark": "Add bookmark",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.32",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -35,7 +35,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@lifi/sdk": "^3.0.0-alpha.56",
-    "@lifi/wallet-management": "^3.0.0-alpha.21",
+    "@lifi/wallet-management": "^3.0.0-alpha.22",
     "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.165",
     "@mui/material": "^5.15.10",
@@ -43,21 +43,21 @@
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.26",
     "@solana/web3.js": "^1.90.0",
-    "@tanstack/react-query": "^5.20.5",
-    "@tanstack/react-virtual": "^3.0.4",
-    "i18next": "^23.8.2",
+    "@tanstack/react-query": "^5.22.2",
+    "@tanstack/react-virtual": "^3.1.2",
+    "i18next": "^23.10.0",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
-    "react-intersection-observer": "^9.8.0",
-    "react-router-dom": "^6.22.0",
+    "react-intersection-observer": "^9.8.1",
+    "react-router-dom": "^6.22.1",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.7.9",
+    "viem": "^2.7.13",
     "wagmi": "2.5.7",
-    "zustand": "^4.5.0"
+    "zustand": "^4.5.1"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.17.0",

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -49,6 +49,7 @@ export const ActiveTransactionsPage = () => {
         sx={{
           paddingLeft: 1.5,
           paddingRight: 1.5,
+          paddingBottom: 1.5,
         }}
       >
         {executingRoutes.map((routeId) => (

package/pages/LanguagesPage.tsx

@@ -22,6 +22,7 @@ export const LanguagesPage: React.FC = () => {
         sx={{
           paddingLeft: 1.5,
           paddingRight: 1.5,
+          paddingBottom: 1.5,
         }}
       >
         {availableLanguages.map((language) => (