diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx index 9bbe9d344..f6230cc4f 100644 --- 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 index 5e6008e10..dfb2f834d 100644 --- 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" /> )} @@ -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,11 +171,16 @@ export function SwapRouteCard({ )} - + {intl.formatMessage({ defaultMessage: 'Rate:' })} - + {isLoading ? ( ) : ( @@ -180,11 +188,16 @@ export function SwapRouteCard({ )} - + {intl.formatMessage({ defaultMessage: 'Gas:' })} - + {isGasLoading ? ( ) : ( diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx index d31b09e80..2651a0a85 100644 --- 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; } & StackProps; export const TokenInput = forwardRef( @@ -60,6 +60,7 @@ export const TokenInput = forwardRef( tokenPriceUsd = 0, isPriceLoading, inputProps, + tokenButtonProps, ...rest }, ref, @@ -90,7 +91,11 @@ export const TokenInput = forwardRef( token={token} onClick={onTokenClick} isDisabled={isTokenClickDisabled} - sx={!isConnected ? { transform: 'translateY(50%)' } : {}} + {...tokenButtonProps} + sx={{ + ...(!isConnected && { transform: 'translateY(50%)' }), + ...tokenButtonProps?.sx, + }} />