feat: spacing and positionning on Swap and Redeem

OriginProtocol · Sep 27, 2023 · 9f490d5 · 9f490d5
1 parent a167646
commit 9f490d5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -116,6 +116,7 @@ function RedeemViewWrapped() {
           isConnected={isConnected}
           isAmountDisabled={amountInInputDisabled}
           inputProps={{ sx: tokenInputStyles }}
+          tokenButtonProps={{ sx: { minWidth: 0, maxWidth: 120 } }}
           sx={{
             paddingBlock: 2.5,
             paddingBlockStart: 2.625,
@@ -124,7 +125,6 @@ function RedeemViewWrapped() {
             borderColor: 'divider',
             borderRadius: 1,
             backgroundColor: 'grey.900',
-            borderBottomColor: 'transparent',
             '&:hover, &:focus-within': {
               borderColor: 'transparent',
             },

diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -118,7 +118,9 @@ export function SwapRouteCard({
                   src={tokens.mainnet.OETH.icon}
                   height={16}
                   width={16}
-                  mr={0.5}
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
                 />
               )}
             </Grid2>
@@ -150,7 +152,8 @@ export function SwapRouteCard({
                   fontSize: (theme) => theme.typography.pxToRem(12),
                   top: (theme) => theme.spacing(-3),
                   right: (theme) => theme.spacing(-1.25),
-                  paddingInline: 1,
+                  px: 1,
+                  pt: 0.25,
                 }}
               >
                 {intl.formatMessage({ defaultMessage: 'Best' })}
@@ -168,23 +171,33 @@ export function SwapRouteCard({
         )}
       </Typography>
       <Stack gap={0.5}>
-        <Stack direction="row" gap={1} justifyContent="space-between">
+        <Stack
+          direction="row"
+          gap={1}
+          alignItems="center"
+          justifyContent="space-between"
+        >
           <Typography variant="body2" color="text.secondary">
             {intl.formatMessage({ defaultMessage: 'Rate:' })}
           </Typography>
-          <Typography fontWeight={500}>
+          <Typography variant="body2" fontWeight={500}>
             {isLoading ? (
               <Skeleton width={60} />
             ) : (
               `1:${intl.formatNumber(route.rate, quantityFormat)}`
             )}
           </Typography>
         </Stack>
-        <Stack direction="row" gap={1} justifyContent="space-between">
+        <Stack
+          direction="row"
+          gap={1}
+          alignItems="center"
+          justifyContent="space-between"
+        >
           <Typography variant="body2" color="text.secondary">
             {intl.formatMessage({ defaultMessage: 'Gas:' })}
           </Typography>
-          <Typography fontWeight={500}>
+          <Typography variant="body2" fontWeight={500}>
             {isGasLoading ? (
               <Skeleton width={60} />
             ) : (

diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -37,7 +37,7 @@ export type TokenInputProps = {
     BigintInputProps,
     'value' | 'decimals' | 'onChange' | 'isLoading' | 'isError'
   >;
-  tokenButtonProps?: TokenButtonProps;
+  tokenButtonProps?: Omit<TokenButtonProps, 'token'>;
 } & StackProps;
 
 export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
@@ -60,6 +60,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       tokenPriceUsd = 0,
       isPriceLoading,
       inputProps,
+      tokenButtonProps,
       ...rest
     },
     ref,
@@ -90,7 +91,11 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
             token={token}
             onClick={onTokenClick}
             isDisabled={isTokenClickDisabled}
-            sx={!isConnected ? { transform: 'translateY(50%)' } : {}}
+            {...tokenButtonProps}
+            sx={{
+              ...(!isConnected && { transform: 'translateY(50%)' }),
+              ...tokenButtonProps?.sx,
+            }}
           />
         </Box>
         <Box