fix: styles based on matt's feedback and style the tokeninput component

OriginProtocol · Sep 6, 2023 · 163abec · 163abec
1 parent 47bb19a
commit 163abec
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 119 deletions.
diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
@@ -7,6 +7,7 @@ import {
   Link as MuiLink,
   Tab,
   Tabs,
+  useMediaQuery,
   useTheme,
 } from '@mui/material';
 import { OpenAccountModalButton } from '@origin/shared/providers';
@@ -17,6 +18,7 @@ import type { BoxProps } from '@mui/material';
 
 export function Topnav(props: BoxProps) {
   const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down('md'));
   const intl = useIntl();
   const [value, setValue] = useState(0);
 
@@ -164,6 +166,8 @@ export function Topnav(props: BoxProps) {
           href="https://oeth.on.fleek.co/"
           target="_blank"
           sx={{
+            borderRadius: 25,
+            paddingBlock: 0.75,
             display: 'grid',
             placeContent: 'center',
             paddingInline: {
@@ -183,9 +187,12 @@ export function Topnav(props: BoxProps) {
               background: (theme) => theme.palette.background.paper,
               backgroundImage: 'none',
             },
+            color: 'primary.contrastText',
+            boxSizing: 'border-box',
+            lineHeight: '1rem',
           }}
         >
-          {theme.breakpoints.down('md')
+          {isSmall
             ? intl.formatMessage({ defaultMessage: 'IPFS' })
             : intl.formatMessage({ defaultMessage: 'View on IPFS' })}
         </MuiLink>

diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
@@ -90,7 +90,6 @@ export function SwapRouteAccordion({ routes, selected, onSelect, sx }: Props) {
             height: '1px',
             borderBlockEnd: '1px solid',
             display: 'block',
-            borderColor: 'grey.800',
           },
         }}
       >

diff --git a/libs/oeth/shared/src/components/ApyHeader.tsx b/libs/oeth/shared/src/components/ApyHeader.tsx
@@ -60,7 +60,7 @@ export function ApyHeader() {
       <Stack
         direction="row"
         flexWrap="wrap"
-        gap={{ xs: 1, md: 2 }}
+        gap={{ xs: 1, md: 1.75 }}
         sx={{ width: '100%' }}
       >
         <Box
@@ -72,10 +72,11 @@ export function ApyHeader() {
             borderColor: 'grey.800',
             flexBasis: {
               xs: '100%',
-              md: '25%',
+              md: '9.4rem',
             },
             display: 'grid',
             placeContent: 'center',
+            boxSizing: 'border-box',
           }}
         >
           <Typography
@@ -120,12 +121,13 @@ export function ApyHeader() {
                 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>
@@ -141,15 +143,14 @@ export function ApyHeader() {
           direction="row"
         >
           <ValueContainer
-            icon="/images/tokens/OETH.svg"
             text={intl.formatMessage({ defaultMessage: 'OETH Balance' })}
             value={intl.formatNumber(Number(oethBalance?.formatted ?? 0), {
               minimumFractionDigits: 4,
             })}
           />
           <Box
             sx={{
-              flex: { xs: 0.5, md: 1 },
+              flex: { xs: 0.5, md: 0.25 },
               display: 'flex',
               justifyContent: 'center',
               paddingBlock: 0.75,
@@ -166,7 +167,7 @@ export function ApyHeader() {
           />
           <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/oeth/swap/src/components/GasPopover.tsx b/libs/oeth/swap/src/components/GasPopover.tsx
@@ -20,20 +20,24 @@ import { useFeeData } from 'wagmi';
 
 import { useSwapState } from '../state';
 
-import type { Theme } from '@mui/material';
+import type { IconButtonProps } from '@mui/material';
 import type { ChangeEvent } from 'react';
 
 const defaultSlippage = 0.01;
 
 const gridStyles = {
   display: 'grid',
-  gridTemplateColumns: (theme: Theme) => `1.5fr 1fr`,
+  ridTemplateColumns: `1.5fr 1fr`,
   gap: 1,
   justifyContent: 'space-between',
   alignItems: 'center',
 };
 
-export function GasPopover() {
+interface Props {
+  buttonProps?: IconButtonProps;
+}
+
+export function GasPopover({ buttonProps }: Props) {
   const theme = useTheme();
   const intl = useIntl();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -47,6 +51,7 @@ export function GasPopover() {
       <IconButton
         onClick={(e) => setAnchorEl(e.currentTarget)}
         data-testid="gas-popover-button"
+        {...buttonProps}
       >
         <img
           src="https://app.oeth.com/images/settings-icon.svg"

diff --git a/libs/oeth/swap/src/components/SwapRoute.tsx b/libs/oeth/swap/src/components/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/oeth/swap/src/components/SwapRouteAccordionItem.tsx b/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx
@@ -30,28 +30,30 @@ export function SwapRouteAccordionItem({
         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 +67,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/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -60,7 +60,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/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx
@@ -19,11 +19,20 @@ import {
 } from '../hooks';
 import { SwapProvider, useSwapState } from '../state';
 
-import type { IconButtonProps } from '@mui/material';
+import type { IconButtonProps, Theme } from '@mui/material';
 import type { Token } from '@origin/shared/contracts';
 
 import type { TokenSource } from '../types';
 
+const commonStyles = {
+  paddingBlock: 2.5,
+  paddingBlockStart: 2.625,
+  paddingInline: 2,
+  border: '1px solid',
+  borderColor: 'divider',
+  borderRadius: 1,
+};
+
 export const SwapView = () => (
   <SwapProvider>
     <SwapViewWrapped />
@@ -71,7 +80,11 @@ function SwapViewWrapped() {
   return (
     <>
       <Card
-        sxCardTitle={{ padding: { xs: 2, md: 3 } }}
+        sxCardTitle={{
+          padding: 0,
+          paddingInline: { xs: 2, md: 3 },
+          paddingY: 1.438,
+        }}
         sxCardContent={{ display: 'flex', flexDirection: 'column', gap: 2 }}
         title={
           <Stack
@@ -80,7 +93,14 @@ function SwapViewWrapped() {
             alignItems="center"
           >
             {intl.formatMessage({ defaultMessage: 'Swap' })}
-            <GasPopover />
+            <GasPopover
+              buttonProps={{
+                sx: {
+                  position: 'relative',
+                  right: (theme: Theme) => theme.spacing(-0.75),
+                },
+              }}
+            />
           </Stack>
         }
       >
@@ -105,35 +125,30 @@ function SwapViewWrapped() {
             isPriceLoading={isPriceLoading}
             isConnected={isConnected}
             sx={{
+              ...commonStyles,
               backgroundColor: 'grey.900',
-              padding: 2.875,
-              border: '1px solid',
-              borderColor: 'divider',
-              borderRadius: 1,
-              borderEndStartRadius: 0,
-              borderEndEndRadius: 0,
+
+              borderBottomColor: 'transparent',
               '&:hover, &:focus-within': {
                 borderColor: 'transparent',
-                borderStartStartRadius: (theme) => theme.shape.borderRadius,
-                borderStartEndRadius: (theme) => theme.shape.borderRadius,
               },
               '&:hover': {
                 background: (theme) =>
                   `linear-gradient(${theme.palette.grey[900]}, ${
                     theme.palette.grey[900]
                   }) padding-box,
-                    linear-gradient(90deg, ${alpha(
-                      theme.palette.primary.main,
-                      0.4,
-                    )} 0%, ${alpha(
-                      theme.palette.primary.dark,
-                      0.4,
-                    )} 100%) border-box;`,
+              linear-gradient(90deg, ${alpha(
+                theme.palette.primary.main,
+                0.4,
+              )} 0%, ${alpha(
+                theme.palette.primary.dark,
+                0.4,
+              )} 100%) border-box;`,
               },
               '&:focus-within': {
                 background: (theme) =>
                   `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box,
-                   linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`,
+             linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`,
               },
             }}
           />
@@ -152,14 +167,10 @@ function SwapViewWrapped() {
             inputProps={{ readOnly: true }}
             isConnected={isConnected}
             sx={{
-              border: '1px solid',
-              borderColor: 'divider',
-              borderTop: 0,
-              borderRadius: 1,
+              ...commonStyles,
               borderStartStartRadius: 0,
               borderStartEndRadius: 0,
               backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2),
-              padding: 2.875,
             }}
           />
           <SwapButton onClick={handleTokenFlip} />

diff --git a/libs/shared/components/src/Inputs/BigIntInput.tsx b/libs/shared/components/src/Inputs/BigIntInput.tsx
@@ -82,11 +82,9 @@ export const BigIntInput = forwardRef<HTMLInputElement, BigintInputProps>(
           paddingInline: 0,
           borderImageWidth: 0,
           boxSizing: 'border-box',
-          position: 'relative',
-          bottom: '-4px',
           '& .MuiInputBase-input': {
             padding: 0,
-            lineHeight: '1.5rem',
+            lineHeight: '1.875rem',
             boxSizing: 'border-box',
             fontStyle: 'normal',
             fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',