fix: improve token layout for longer bridge names

lifinance · Sep 29, 2022 · 36c341c · 36c341c
1 parent 292c2db
commit 36c341c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 29 deletions.
diff --git a/packages/widget/src/components/Token/Token.style.tsx b/packages/widget/src/components/Token/Token.style.tsx
@@ -1,13 +1,9 @@
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-export const TextSecondary = styled(Typography, {
+export const TextSecondaryContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'connected',
 })<{ connected?: boolean }>(({ theme, connected }) => ({
-  fontSize: 12,
-  lineHeight: 1,
-  fontWeight: 500,
-  color: theme.palette.text.secondary,
   borderLeftWidth: connected ? 2 : 0,
   borderLeftStyle: 'solid',
   borderColor:
@@ -16,12 +12,23 @@ export const TextSecondary = styled(Typography, {
       : theme.palette.grey[800],
   margin: connected
     ? theme.spacing(0.5, 0, 0, 1.875)
-    : theme.spacing(0.5, 0, 0, 6),
+    : theme.spacing(0, 0, 0, 6),
   padding: connected
     ? theme.spacing(0, 0, 0, 3.875)
     : theme.spacing(0, 0, 0, 0),
   display: 'flex',
   alignItems: 'flex-start',
+  flexWrap: 'wrap',
+}));
+
+export const TextSecondary = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'connected',
+})<{ connected?: boolean }>(({ theme, connected }) => ({
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: 500,
+  color: theme.palette.text.secondary,
+  marginTop: connected ? 0 : theme.spacing(0.5),
 }));
 
 export const TokenDivider = styled(Box)(({ theme }) => ({

diff --git a/packages/widget/src/components/Token/Token.tsx b/packages/widget/src/components/Token/Token.tsx
@@ -8,7 +8,7 @@ import { formatTokenAmount } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
-import { TextSecondary } from './Token.style';
+import { TextSecondary, TextSecondaryContainer } from './Token.style';
 
 export const Token: React.FC<
   { token: TokenAmount; connected?: boolean; step?: Step } & BoxProps
@@ -28,47 +28,50 @@ export const Token: React.FC<
           {formatTokenAmount(token.amount, token.decimals)}
         </TextFitter>
       </Box>
-      <Box display="flex">
+      <TextSecondaryContainer connected={connected} component="span">
         <TextSecondary connected={connected}>
           {t(`swap.tokenOnChain`, {
             tokenSymbol: token.symbol,
             chainName: getChainById(token.chainId)?.name,
           })}
         </TextSecondary>
         {step ? (
-          <Box display="flex" alignItems="flex-end" height={12} mt={0.5}>
+          <>
             <Typography
               fontSize={12}
               lineHeight={1}
               fontWeight={500}
               color="text.secondary"
               px={1}
+              mt={0.5}
             >
               &#x2022;
             </Typography>
-            <Box pr={0.75}>
-              <SmallAvatar
-                src={step.toolDetails.logoURI}
-                alt={step.toolDetails.name}
-                sx={{
-                  border: 0,
-                  marginBottom: -0.25,
-                }}
+            <Box display="flex" alignItems="flex-end" height={12} mt={0.5}>
+              <Box pr={0.75}>
+                <SmallAvatar
+                  src={step.toolDetails.logoURI}
+                  alt={step.toolDetails.name}
+                  sx={{
+                    border: 0,
+                    marginBottom: -0.25,
+                  }}
+                >
+                  {step.toolDetails.name[0]}
+                </SmallAvatar>
+              </Box>
+              <Typography
+                fontSize={12}
+                lineHeight={1}
+                fontWeight={500}
+                color="text.secondary"
               >
-                {step.toolDetails.name[0]}
-              </SmallAvatar>
+                {step.toolDetails.name}
+              </Typography>
             </Box>
-            <Typography
-              fontSize={12}
-              lineHeight={1}
-              fontWeight={500}
-              color="text.secondary"
-            >
-              {step.toolDetails.name}
-            </Typography>
-          </Box>
+          </>
         ) : null}
-      </Box>
+      </TextSecondaryContainer>
     </Box>
   );
 };