style: minor changes around input, output, top nav and apy cards

Conflicts: libs/shared/components/tsconfig.lib.json
OriginProtocol · Sep 5, 2023 · e2a2efa · e2a2efa
1 parent c1e79e1
commit e2a2efa
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 29 deletions.
diff --git a/libs/defi/oeth/src/components/Swap/GasPopover.tsx b/libs/defi/oeth/src/components/Swap/GasPopover.tsx
@@ -17,13 +17,13 @@ import {
 } from '@mui/material';
 import { useIntl } from 'react-intl';
 
-import type { Theme } from '@mui/material';
+import type { SxProps } from '@mui/material';
 
 const defaultPriceTolerance = 0.01;
 
 const gridStyles = {
   display: 'grid',
-  gridTemplateColumns: (theme: Theme) => `1.5fr 1fr`,
+  gridTemplateColumns: `1.5fr 1fr`,
   gap: 1,
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -32,9 +32,10 @@ const gridStyles = {
 interface Props {
   gasPrice: number;
   onPriceToleranceChange: (value: number) => void;
+  sx?: SxProps;
 }
 
-export function GasPopover({ gasPrice, onPriceToleranceChange }: Props) {
+export function GasPopover({ gasPrice, onPriceToleranceChange, sx }: Props) {
   const theme = useTheme();
   const intl = useIntl();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -48,6 +49,7 @@ export function GasPopover({ gasPrice, onPriceToleranceChange }: Props) {
       <IconButton
         onClick={(e) => setAnchorEl(e.currentTarget)}
         data-testid="gas-popover-button"
+        sx={{ ...sx }}
       >
         <img src="/images/settings-icon.svg" />
       </IconButton>

diff --git a/libs/defi/oeth/src/components/Swap/Swap.tsx b/libs/defi/oeth/src/components/Swap/Swap.tsx
@@ -12,6 +12,7 @@ import { useIntl } from 'react-intl';
 import { GasPopover } from './GasPopover';
 import { SwapRoute } from './SwapRoute';
 
+import type { Theme } from '@mui/material';
 import type { Option } from '@origin/shared/components';
 
 export function Swap() {
@@ -84,6 +85,11 @@ export function Swap() {
             <GasPopover
               gasPrice={21}
               onPriceToleranceChange={(tolerance) => null}
+              // @ts-expect-error type mistmatch
+              sx={{
+                position: 'relative',
+                right: (theme: Theme) => theme.spacing(-0.75),
+              }}
             />
           </Stack>
         }

diff --git a/libs/defi/oeth/src/components/Swap/SwapRoute.tsx b/libs/defi/oeth/src/components/Swap/SwapRoute.tsx
@@ -42,6 +42,7 @@ export function SwapRoute({ isLoading = false, routes }: Props) {
         border: '1px solid',
         borderColor: (theme) => theme.palette.background.default,
         backgroundColor: 'grey.900',
+        borderRadius: 1,
       }}
       title={
         isLoading ? (

diff --git a/libs/defi/oeth/src/components/shared/APY.tsx b/libs/defi/oeth/src/components/shared/APY.tsx
@@ -58,7 +58,7 @@ export function APY({ value, balance, pendingYield, earnings }: Props) {
       <Stack
         direction="row"
         flexWrap="wrap"
-        gap={{ xs: 1, md: 2 }}
+        gap={{ xs: 1, md: 1.75 }}
         sx={{ width: '100%' }}
       >
         <Box
@@ -70,10 +70,11 @@ export function APY({ value, balance, pendingYield, earnings }: Props) {
             borderColor: 'grey.800',
             flexBasis: {
               xs: '100%',
-              md: '25%',
+              md: '9.4rem',
             },
             display: 'grid',
             placeContent: 'center',
+            boxSizing: 'border-box',
           }}
         >
           <Typography
@@ -110,7 +111,6 @@ export function APY({ value, balance, pendingYield, earnings }: Props) {
               })}
             </Typography>
             <IconButton
-              disableRipple
               onClick={(e) => setAnchorEl(e.currentTarget)}
               sx={{
                 backgroundColor: (theme) =>
@@ -145,7 +145,7 @@ export function APY({ value, balance, pendingYield, earnings }: Props) {
           />
           <Box
             sx={{
-              flex: { xs: 0.5, md: 1 },
+              flex: { xs: 0.5, md: 0.25 },
               display: 'flex',
               justifyContent: 'center',
               paddingBlock: 0.75,
@@ -162,7 +162,7 @@ export function APY({ value, balance, pendingYield, earnings }: Props) {
           />
           <Box
             sx={{
-              flex: { xs: 0.5, md: 1 },
+              flex: { xs: 0.5, md: 0.25 },
               display: 'flex',
               justifyContent: 'center',
               paddingBlock: 0.75,

diff --git a/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx b/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx
@@ -16,7 +16,7 @@ export function ActionButton({ sx, children, ...rest }: Props) {
         lineHeight: '2rem',
         borderRadius: 2,
         fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
-        fontWeight: 400,
+        fontWeight: 500,
         fontStyle: 'normal',
         boxShadow: (theme) => theme.shadows[24],
         '&:hover': {

diff --git a/libs/shared/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx
@@ -49,13 +49,11 @@ export function Input({
         borderColor: 'divider',
         borderRadius: 1,
         borderBottomColor: 'transparent',
-        borderEndStartRadius: 0,
-        borderEndEndRadius: 0,
-        paddingBlock: 2.875,
-        boxSizing: 'border-box',
+        boxShadow: 'none',
+        paddingBlock: 2.5,
+        paddingBlockEnd: 2.625,
         '&:hover, &:focus-within': {
           borderColor: 'transparent',
-          borderRadius: 1,
         },
         '&:hover': {
           background: (theme) =>
@@ -94,7 +92,7 @@ export function Input({
             boxSizing: 'border-box',
             '& .MuiInputBase-input': {
               padding: 0,
-              lineHeight: '1.5rem',
+              lineHeight: '1.875rem',
               boxSizing: 'border-box',
               fontStyle: 'normal',
               fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
@@ -118,19 +116,24 @@ export function Input({
             name={baseTokenName}
             icon={baseTokenIcon}
             {...(isSwapped ? { additionalNode: exchangeTokenNode } : {})}
+            sx={!baseTokenBalance ? { transform: 'translateY(50%)' } : {}}
           />
         </Stack>
       </Box>
 
-      <Box sx={{ ...styles, marginBlockStart: 0.5 }}>
+      <Box sx={{ ...styles, marginBlockStart: 1 }}>
         {baseTokenValue !== undefined ? (
           isLoading ? (
             <Loader width={50} />
           ) : (
             <Typography
               color="text.secondary"
               variant="body1"
-              sx={{ fontWeight: 400, fontStyle: 'normal' }}
+              sx={{
+                fontWeight: 400,
+                fontStyle: 'normal',
+                lineHeight: '1.5rem',
+              }}
             >
               {intl.formatNumber(baseTokenValue, currencyFormat)}
             </Typography>
@@ -144,6 +147,7 @@ export function Input({
             fontWeight: 400,
             fontStyle: 'normal',
             visibility: baseTokenBalance === undefined ? 'hidden' : 'visible',
+            lineHeight: '1.5rem',
           }}
         >
           {intl.formatMessage(

diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx
@@ -34,14 +34,15 @@ export function Output({
       sx={{
         border: '1px solid',
         borderColor: 'divider',
-        borderTop: 0,
+        borderTopColor: 'transparent',
         borderRadius: 1,
         borderStartStartRadius: 0,
         borderStartEndRadius: 0,
         backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2),
         ...cardStyles,
-        paddingBlock: 3.0625,
-        boxSizing: 'border-box',
+        paddingBlock: 2.5,
+        paddingBlockEnd: 2.625,
+        boxShadow: 'none',
       }}
     >
       <Box sx={styles}>
@@ -56,7 +57,7 @@ export function Output({
               fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
               flex: 1,
               alignSelf: 'end',
-              lineHeight: '1.5rem',
+              lineHeight: '1.875rem',
               color: (theme) =>
                 exchangeTokenQuantity === 0
                   ? theme.palette.text.secondary
@@ -71,16 +72,19 @@ export function Output({
           name={exchangeTokenName}
           icon={exchangeTokenIcon}
           {...(!isSwapped ? { additionalNode: exchangeTokenNode } : {})}
-          sx={{ justifySelf: 'end' }}
+          sx={{
+            justifySelf: 'end',
+            ...(!exchangeTokenBalance ? { transform: 'translateY(50%)' } : {}),
+          }}
         />
       </Box>
 
-      <Box sx={{ ...styles, marginBlockStart: 0.5 }}>
+      <Box sx={{ ...styles, marginBlockStart: 1 }}>
         {exchangeTokenValue !== undefined ? (
           isLoading ? (
             <Loader width={28} />
           ) : (
-            <Typography variant="body1" color="grey.200" lineHeight="1.3129rem">
+            <Typography variant="body1" color="grey.200" lineHeight="1.5rem">
               {intl.formatNumber(exchangeTokenValue, currencyFormat)}
             </Typography>
           )
@@ -95,7 +99,7 @@ export function Output({
               }}
               variant="body1"
               color="grey.200"
-              lineHeight="1.3129rem"
+              lineHeight="1.5rem"
             >
               {intl.formatMessage(
                 { defaultMessage: 'Balance: {number}' },

diff --git a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
@@ -62,8 +62,10 @@ export function SwapCard({
     <Card
       title={title}
       sxCardTitle={{
+        padding: 0,
         paddingInline: { xs: 2, md: 3 },
-        paddingBlock: 2.271,
+        paddingTop: 1.438,
+        paddingBottom: 1.438,
       }}
     >
       <Box

diff --git a/libs/shared/components/src/top-nav/TopNav.tsx b/libs/shared/components/src/top-nav/TopNav.tsx
@@ -47,8 +47,10 @@ export function TopNav({
       component="nav"
       sx={{
         display: 'grid',
-        borderBlockEnd: { xs: 'none', md: '1px solid' },
-        borderColor: 'background.paper',
+        borderBlockEnd: {
+          xs: 'none',
+          md: '1px solid var(--mui-palette-background-paper)',
+        },
         gap: { xs: 1, md: 10 },
         alignItems: 'center',
         backgroundColor: 'divider',
@@ -223,7 +225,7 @@ export function TopNav({
           display: { xs: 'block', md: 'none' },
           gridColumn: 'span 2',
           gridRowStart: 1,
-          borderColor: 'background.paper',
+          borderColor: (theme) => theme.palette.background.paper,
           position: 'relative',
           width: 'calc(100% + 1.5rem)',
           bottom: '-3.75rem',

diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
@@ -65,6 +65,7 @@ export const theme = extendTheme({
       fontSize: '0.75rem',
       fontWeight: 400,
       lineHeight: '1.25rem',
+      fontStyle: 'normal',
     },
   },
   shape: {