From 722e1953c0d2eb91ac6ea17fac3c4200a8528032 Mon Sep 17 00:00:00 2001
From: dcodes05 <danutcodes@gmail.com>
Date: Fri, 25 Aug 2023 11:17:19 +0200
Subject: [PATCH 1/2] fix: matt's feedback

---
 .../components/Swap/SwapRouteAccordion.tsx    |   1 -
 .../Swap/SwapRouteAccordionItem.tsx           |  35 +++++-----
 .../src/components/Swap/SwapRouteCard.tsx     |   2 +-
 .../src/components/shared/APY.stories.tsx     |   1 -
 libs/defi/oeth/src/components/shared/APY.tsx  |  28 ++------
 libs/defi/oeth/src/views/History.tsx          |   8 +--
 libs/defi/oeth/src/views/Swap.tsx             |   8 +--
 libs/defi/oeth/src/views/Wrap.tsx             |   8 +--
 libs/shared/assets/files/downarrow.png        | Bin 0 -> 438 bytes
 .../components/src/Cards/SwapCard/Input.tsx   |  66 +++++++-----------
 .../components/src/Cards/SwapCard/Output.tsx  |   6 +-
 .../src/Cards/SwapCard/SwapButton.tsx         |   7 +-
 .../src/Cards/SwapCard/SwapCard.tsx           |   8 ++-
 .../src/Cards/SwapCard/SwapItem.tsx           |   1 +
 .../components/src/Cards/SwapCard/utils.ts    |   5 +-
 libs/shared/components/src/Loader/Loader.tsx  |   2 +-
 .../src/top-nav/ConnectedButton.tsx           |   4 +-
 libs/shared/components/src/top-nav/TopNav.tsx |  19 +++--
 libs/shared/components/src/top-nav/utils.ts   |   5 +-
 libs/shared/theme/src/theme.tsx               |  14 +++-
 20 files changed, 100 insertions(+), 128 deletions(-)
 create mode 100644 libs/shared/assets/files/downarrow.png

diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
index 96d6816cc..b6e06e465 100644
--- a/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
+++ b/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
@@ -31,7 +31,6 @@ export function SwapRouteAccordion({ routes, selected, onSelect, sx }: Props) {
           backgroundColor: 'grey.900',
           paddingInline: 2,
           paddingBlock: 1,
-          borderColor: 'grey.800',
         },
 
         ...sx,
diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx
index 2ee3f1c41..a5583d354 100644
--- a/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx
+++ b/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx
@@ -27,23 +27,11 @@ export function SwapRouteAccordionItem({
         borderRadius: 1,
         backgroundColor: 'background.paper',
         border: '1px solid',
+        // @ts-expect-error complains that color is redefined in hover state
         borderColor: 'grey.800',
         paddingInline: 2,
         paddingBlock: 1,
-        ':hover': {
-          borderColor: 'transparent',
-          background: (theme) =>
-            `linear-gradient(${theme.palette.grey[800]}, ${
-              theme.palette.grey[800]
-            }) padding-box,
-              linear-gradient(90deg, ${alpha(
-                theme.palette.primary.main,
-                0.4,
-              )} 0%, ${alpha(
-                theme.palette.primary.dark,
-                0.4,
-              )} 100%) border-box;`,
-        },
+
         ...(selected === index
           ? {
               borderColor: 'transparent',
@@ -51,7 +39,22 @@ export function SwapRouteAccordionItem({
                 `linear-gradient(${theme.palette.grey[800]}, ${theme.palette.grey[800]}) padding-box,
               linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%) border-box;`,
             }
-          : {}),
+          : {
+              ':hover': {
+                borderColor: 'transparent',
+                background: (theme) =>
+                  `linear-gradient(${theme.palette.grey[800]}, ${
+                    theme.palette.grey[800]
+                  }) padding-box,
+              linear-gradient(90deg, ${alpha(
+                theme.palette.primary.main,
+                0.4,
+              )} 0%, ${alpha(
+                theme.palette.primary.dark,
+                0.4,
+              )} 100%) border-box;`,
+              },
+            }),
       }}
       onClick={() => onSelect(index)}
       role="button"
@@ -65,7 +68,7 @@ export function SwapRouteAccordionItem({
         <Stack
           direction="row"
           alignItems="center"
-          gap={2}
+          gap={1}
           sx={{ flex: { xs: '0 0 100%', md: 1 } }}
         >
           <Box
diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteCard.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteCard.tsx
index e5f5ab6e4..e48f40ee7 100644
--- a/libs/defi/oeth/src/components/Swap/SwapRouteCard.tsx
+++ b/libs/defi/oeth/src/components/Swap/SwapRouteCard.tsx
@@ -62,7 +62,7 @@ export function SwapRouteCard({ index, selected, onSelect, route }: Props) {
             <Stack
               direction="row"
               alignItems="center"
-              gap={1}
+              gap={0.5}
               sx={{ position: 'relative' }}
             >
               <Box
diff --git a/libs/defi/oeth/src/components/shared/APY.stories.tsx b/libs/defi/oeth/src/components/shared/APY.stories.tsx
index 28da3a910..bf937dd91 100644
--- a/libs/defi/oeth/src/components/shared/APY.stories.tsx
+++ b/libs/defi/oeth/src/components/shared/APY.stories.tsx
@@ -8,7 +8,6 @@ const meta: Meta<typeof APY> = {
   component: APY,
   title: 'OETH/APY',
   args: {
-    tokenIcon: '	/images/oeth.svg',
     value: 8.71,
     balance: 250.1937,
     pendingYield: 0.0023,
diff --git a/libs/defi/oeth/src/components/shared/APY.tsx b/libs/defi/oeth/src/components/shared/APY.tsx
index 15ef8e6f0..6d820d7f7 100644
--- a/libs/defi/oeth/src/components/shared/APY.tsx
+++ b/libs/defi/oeth/src/components/shared/APY.tsx
@@ -10,26 +10,18 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { Icon } from '@origin/shared/components';
 import { useIntl } from 'react-intl';
 
 const days = [7, 30];
 
 interface Props {
   value: number;
-  tokenIcon: string;
   balance: number;
   pendingYield: number;
   earnings: number;
 }
 
-export function APY({
-  value,
-  tokenIcon,
-  balance,
-  pendingYield,
-  earnings,
-}: Props) {
+export function APY({ value, balance, pendingYield, earnings }: Props) {
   const intl = useIntl();
   const [selectedPeriod, setSelectedPeriod] = useState(30);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -126,12 +118,13 @@ export function APY({
                 marginInlineStart: 1,
                 alignSelf: 'center',
                 position: 'relative',
-                height: '26px',
+                height: '1rem',
+                width: '1rem',
                 borderRadius: '100%',
                 top: '-2px',
               }}
             >
-              <Box component={'img'} src={`/images/downarrow.svg`} />
+              <Box component={'img'} src={`/images/downarrow.png`} />
             </IconButton>
           </Stack>
         </Box>
@@ -147,7 +140,6 @@ export function APY({
           direction="row"
         >
           <ValueContainer
-            icon={tokenIcon}
             text={intl.formatMessage({ defaultMessage: 'OETH Balance' })}
             value={intl.formatNumber(balance, { minimumFractionDigits: 4 })}
           />
@@ -191,7 +183,6 @@ export function APY({
 function ValueContainer({
   text,
   value,
-  icon,
 }: {
   text: string;
   value: string;
@@ -219,17 +210,6 @@ function ValueContainer({
           },
         }}
       >
-        {icon ? (
-          <Icon
-            sx={{
-              width: '0.75rem',
-              height: '0.75rem',
-              marginInlineEnd: 0.5,
-            }}
-            src={icon}
-          />
-        ) : undefined}
-
         {value}
       </Stack>
     </Box>
diff --git a/libs/defi/oeth/src/views/History.tsx b/libs/defi/oeth/src/views/History.tsx
index 3d9ab326e..23f534ce3 100644
--- a/libs/defi/oeth/src/views/History.tsx
+++ b/libs/defi/oeth/src/views/History.tsx
@@ -3,13 +3,7 @@ import { APY, HistoryCard } from '../components';
 export function HistoryView() {
   return (
     <>
-      <APY
-        value={6.71}
-        balance={0}
-        pendingYield={0}
-        earnings={0}
-        tokenIcon="/images/oeth.svg"
-      />
+      <APY value={6.71} balance={0} pendingYield={0} earnings={0} />
       <HistoryCard />
     </>
   );
diff --git a/libs/defi/oeth/src/views/Swap.tsx b/libs/defi/oeth/src/views/Swap.tsx
index 13b0bf7cb..8b5625709 100644
--- a/libs/defi/oeth/src/views/Swap.tsx
+++ b/libs/defi/oeth/src/views/Swap.tsx
@@ -5,13 +5,7 @@ import { APY, Swap } from '../components';
 export function SwapView() {
   return (
     <>
-      <APY
-        value={6.71}
-        balance={0}
-        pendingYield={0}
-        earnings={0}
-        tokenIcon="/images/oeth.svg"
-      />
+      <APY value={6.71} balance={0} pendingYield={0} earnings={0} />
 
       <Stack gap={3} mt={3}>
         <Swap />
diff --git a/libs/defi/oeth/src/views/Wrap.tsx b/libs/defi/oeth/src/views/Wrap.tsx
index e1527e6a2..364480292 100644
--- a/libs/defi/oeth/src/views/Wrap.tsx
+++ b/libs/defi/oeth/src/views/Wrap.tsx
@@ -8,13 +8,7 @@ export function WrapView() {
   const intl = useIntl();
   return (
     <>
-      <APY
-        value={6.71}
-        balance={0}
-        pendingYield={0}
-        earnings={0}
-        tokenIcon="	/images/currency/woeth-icon-small.svg"
-      />
+      <APY value={6.71} balance={0} pendingYield={0} earnings={0} />
 
       <Stack gap={3} mt={3}>
         <Card
diff --git a/libs/shared/assets/files/downarrow.png b/libs/shared/assets/files/downarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..af51d46b72ff6986c2db7fed86030ff5ea1472ae
GIT binary patch
literal 438
zcmV;n0ZIOeP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0ZU0lK~#7Fol`wa
z13?gdyO)c>m^1+^gZ_<hg{|25LGTBpwo73pR{jAS1xXvw9D;?Fg;l^GVkKCZ^UUQg
zy3U+?$+8^bk_W@>?aq5U%)Sw@pp+`pr=r8r+X=;#A`n9SnEApW^14P*#bSh7NX-N^
zxk2Hg7`UPj7Lj_RwgeeEmpPDhyHlX-JXE<~GE-U+6$z{Ki?gIV9HMS#UJl01-Scrb
zPoQM(gb`Z(yTms|9%=pbs(L}BT9$w#?VFBH+z!7<?>_clh{)uthsaN>J6!MB`GOj;
ziMe4?@a?xGFfFOK01Dp_Tc^is?E?=Zi=S}$5v*76C^1I4eLa{w|I+`yC-caufY8=$
z<Q(FrpEP&2-Os&zGUGjSVjatSAtWb`vL=4ve^`owtsL;e93~dqz$(LJLR*`KT+B_z
g)lDcOBF1L^A2%^~e-}I?rvLx|07*qoM6N<$f=phzx&QzG

literal 0
HcmV?d00001

diff --git a/libs/shared/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx
index b0bc3b54b..fa76884d1 100644
--- a/libs/shared/components/src/Cards/SwapCard/Input.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/Input.tsx
@@ -48,13 +48,14 @@ export function Input({
         border: '1px solid',
         borderColor: 'divider',
         borderRadius: 1,
+        borderBottomColor: 'transparent',
         borderEndStartRadius: 0,
         borderEndEndRadius: 0,
         paddingBlock: 2.875,
+        boxSizing: 'border-box',
         '&:hover, &:focus-within': {
           borderColor: 'transparent',
-          borderStartStartRadius: (theme) => theme.shape.borderRadius,
-          borderStartEndRadius: (theme) => theme.shape.borderRadius,
+          borderRadius: 1,
         },
         '&:hover': {
           background: (theme) =>
@@ -80,9 +81,9 @@ export function Input({
         <InputBase
           placeholder="0.00"
           type="numeric"
-          fullWidth
           value={value}
           sx={{
+            flex: 1,
             border: 'none',
             backgroundColor: 'transparent',
             borderRadius: 0,
@@ -91,8 +92,6 @@ export function Input({
             alignSelf: 'end',
             borderImageWidth: 0,
             boxSizing: 'border-box',
-            position: 'relative',
-            bottom: '-4px',
             '& .MuiInputBase-input': {
               padding: 0,
               lineHeight: '1.5rem',
@@ -114,17 +113,16 @@ export function Input({
           }}
           data-testid="swap-input"
         />
-        <Stack
-          flexDirection="row-reverse"
-          sx={baseTokenBalance === undefined ? { gridRow: 'span 2' } : {}}
-        >
+        <Stack flexDirection="row-reverse">
           <SwapItem
             name={baseTokenName}
             icon={baseTokenIcon}
             {...(isSwapped ? { additionalNode: exchangeTokenNode } : {})}
           />
         </Stack>
+      </Box>
 
+      <Box sx={{ ...styles, marginBlockStart: 0.5 }}>
         {baseTokenValue !== undefined ? (
           isLoading ? (
             <Loader width={50} />
@@ -138,39 +136,23 @@ export function Input({
             </Typography>
           )
         ) : undefined}
-
-        {baseTokenBalance ? (
-          <Stack
-            component={Typography}
-            direction="row"
-            gap={1}
-            alignItems="center"
-            color="text.secondary"
-            variant="body1"
-            sx={{
-              justifySelf: 'flex-end',
-              fontWeight: 400,
-              fontStyle: 'normal',
-            }}
-          >
-            {intl.formatMessage(
-              { defaultMessage: 'Balance: {number}' },
-              { number: intl.formatNumber(baseTokenBalance, currencyFormat) },
-            )}
-            {/* <Box
-              component="span"
-              sx={{
-                display: 'block',
-                paddingBlock: 0.25,
-                paddingInline: 0.5,
-                borderRadius: 1,
-                background: (theme) => alpha(theme.palette.common.white, 0.1),
-              }}
-            >
-              max
-            </Box> */}
-          </Stack>
-        ) : undefined}
+        <Typography
+          color="text.secondary"
+          variant="body1"
+          sx={{
+            justifySelf: 'flex-end',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            visibility: baseTokenBalance === undefined ? 'hidden' : 'visible',
+          }}
+        >
+          {intl.formatMessage(
+            { defaultMessage: 'Balance: {number}' },
+            {
+              number: intl.formatNumber(baseTokenBalance || 0, currencyFormat),
+            },
+          )}
+        </Typography>
       </Box>
     </Box>
   );
diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx
index e9f24a3f1..4ea929158 100644
--- a/libs/shared/components/src/Cards/SwapCard/Output.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/Output.tsx
@@ -41,6 +41,7 @@ export function Output({
         backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2),
         ...cardStyles,
         paddingBlock: 3.0625,
+        boxSizing: 'border-box',
       }}
     >
       <Box sx={styles}>
@@ -53,8 +54,9 @@ export function Output({
               fontWeight: 700,
               fontStyle: 'normal',
               fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
+              flex: 1,
+              alignSelf: 'end',
               lineHeight: '1.5rem',
-              marginBlockStart: 0.4,
               color: (theme) =>
                 exchangeTokenQuantity === 0
                   ? theme.palette.text.secondary
@@ -71,7 +73,9 @@ export function Output({
           {...(!isSwapped ? { additionalNode: exchangeTokenNode } : {})}
           sx={{ justifySelf: 'end' }}
         />
+      </Box>
 
+      <Box sx={{ ...styles, marginBlockStart: 0.5 }}>
         {exchangeTokenValue !== undefined ? (
           isLoading ? (
             <Loader width={28} />
diff --git a/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx b/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx
index 2aee2c706..01f350130 100644
--- a/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx
@@ -18,16 +18,17 @@ export function SwapButton({ onClick, sx, ...rest }: Props) {
         zIndex: 2,
         width: { md: '3rem', xs: '2rem' },
         height: { md: '3rem', xs: '2rem' },
-        fill: (theme) => theme.palette.background.paper,
         strokeWidth: (theme) => theme.typography.pxToRem(2),
         stroke: (theme) => theme.palette.grey[700],
         transform: { xs: 'translateY(-20%)', md: 'translateY(-8%)' },
-        backgroundColor: (theme) => theme.palette.divider,
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: (theme) => theme.palette.background.paper,
         '& img': {
           transition: (theme) => theme.transitions.create('transform'),
         },
         '&:hover': {
-          backgroundColor: (theme) => theme.palette.background.default,
+          backgroundColor: (theme) => theme.palette.background.paper,
           '& img': {
             transform: 'rotate(-180deg)',
           },
diff --git a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
index bc2e2a65e..13e3ff0c9 100644
--- a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
@@ -59,7 +59,13 @@ export function SwapCard({
 }: Props) {
   const [isSwapped, setSwapState] = useState(false);
   return (
-    <Card title={title} sxCardTitle={{ padding: { xs: 2, md: 3 } }}>
+    <Card
+      title={title}
+      sxCardTitle={{
+        paddingInline: { xs: 2, md: 3 },
+        paddingBlock: 2.271,
+      }}
+    >
       <Box
         sx={{
           borderRadius: 1,
diff --git a/libs/shared/components/src/Cards/SwapCard/SwapItem.tsx b/libs/shared/components/src/Cards/SwapCard/SwapItem.tsx
index a24a8222d..a38ae85b9 100644
--- a/libs/shared/components/src/Cards/SwapCard/SwapItem.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/SwapItem.tsx
@@ -31,6 +31,7 @@ export function SwapItem({ icon, name, additionalNode: Component, sx }: Props) {
         fontStyle: 'normal',
         cursor: 'pointer',
         fontWeight: 500,
+        boxSizing: 'border-box',
         position: 'relative',
         ':hover': {
           background: (theme) =>
diff --git a/libs/shared/components/src/Cards/SwapCard/utils.ts b/libs/shared/components/src/Cards/SwapCard/utils.ts
index 92cfa08ae..f9ac34f1a 100644
--- a/libs/shared/components/src/Cards/SwapCard/utils.ts
+++ b/libs/shared/components/src/Cards/SwapCard/utils.ts
@@ -1,8 +1,5 @@
 export const styles = {
-  display: 'grid',
+  display: 'flex',
   justifyContent: 'space-between',
-  alignContent: 'end',
   gap: 2.5,
-  gridTemplateColumns: '1fr auto',
-  rowGap: 1,
 };
diff --git a/libs/shared/components/src/Loader/Loader.tsx b/libs/shared/components/src/Loader/Loader.tsx
index cc5dedb7c..caf8ea37a 100644
--- a/libs/shared/components/src/Loader/Loader.tsx
+++ b/libs/shared/components/src/Loader/Loader.tsx
@@ -8,7 +8,7 @@ export function Loader({ sx, ...rest }: Props) {
   return (
     <Skeleton
       sx={{ backgroundColor: 'grey.900', borderRadius: 22, ...sx }}
-      variant="text"
+      variant="rectangular"
       animation="wave"
       {...rest}
     />
diff --git a/libs/shared/components/src/top-nav/ConnectedButton.tsx b/libs/shared/components/src/top-nav/ConnectedButton.tsx
index a8d215e4d..c7c4b2a3d 100644
--- a/libs/shared/components/src/top-nav/ConnectedButton.tsx
+++ b/libs/shared/components/src/top-nav/ConnectedButton.tsx
@@ -101,7 +101,7 @@ export function ConnectedButton({
               sx={{
                 borderRadius: 7,
                 paddingInline: 2.375,
-                paddingBlock: 0.5,
+                paddingBlock: 1.25,
                 fontSize: '0.75rem',
                 lineHeight: '0.75rem',
                 '&:hover': {
@@ -166,7 +166,7 @@ export function ConnectButton({ connected, ...rest }: ConnectButtonProps) {
           display: 'flex',
           alignItems: 'center',
           paddingInline: { xs: 1, sm: 3 },
-          paddingBlock: 1,
+          paddingInlineStart: { xs: 1, sm: connected ? 1 : 3 },
           borderRadius: 25,
           background: (theme) =>
             connected
diff --git a/libs/shared/components/src/top-nav/TopNav.tsx b/libs/shared/components/src/top-nav/TopNav.tsx
index 48b957740..b5b8d7c57 100644
--- a/libs/shared/components/src/top-nav/TopNav.tsx
+++ b/libs/shared/components/src/top-nav/TopNav.tsx
@@ -7,6 +7,7 @@ import {
   Link as MuiLink,
   Tab,
   Tabs,
+  useMediaQuery,
   useTheme,
 } from '@mui/material';
 import { useIntl } from 'react-intl';
@@ -38,6 +39,7 @@ export function TopNav({
   ...rest
 }: Props) {
   const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down('md'));
   const intl = useIntl();
   const [value, setValue] = useState(selected);
   return (
@@ -62,10 +64,6 @@ export function TopNav({
           xs: '1fr 1fr',
           md: 'auto 1fr auto',
         },
-        rowGap: {
-          xs: 1.5,
-          md: 0,
-        },
         ...sx,
       }}
     >
@@ -100,6 +98,10 @@ export function TopNav({
             xs: 'span 2',
             md: 'span 1',
           },
+          marginBlockStart: {
+            xs: 4,
+            md: 0,
+          },
           backgroundColor: 'transparent',
           minHeight: 0,
           overflow: 'visible',
@@ -159,8 +161,9 @@ export function TopNav({
         sx={{
           display: 'flex',
           justifyContent: 'flex-end',
+          alignItems: 'stretch',
           gap: { xs: 1, md: 2 },
-          '& > a': {
+          '& > a, & > *': {
             fontSize: {
               xs: '0.75rem',
               md: '1rem',
@@ -196,7 +199,7 @@ export function TopNav({
             },
           }}
         >
-          {theme.breakpoints.down('md')
+          {isSmall
             ? intl.formatMessage({ defaultMessage: 'IPFS' })
             : intl.formatMessage({ defaultMessage: 'View on IPFS' })}
         </MuiLink>
@@ -222,7 +225,9 @@ export function TopNav({
           gridRowStart: 1,
           borderColor: 'background.paper',
           position: 'relative',
-          bottom: '-4rem',
+          width: 'calc(100% + 1.5rem)',
+          bottom: '-3.75rem',
+          left: '-0.75rem',
         }}
       />
     </Box>
diff --git a/libs/shared/components/src/top-nav/utils.ts b/libs/shared/components/src/top-nav/utils.ts
index 67eb42df6..ab7a6de0c 100644
--- a/libs/shared/components/src/top-nav/utils.ts
+++ b/libs/shared/components/src/top-nav/utils.ts
@@ -5,10 +5,11 @@ import type { SxProps, Theme } from '@mui/material';
 export const styles: SxProps<Theme> = {
   backgroundColor: 'background.paper',
   borderRadius: 25,
-  paddingBlock: 1,
+  paddingBlock: 0.75,
   paddingInline: { xs: 2, md: 3 },
   color: 'primary.contrastText',
-  boxShadow: (theme) => theme.shadows['24'],
+  boxSizing: 'border-box',
+  lineHeight: '1rem',
 };
 
 export const messages = {
diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
index f58554f2a..ca09d8ae1 100644
--- a/libs/shared/theme/src/theme.tsx
+++ b/libs/shared/theme/src/theme.tsx
@@ -112,6 +112,13 @@ export const theme = extendTheme({
         },
       },
     },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+      },
+    },
     MuiTab: {
       styleOverrides: {
         root: ({ theme }) => ({
@@ -132,6 +139,10 @@ export const theme = extendTheme({
       styleOverrides: {
         indicator: ({ theme }) => ({
           background: theme.palette.background.gradient2,
+          transition: theme.transitions.create('all', {
+            duration: theme.transitions.duration.shortest,
+            easing: theme.transitions.easing.easeInOut,
+          }),
         }),
       },
     },
@@ -218,11 +229,12 @@ export const theme = extendTheme({
           borderRadius: theme.shape.borderRadius,
           backgroundColor: theme.palette.grey[900],
           border: '1px solid',
-          borderColor: alpha(theme.palette.grey[200], 0.2),
+          borderColor: theme.palette.grey[800],
           boxShadow: 'none',
           '&:before': {
             height: 0,
           },
+          backgroundImage: 'none',
         }),
       },
     },

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 2/2] 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: {