fix: matt's feedback

OriginProtocol · Aug 28, 2023 · ed5b5d0 · ed5b5d0
1 parent 9d4fc77
commit ed5b5d0
Show file tree

Hide file tree

Showing 20 changed files with 100 additions and 129 deletions.
diff --git 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
@@ -27,31 +27,34 @@ 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',
               background: (theme) =>
                 `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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) =>