fix: swap card styles, topnav padding block

OriginProtocol · Sep 30, 2023 · 9122f4f · 9122f4f
1 parent 62696a0
commit 9122f4f
Show file tree

Hide file tree

Showing 4 changed files with 260 additions and 264 deletions.
diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -11,12 +11,8 @@ export const App = () => {
         <Topnav />
         <Container
           sx={{
-            mt: { xs: 3.25, md: 3 },
+            mt: 3,
             mb: 10,
-            pt: (theme) => ({
-              xs: '112px',
-              md: `${theme.mixins.toolbar.height}px`,
-            }),
           }}
           maxWidth="sm"
         >

diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
@@ -31,177 +31,187 @@ export function Topnav(props: BoxProps) {
     useState<HTMLButtonElement | null>(null);
 
   return (
-    <Box
-      component="nav"
-      {...props}
-      sx={(theme) => ({
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: 1,
-        zIndex: theme.zIndex.appBar,
-        backgroundColor: alpha(theme.palette.background.default, 0.6),
-        backdropFilter: 'blur(15px)',
-        height: {
-          xs: '112px',
-          md: `${theme.mixins.toolbar.height}px`,
-        },
-        display: 'grid',
-        borderBottom: {
-          xs: 'none',
-          md: `1px solid ${theme.palette.background.paper}`,
-        },
-        columnGap: { xs: 1, md: 10 },
-        rowGap: { xs: 0, md: 10 },
-        alignItems: 'center',
-        px: {
-          xs: 1.5,
-          md: 3,
-        },
-        pt: {
-          xs: 1.5,
-          md: 0,
-        },
-        gridTemplateColumns: {
-          xs: '1fr 1fr',
-          md: 'auto 1fr auto',
-        },
-      })}
-    >
+    <>
       <Box
-        component={Link}
-        to="/"
+        sx={{
+          height: (theme) => ({
+            xs: '112px',
+            md: `${theme.mixins.toolbar.height}px`,
+          }),
+        }}
+      />
+      <Box
+        component="nav"
+        {...props}
         sx={(theme) => ({
-          '& img': {
-            maxHeight: {
-              xs: '1rem',
-              md: '1.5rem',
-            },
-            maxWidth: {
-              xs: theme.typography.pxToRem(100),
-              sm: theme.typography.pxToRem(120),
-              md: theme.typography.pxToRem(180),
-            },
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: 1,
+          zIndex: theme.zIndex.appBar,
+          backgroundColor: alpha(theme.palette.background.default, 0.6),
+          backdropFilter: 'blur(15px)',
+          height: {
+            xs: '112px',
+            md: `${theme.mixins.toolbar.height}px`,
           },
-        })}
-      >
-        <img src="/images/origin-ether-logo.svg" alt="Origin logo" />
-      </Box>
-      <Tabs
-        value={location.pathname}
-        onChange={(_, value) => {
-          navigate(value);
-        }}
-        sx={{
-          order: {
-            xs: 2,
-            md: 0,
+          display: 'grid',
+          borderBottom: {
+            xs: 'none',
+            md: `1px solid ${theme.palette.background.paper}`,
           },
-          gridColumn: {
-            xs: 'span 2',
-            md: 'span 1',
+          columnGap: { xs: 1, md: 10 },
+          rowGap: { xs: 0, md: 10 },
+          alignItems: 'center',
+          px: {
+            xs: 1.5,
+            md: 3,
           },
-          marginBlockStart: {
-            xs: 2,
+          pt: {
+            xs: 1.5,
             md: 0,
           },
-          '& .MuiTabs-flexContainer': {
-            justifyContent: {
-              xs: 'center',
-              md: 'flex-start',
-            },
+          gridTemplateColumns: {
+            xs: '1fr 1fr',
+            md: 'auto 1fr auto',
           },
-        }}
-      >
-        {routes[0].children.map((route) => (
-          <Tab
-            key={route?.path ?? '/'}
-            value={route?.path ?? '/'}
-            label={intl.formatMessage(route.handle.label)}
-          />
-        ))}
-      </Tabs>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          gap: { xs: 1, md: 2 },
-        }}
+        })}
       >
-        <MuiLink
-          href="https://oeth.on.fleek.co/"
-          target="_blank"
-          noWrap
+        <Box
+          component={Link}
+          to="/"
+          sx={(theme) => ({
+            '& img': {
+              maxHeight: {
+                xs: '1rem',
+                md: '1.5rem',
+              },
+              maxWidth: {
+                xs: theme.typography.pxToRem(100),
+                sm: theme.typography.pxToRem(120),
+                md: theme.typography.pxToRem(180),
+              },
+            },
+          })}
+        >
+          <img src="/images/origin-ether-logo.svg" alt="Origin logo" />
+        </Box>
+        <Tabs
+          value={location.pathname}
+          onChange={(_, value) => {
+            navigate(value);
+          }}
           sx={{
-            borderRadius: 25,
-            paddingX: {
-              md: 3,
+            order: {
               xs: 2,
+              md: 0,
             },
-            paddingY: {
-              md: 1,
-              xs: 0.75,
+            gridColumn: {
+              xs: 'span 2',
+              md: 'span 1',
             },
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: 500,
-            minHeight: { xs: 36, md: 44 },
-            background: `linear-gradient(0deg, ${alpha(
-              theme.palette.common.white,
-              0.05,
-            )} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${
-              theme.palette.background.paper
-            };`,
-            '&:hover': {
-              background: (theme) => theme.palette.background.paper,
+            marginBlockStart: {
+              xs: 2,
+              md: 0,
+            },
+            '& .MuiTabs-flexContainer': {
+              justifyContent: {
+                xs: 'center',
+                md: 'flex-start',
+              },
             },
           }}
         >
-          {isMd
-            ? intl.formatMessage({ defaultMessage: 'IPFS' })
-            : intl.formatMessage({ defaultMessage: 'View on IPFS' })}
-        </MuiLink>
-        <OpenAccountModalButton
-          onClick={(e) => {
-            if (isConnected) {
-              setAccountModalAnchor(e.currentTarget);
-            }
+          {routes[0].children.map((route) => (
+            <Tab
+              key={route?.path ?? '/'}
+              value={route?.path ?? '/'}
+              label={intl.formatMessage(route.handle.label)}
+            />
+          ))}
+        </Tabs>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: { xs: 1, md: 2 },
           }}
+        >
+          <MuiLink
+            href="https://oeth.on.fleek.co/"
+            target="_blank"
+            noWrap
+            sx={{
+              borderRadius: 25,
+              paddingX: {
+                md: 3,
+                xs: 2,
+              },
+              paddingY: {
+                md: 1,
+                xs: 0.75,
+              },
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontWeight: 500,
+              minHeight: { xs: 36, md: 44 },
+              background: `linear-gradient(0deg, ${alpha(
+                theme.palette.common.white,
+                0.05,
+              )} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${
+                theme.palette.background.paper
+              };`,
+              '&:hover': {
+                background: (theme) => theme.palette.background.paper,
+              },
+            }}
+          >
+            {isMd
+              ? intl.formatMessage({ defaultMessage: 'IPFS' })
+              : intl.formatMessage({ defaultMessage: 'View on IPFS' })}
+          </MuiLink>
+          <OpenAccountModalButton
+            onClick={(e) => {
+              if (isConnected) {
+                setAccountModalAnchor(e.currentTarget);
+              }
+            }}
+            sx={{
+              borderRadius: 25,
+              paddingX: {
+                md: 3,
+                xs: 2,
+              },
+              paddingY: {
+                md: 1,
+                xs: 0.75,
+              },
+              minWidth: 36,
+              maxWidth: { xs: isConnected ? 36 : 160, sm: 160, lg: 220 },
+              fontWeight: 500,
+              minHeight: { xs: 36, md: 44 },
+            }}
+          />
+          <AccountPopover
+            anchor={accountModalAnchor}
+            setAnchor={setAccountModalAnchor}
+          />
+        </Box>
+        <Divider
           sx={{
-            borderRadius: 25,
-            paddingX: {
-              md: 3,
-              xs: 2,
-            },
-            paddingY: {
-              md: 1,
-              xs: 0.75,
-            },
-            minWidth: 36,
-            maxWidth: { xs: isConnected ? 36 : 160, sm: 160, lg: 220 },
-            fontWeight: 500,
-            minHeight: { xs: 36, md: 44 },
+            display: { xs: 'block', md: 'none' },
+            gridColumn: 'span 2',
+            gridRowStart: 1,
+            borderColor: (theme) => theme.palette.background.paper,
+            position: 'relative',
+            width: 'calc(100% + 1.5rem)',
+            bottom: '-3rem',
+            left: '-0.75rem',
           }}
         />
-        <AccountPopover
-          anchor={accountModalAnchor}
-          setAnchor={setAccountModalAnchor}
-        />
       </Box>
-      <Divider
-        sx={{
-          display: { xs: 'block', md: 'none' },
-          gridColumn: 'span 2',
-          gridRowStart: 1,
-          borderColor: (theme) => theme.palette.background.paper,
-          position: 'relative',
-          width: 'calc(100% + 1.5rem)',
-          bottom: '-3rem',
-          left: '-0.75rem',
-        }}
-      />
-    </Box>
+    </>
   );
 }
diff --git a/libs/oeth/swap/src/components/BestRoutes.tsx b/libs/oeth/swap/src/components/BestRoutes.tsx
@@ -17,7 +17,7 @@ export function BestRoutes(props: Grid2Props) {
   return (
     <Grid2 spacing={1} {...props} container>
       {swapRoutes.slice(0, 2).map((route, index) => (
-        <Grid2 key={route.action} xs={12} sm={6}>
+        <Grid2 key={route.action} xs={6}>
           <SwapRouteCard
             key={`bestRoute-${index}`}
             isSelected={routeEq(selectedSwapRoute, route)}