From 35322d9667b8eca99da489e7e43c78ac9e05d4a5 Mon Sep 17 00:00:00 2001
From: dcodes05 <danutcodes@gmail.com>
Date: Mon, 4 Sep 2023 20:17:33 +0200
Subject: [PATCH] style: minor changes around input, output, top nav and apy
 cards

---
 .../oeth/src/components/Swap/GasPopover.tsx   |  8 +++++---
 libs/defi/oeth/src/components/Swap/Swap.tsx   |  6 ++++++
 .../oeth/src/components/Swap/SwapRoute.tsx    |  1 +
 libs/defi/oeth/src/components/shared/APY.tsx  | 10 +++++-----
 .../src/Cards/SwapCard/ActionButton.tsx       |  2 +-
 .../components/src/Cards/SwapCard/Input.tsx   | 20 +++++++++++--------
 .../components/src/Cards/SwapCard/Output.tsx  | 20 +++++++++++--------
 .../src/Cards/SwapCard/SwapCard.tsx           |  4 +++-
 libs/shared/components/src/top-nav/TopNav.tsx |  8 +++++---
 libs/shared/components/tsconfig.lib.json      |  3 ++-
 libs/shared/theme/src/theme.tsx               |  1 +
 11 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/libs/defi/oeth/src/components/Swap/GasPopover.tsx b/libs/defi/oeth/src/components/Swap/GasPopover.tsx
index fce1c7045..c6a2a84b3 100644
--- a/libs/defi/oeth/src/components/Swap/GasPopover.tsx
+++ b/libs/defi/oeth/src/components/Swap/GasPopover.tsx
@@ -18,13 +18,13 @@ import {
 import { isNumber } from 'lodash';
 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',
@@ -33,9 +33,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);
@@ -49,6 +50,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
index 381ce677e..fed9da5ad 100644
--- a/libs/defi/oeth/src/components/Swap/Swap.tsx
+++ b/libs/defi/oeth/src/components/Swap/Swap.tsx
@@ -13,6 +13,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() {
@@ -87,6 +88,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
index 853e896b7..f799228c7 100644
--- 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
index 6d820d7f7..87bb7571a 100644
--- 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
index 8f6d0b399..ad7f7b27d 100644
--- 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
index fa76884d1..48d66cceb 100644
--- 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,11 +116,12 @@ 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} />
@@ -130,7 +129,11 @@ export function Input({
             <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
index 4ea929158..cca386040 100644
--- 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
index 13e3ff0c9..51b564e3d 100644
--- 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
index b5b8d7c57..34d5814f9 100644
--- 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/components/tsconfig.lib.json b/libs/shared/components/tsconfig.lib.json
index a9c281594..a4fb2f5cd 100644
--- a/libs/shared/components/tsconfig.lib.json
+++ b/libs/shared/components/tsconfig.lib.json
@@ -6,7 +6,8 @@
   },
   "files": [
     "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../../node_modules/@nx/react/typings/image.d.ts"
+    "../../../node_modules/@nx/react/typings/image.d.ts",
+    "../theme/src/theme.d.ts"
   ],
   "exclude": [
     "**/*.spec.ts",
diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
index ca09d8ae1..f987703e7 100644
--- 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: {