From 9122f4f14f516300051a057b3a1ae3fba830eb93 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sat, 30 Sep 2023 21:48:59 +0200
Subject: [PATCH] fix: swap card styles, topnav padding block

---
 apps/oeth/src/App.tsx                         |   6 +-
 apps/oeth/src/components/Topnav.tsx           | 312 +++++++++---------
 libs/oeth/swap/src/components/BestRoutes.tsx  |   2 +-
 .../swap/src/components/SwapRouteCard.tsx     | 204 ++++++------
 4 files changed, 260 insertions(+), 264 deletions(-)

diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
index e6f6fbea7..04f67ea27 100644
--- 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
index 035e03fae..703d55a8f 100644
--- 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
index 9ca8a76d3..8de1bc56e 100644
--- 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)}
diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
index 04310e9df..2a18ee9d0 100644
--- a/libs/oeth/swap/src/components/SwapRouteCard.tsx
+++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -1,12 +1,4 @@
-import {
-  alpha,
-  Box,
-  Card,
-  CardHeader,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
+import { alpha, Box, Card, Skeleton, Stack, Typography } from '@mui/material';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 import { tokens } from '@origin/shared/contracts';
 import { useGasPrice, usePrices } from '@origin/shared/providers';
@@ -68,13 +60,12 @@ export function SwapRouteCard({
     <Card
       {...rest}
       sx={{
-        paddingInline: 1.5,
-        paddingBlockEnd: 2,
-        paddingBlockStart: 3,
-        boxShadow: 'none',
+        px: 1.5,
+        pb: 2,
+        pt: 3,
         cursor: 'pointer',
-        border: (theme) => `1px solid ${theme.palette.grey[800]}`,
-        borderRadius: 1,
+        border: `1px solid transparent`,
+        position: 'relative',
         height: 1,
         ...(isSelected
           ? {
@@ -100,110 +91,109 @@ export function SwapRouteCard({
         ...rest?.sx,
       }}
       role="button"
-      onClick={() => onSelect(route)}
+      onClick={() => {
+        onSelect(route);
+      }}
     >
-      <CardHeader
-        sx={{
-          padding: 0,
-          borderBottom: 'none',
-        }}
-        title={
-          <Grid2 container spacing={0.5} position="relative">
-            <Grid2 display="flex" alignItems="center">
+      {isBest && (
+        <Box
+          sx={{
+            position: 'absolute',
+            borderBottomLeftRadius: (theme) => theme.shape.borderRadius,
+            background: (theme) => theme.palette.background.gradient1,
+            fontSize: 12,
+            top: 0,
+            right: 0,
+            px: 1,
+            pt: 0.25,
+          }}
+        >
+          {intl.formatMessage({ defaultMessage: 'Best' })}
+        </Box>
+      )}
+      <Stack height={1}>
+        <Grid2 container spacing={0.5}>
+          <Grid2 display="flex" alignItems="center">
+            {isLoading ? (
+              <Skeleton variant="circular" width={16} height={16} />
+            ) : (
+              <Box
+                component="img"
+                src={tokens.mainnet.OETH.icon}
+                height={16}
+                width={16}
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+              />
+            )}
+          </Grid2>
+          <Grid2 display="flex" alignItems="center">
+            <Typography fontWeight={500}>
               {isLoading ? (
-                <Skeleton variant="circular" width={16} height={16} />
+                <Skeleton width={100} />
               ) : (
-                <Box
-                  component="img"
-                  src={tokens.mainnet.OETH.icon}
-                  height={16}
-                  width={16}
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                />
+                formatAmount(route.estimatedAmount, route.tokenOut.decimals)
               )}
-            </Grid2>
-            <Grid2 display="flex" alignItems="center">
-              <Typography fontWeight={500}>
+            </Typography>
+          </Grid2>
+          <Grid2 display="flex" alignItems="center" xs={12} sm="auto">
+            <Typography color="text.secondary" variant="body2" noWrap>
+              {isLoading ? (
+                <Skeleton width={60} />
+              ) : (
+                `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+              )}
+            </Typography>
+          </Grid2>
+        </Grid2>
+        <Stack justifyContent="space-between" height={1}>
+          <Typography
+            fontWeight={500}
+            sx={{ fontSize: 12, marginBlock: { xs: 1.5, md: 1 } }}
+          >
+            {isLoading ? (
+              <Skeleton width={80} />
+            ) : (
+              intl.formatMessage(routeActionLabel[route.action])
+            )}
+          </Typography>
+          <Stack gap={0.5}>
+            <Stack
+              direction="row"
+              gap={1}
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Typography variant="body2" color="text.secondary">
+                {intl.formatMessage({ defaultMessage: 'Rate:' })}
+              </Typography>
+              <Typography variant="body2" fontWeight={500}>
                 {isLoading ? (
-                  <Skeleton width={100} />
+                  <Skeleton width={60} />
                 ) : (
-                  formatAmount(route.estimatedAmount, route.tokenOut.decimals)
+                  `1:${intl.formatNumber(route.rate, quantityFormat)}`
                 )}
               </Typography>
-            </Grid2>
-            <Grid2 display="flex" alignItems="center">
-              <Typography color="text.secondary" variant="body2" noWrap>
-                {isLoading ? (
+            </Stack>
+            <Stack
+              direction="row"
+              gap={1}
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Typography variant="body2" color="text.secondary">
+                {intl.formatMessage({ defaultMessage: 'Gas:' })}
+              </Typography>
+              <Typography variant="body2" fontWeight={500}>
+                {isGasLoading ? (
                   <Skeleton width={60} />
                 ) : (
-                  `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+                  `~${intl.formatNumber(gasPrice, currencyFormat)}`
                 )}
               </Typography>
-            </Grid2>
-
-            {isBest && (
-              <Box
-                sx={{
-                  position: 'absolute',
-                  borderBottomLeftRadius: (theme) => theme.shape.borderRadius,
-                  background: (theme) => theme.palette.background.gradient1,
-                  fontSize: 12,
-                  top: (theme) => theme.spacing(-3),
-                  right: (theme) => theme.spacing(-1.25),
-                  px: 1,
-                  pt: 0.25,
-                }}
-              >
-                {intl.formatMessage({ defaultMessage: 'Best' })}
-              </Box>
-            )}
-          </Grid2>
-        }
-      ></CardHeader>
-
-      <Typography fontWeight={500} sx={{ marginBlock: { xs: 1.5, md: 1 } }}>
-        {isLoading ? (
-          <Skeleton width={80} />
-        ) : (
-          intl.formatMessage(routeActionLabel[route.action])
-        )}
-      </Typography>
-      <Stack gap={0.5}>
-        <Stack
-          direction="row"
-          gap={1}
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <Typography variant="body2" color="text.secondary">
-            {intl.formatMessage({ defaultMessage: 'Rate:' })}
-          </Typography>
-          <Typography variant="body2" fontWeight={500}>
-            {isLoading ? (
-              <Skeleton width={60} />
-            ) : (
-              `1:${intl.formatNumber(route.rate, quantityFormat)}`
-            )}
-          </Typography>
-        </Stack>
-        <Stack
-          direction="row"
-          gap={1}
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <Typography variant="body2" color="text.secondary">
-            {intl.formatMessage({ defaultMessage: 'Gas:' })}
-          </Typography>
-          <Typography variant="body2" fontWeight={500}>
-            {isGasLoading ? (
-              <Skeleton width={60} />
-            ) : (
-              `~${intl.formatNumber(gasPrice, currencyFormat)}`
-            )}
-          </Typography>
+            </Stack>
+          </Stack>
         </Stack>
       </Stack>
     </Card>