wip: matt's feedback

OriginProtocol · Aug 25, 2023 · cdc39b6 · cdc39b6
1 parent 8223571
commit cdc39b6
Show file tree

Hide file tree

Showing 15 changed files with 75 additions and 98 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,7 +118,8 @@ export function APY({
                 marginInlineStart: 1,
                 alignSelf: 'center',
                 position: 'relative',
-                height: '26px',
+                height: '1rem',
+                width: '1rem',
                 borderRadius: '100%',
                 top: '-2px',
               }}
@@ -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/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx
@@ -51,6 +51,9 @@ export function Input({
         borderEndStartRadius: 0,
         borderEndEndRadius: 0,
         paddingBlock: 2.875,
+        height: '6.6875rem',
+        maxHeight: '6.6875rem',
+        boxSizing: 'border-box',
         '&:hover, &:focus-within': {
           borderColor: 'transparent',
           borderStartStartRadius: (theme) => theme.shape.borderRadius,
@@ -91,8 +94,6 @@ export function Input({
             alignSelf: 'end',
             borderImageWidth: 0,
             boxSizing: 'border-box',
-            position: 'relative',
-            bottom: '-4px',
             '& .MuiInputBase-input': {
               padding: 0,
               lineHeight: '1.5rem',
@@ -114,10 +115,7 @@ 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}
@@ -139,25 +137,27 @@ export function Input({
           )
         ) : 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
+        <Stack
+          component={Typography}
+          direction="row"
+          gap={1}
+          alignItems="center"
+          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),
+            },
+          )}
+          {/* <Box
               component="span"
               sx={{
                 display: 'block',
@@ -169,8 +169,7 @@ export function Input({
             >
               max
             </Box> */}
-          </Stack>
-        ) : undefined}
+        </Stack>
       </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,9 @@ export function Output({
         backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2),
         ...cardStyles,
         paddingBlock: 3.0625,
+        height: '6.6875rem',
+        maxHeight: '6.6875rem',
+        boxSizing: 'border-box',
       }}
     >
       <Box sx={styles}>
@@ -54,7 +57,6 @@ export function Output({
               fontStyle: 'normal',
               fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
               lineHeight: '1.5rem',
-              marginBlockStart: 0.4,
               color: (theme) =>
                 exchangeTokenQuantity === 0
                   ? theme.palette.text.secondary

diff --git a/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx b/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx
@@ -18,16 +18,15 @@ 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,
+        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/utils.ts b/libs/shared/components/src/Cards/SwapCard/utils.ts
@@ -4,5 +4,5 @@ export const styles = {
   alignContent: 'end',
   gap: 2.5,
   gridTemplateColumns: '1fr auto',
-  rowGap: 1,
+  rowGap: 1.5,
 };
diff --git 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/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
@@ -140,6 +140,13 @@ export const theme = extendTheme({
         },
       },
     },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+      },
+    },
     MuiTab: {
       styleOverrides: {
         root: ({ theme }) => ({
@@ -246,11 +253,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',
         }),
       },
     },