Minor UI tweaks (wormhole-foundation#2626)

* spacing tweak * dimmer color for "Balance" * remove colons * remove padding around history button * fix incorrect font
wormholelabs-xyz · Sep 17, 2024 · 1213070 · 1213070
1 parent de0f0bc
commit 1213070
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/wormhole-connect/src/theme.ts b/wormhole-connect/src/theme.ts
@@ -68,10 +68,7 @@ export type WormholeConnectPartialTheme = {
   modal?: {
     background: string;
   };
-  font?: {
-    primary: string;
-    header: string;
-  };
+  font?: string;
   logo?: string;
 };
 
@@ -149,10 +146,7 @@ export const light: WormholeConnectTheme = {
   modal: {
     background: '#ffffff',
   },
-  font: {
-    primary: '"Inter", sans-serif',
-    header: '"IBM Plex Mono", monospace',
-  },
+  font: '"Inter", sans-serif',
   logo: '#000000',
 };
 
@@ -299,10 +293,7 @@ export const dark: WormholeConnectTheme = {
   modal: {
     background: '#181a2d',
   },
-  font: {
-    primary: '"Inter", sans-serif',
-    header: '"Inter", sans-serif',
-  },
+  font: '"Inter", sans-serif',
   logo: '#ffffff',
 };
 
@@ -336,6 +327,9 @@ export const getDesignTokens = (customTheme: WormholeConnectPartialTheme) => {
         xl: 1200,
       },
     },
+    typography: {
+      fontFamily: customTheme.font ?? '"Inter", sans-serif',
+    },
     palette: {
       ...theme,
     },

diff --git a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx
@@ -87,6 +87,9 @@ const useStyles = makeStyles()((theme) => ({
   inputError: {
     marginTop: '12px',
   },
+  balance: {
+    color: theme.palette.text.secondary,
+  },
 }));
 
 type Props = {
@@ -162,13 +165,22 @@ const AmountInput = (props: Props) => {
 
     return (
       <Stack direction="row" alignItems="center">
-        <Typography fontSize={14} textAlign="right" sx={{ marginRight: '4px' }}>
+        <Typography
+          fontSize={14}
+          textAlign="right"
+          sx={{ marginRight: '4px' }}
+          className={classes.balance}
+        >
           Balance:
         </Typography>
         {isFetching ? (
           <CircularProgress size={14} />
         ) : (
-          <Typography fontSize={14} textAlign="right">
+          <Typography
+            fontSize={14}
+            textAlign="right"
+            className={classes.balance}
+          >
             {tokenBalance}
           </Typography>
         )}
@@ -199,7 +211,7 @@ const AmountInput = (props: Props) => {
   return (
     <div className={classes.amountContainer}>
       <div className={classes.amountTitle}>
-        <Typography variant="body2">Amount:</Typography>
+        <Typography variant="body2">Amount</Typography>
       </div>
       <Card variant="elevation">
         <CardContent className={classes.amountCardContent}>

diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
@@ -38,13 +38,15 @@ const useStyles = makeStyles()((theme: any) => ({
     height: '14px',
     position: 'relative',
     top: '2px',
+    marginRight: '4px',
     fill: theme.palette.primary.main,
   },
   cheapestBadge: {
     width: '12px',
     height: '12px',
     position: 'relative',
     top: '1px',
+    marginRight: '3px',
     fill: theme.palette.primary.main,
   },
 }));

diff --git a/wormhole-connect/src/views/v2/Bridge/index.tsx b/wormhole-connect/src/views/v2/Bridge/index.tsx
@@ -271,7 +271,7 @@ const Bridge = () => {
     return (
       <div className={classes.assetPickerContainer}>
         <div className={classes.assetPickerTitle}>
-          <Typography variant="body2">From:</Typography>
+          <Typography variant="body2">From</Typography>
           <WalletController type={TransferWallet.SENDING} />
         </div>
         <AssetPicker
@@ -306,7 +306,7 @@ const Bridge = () => {
     return (
       <div className={classes.assetPickerContainer}>
         <div className={classes.assetPickerTitle}>
-          <Typography variant="body2">To:</Typography>
+          <Typography variant="body2">To</Typography>
           <WalletController type={TransferWallet.RECEIVING} />
         </div>
         <AssetPicker
@@ -347,6 +347,7 @@ const Bridge = () => {
         >
           <div>
             <IconButton
+              sx={{ padding: 0 }}
               disabled={isTxHistoryDisabled}
               onClick={() => dispatch(setAppRoute('history'))}
             >