fix: style adjustments

packages/widget-embedded/src/index.tsx

@@ -177,7 +177,7 @@ const App = () => {
           anchor="left"
         >
           <Box p={2} flex={1}>
-            <Typography mb={2} variant="h6">
+            <Typography px={1} mb={2} variant="h6">
               Widget Customization
             </Typography>
             <Box px={1} flex={1}>
@@ -188,7 +188,7 @@ const App = () => {
                     onChange={() => setDrawer((drawer) => !drawer)}
                   />
                 }
-                label="Enable drawer"
+                label="Enable drawer view"
               />
             </Box>
             <Box p={1} flex={1}>

packages/widget/src/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -9,6 +9,7 @@ export const IconButton = styled(MuiIconButton)(({ theme }) => ({
       ? theme.palette.grey[300]
       : theme.palette.grey[800],
   zIndex: 1200,
+  padding: theme.spacing(0.5),
   '&:hover': {
     backgroundColor: darken(theme.palette.background.paper, 0.04),
   },

packages/widget/src/components/SelectChainAndToken.tsx

@@ -26,7 +26,7 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
       <SelectTokenButton formType="from" compact={isCompact} />
       <Box
         sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
-        m={-1.125}
+        m={-1.25}
       >
         <ReverseTokensButton vertical={!isCompact} />
       </Box>

packages/widget/src/components/StepActions/StepActions.style.tsx

@@ -40,13 +40,16 @@ export const StepConnector = styled(MuiStepConnector, {
 
 export const StepLabel = styled(MuiStepLabel, {
   shouldForwardProp: (prop) =>
-    !['active', 'completed', 'error'].includes(prop as string),
+    !['active', 'completed', 'error', 'disabled'].includes(prop as string),
 })(({ theme }) => ({
   padding: 0,
   [`.${stepLabelClasses.iconContainer}`]: {
     paddingLeft: theme.spacing(1.25),
     paddingRight: theme.spacing(3.25),
   },
+  [`&.${stepLabelClasses.disabled}`]: {
+    cursor: 'inherit',
+  },
 }));
 
 export const StepContent = styled(MuiStepContent, {

packages/widget/src/components/StepActions/StepActions.tsx

@@ -78,7 +78,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
 export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
   return (
     <Typography
-      fontSize={12}
+      fontSize={14}
       fontWeight="500"
       color="text.secondary"
       alignItems="center"
@@ -104,7 +104,7 @@ export const CrossStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
   const { getChainById } = useChains();
 
   return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
+    <Typography fontSize={14} fontWeight="500" color="text.secondary">
       {t('swap.crossStepDetails', {
         from: getChainById(step.action.fromChainId)?.name,
         to: getChainById(step.action.toChainId)?.name,
@@ -117,7 +117,7 @@ export const CrossStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
 export const SwapStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
   const { t } = useTranslation();
   return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
+    <Typography fontSize={14} fontWeight="500" color="text.secondary">
       {t('swap.swapStepDetails', {
         value: step.toolDetails.name,
       })}

packages/widget/src/pages/SwapPage/StepToken.tsx → packages/widget/src/components/StepToken.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import { TokenAmount } from '@lifinance/sdk';
 import { Avatar, Box, BoxProps, Typography } from '@mui/material';
-import { formatTokenAmount } from '../../utils/format';
+import { formatTokenAmount } from '../utils/format';
 
 export const StepToken: React.FC<{ token: TokenAmount } & BoxProps> = ({
   token,

packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { darken, styled } from '@mui/material/styles';
 
 export const Card = styled(Box, {
   shouldForwardProp: (prop) =>
@@ -24,10 +24,18 @@ export const Card = styled(Box, {
     userSelect: blur ? 'none' : 'auto',
     '&:hover': {
       cursor: blur || !dense ? 'pointer' : 'default',
+      backgroundColor:
+        blur || !dense
+          ? darken(theme.palette.background.paper, 0.02)
+          : theme.palette.background.paper,
     },
     '& > div': {
       filter: blur ? 'blur(3px)' : 'none',
     },
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
   }),
 );
 

packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx

@@ -1,8 +1,8 @@
 import { Check as CheckIcon } from '@mui/icons-material';
-import { Avatar, Box, BoxProps, Typography } from '@mui/material';
+import { Box, BoxProps, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { formatTokenAmount } from '../../utils/format';
 import { StepActions } from '../StepActions';
+import { StepToken } from '../StepToken';
 import { Card, Check, Label } from './SwapRouteCard.style';
 import { SwapRouteCardProps } from './types';
 
@@ -37,21 +37,7 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
           }}
           mb={2}
         >
-          <Avatar
-            src={route.toToken.logoURI}
-            alt={route.toToken.symbol}
-            sx={{ marginRight: 2, marginY: 0.375 }}
-          >
-            {route.toToken.symbol[0]}
-          </Avatar>
-          <Box>
-            <Typography fontSize={32} fontWeight="700" lineHeight="normal">
-              {formatTokenAmount(route.toAmount, route.toToken.decimals)}
-            </Typography>
-            <Typography fontSize={14} color="text.secondary">
-              {route.toToken.symbol}
-            </Typography>
-          </Box>
+          <StepToken token={{ ...route.toToken, amount: route.toAmount }} />
         </Box>
         {!dense
           ? route.steps.map((step) => (

packages/widget/src/components/SwapRoutes/SwapRoutes.tsx

@@ -41,7 +41,7 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
             <Skeleton
               variant="rectangular"
               width="100%"
-              height={194}
+              height={167}
               sx={(theme: Theme) => ({
                 borderRadius:
                   theme.shape.borderRadiusSecondary / theme.shape.borderRadius,

packages/widget/src/i18n/en/translation.json

@@ -7,7 +7,7 @@
     "from": "Swap from",
     "to": "Swap to",
     "settings": "Settings",
-    "routes": "Routes"
+    "routes": "You get"
   },
   "button": {
     "swap": "Swap",

packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx

@@ -9,14 +9,14 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BottomSheet, BottomSheetBase } from '../../components/BottomSheet';
+import { StepToken } from '../../components/StepToken';
 import { RouteExecution, useChains, useTokenBalance } from '../../hooks';
 import { SwapFormKey } from '../../providers/SwapFormProvider';
 import {
   IconCircle,
   IconContainer,
   iconStyles,
 } from './StatusBottomSheet.style';
-import { StepToken } from './StepToken';
 import { Button } from './SwapPage.style';
 import { getProcessMessage } from './utils';
 

packages/widget/src/pages/SwapPage/StepItem.tsx

@@ -4,9 +4,9 @@ import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
+import { StepToken } from '../../components/StepToken';
 import { ExecutionItem } from './ExecutionItem';
 import { StepTimer } from './StepTimer';
-import { StepToken } from './StepToken';
 
 export const StepItem: React.FC<{
   step: Step;