feat: responsiveness

- update fontSize and lineHeight to numerical values - update components for mobile devices - update theme with new typography variants
OriginProtocol · Sep 28, 2023 · 8ebd04e · 8ebd04e
1 parent 04324f7
commit 8ebd04e
Show file tree

Hide file tree

Showing 24 changed files with 245 additions and 195 deletions.
diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -7,7 +7,7 @@ export const App = () => {
   return (
     <>
       <CssBaseline />
-      <Stack minWidth={420}>
+      <Stack minWidth={370}>
         <Topnav />
         <Container
           sx={{

diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
@@ -93,16 +93,7 @@ function ValueContainer({
       <Typography variant="body2" color="text.secondary">
         {label}
       </Typography>
-      <Typography
-        sx={{
-          fontFamily: 'Sailec',
-          fontSize: (theme) => theme.typography.pxToRem(20),
-          fontStyle: 'normal',
-          fontWeight: 700,
-          lineHeight: '2rem',
-          textAlign: 'center',
-        }}
-      >
+      <Typography variant="h4" textAlign="center">
         {isLoading ? <Skeleton width={60} /> : value}
       </Typography>
     </Stack>

diff --git a/libs/oeth/history/src/components/HistoryButton.tsx b/libs/oeth/history/src/components/HistoryButton.tsx
@@ -29,10 +29,10 @@ export function HistoryFilterButton({
         borderRadius: 8,
         paddingInline: 2,
         paddingBlock: 0.5,
-        fontSize: (theme) => theme.typography.pxToRem(12),
+        fontSize: 12,
         fontWeight: 500,
         fontStyle: 'normal',
-        lineHeight: (theme) => theme.typography.pxToRem(20),
+        lineHeight: 1.6,
         ':hover': {
           background: (theme) => alpha(theme.palette.common.white, 0.04),
         },

diff --git a/libs/oeth/history/src/components/HistoryFilters.tsx b/libs/oeth/history/src/components/HistoryFilters.tsx
@@ -17,9 +17,9 @@ import { defineMessage, useIntl } from 'react-intl';
 import { HistoryFilterButton } from './HistoryButton';
 
 const styles = {
-  fontSize: '0.75rem',
+  fontSize: 12,
   fontWeight: 500,
-  lineHeight: '1.25rem',
+  lineHeight: 1.6,
 };
 
 const filterOptions = [

diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
@@ -24,6 +24,8 @@ import { Mix } from './Mix';
 
 import type { StackProps } from '@mui/material';
 
+import type { RedeemEstimate } from '../types';
+
 export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
   const intl = useIntl();
   const theme = useTheme();
@@ -56,61 +58,49 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
             <Mix />
           </Stack>
         )}
-        <Stack flex={1} direction="column">
+        <Stack flex={1} direction="column" gap={0.5}>
           <Stack
             direction="row"
             alignItems="baseline"
-            gap={1}
+            justifyContent="space-between"
             overflow="hidden"
             whiteSpace="nowrap"
           >
-            <Typography fontWeight={500}>
-              {isEstimateLoading ? (
-                <Skeleton width={100} />
-              ) : (
-                formatAmount(amountOut, MIX_TOKEN.decimals)
-              )}
-            </Typography>
-            <Typography variant="body2" noWrap color="text.secondary">
-              {isEstimateLoading ? (
-                <Skeleton width={60} />
-              ) : (
-                `(${intl.formatNumber(convertedAmount, currencyFormat)})`
-              )}
-            </Typography>
+            <Stack direction="row" gap={1} alignItems="baseline">
+              <Typography fontWeight={500}>
+                {isEstimateLoading ? (
+                  <Skeleton width={100} />
+                ) : (
+                  formatAmount(amountOut, MIX_TOKEN.decimals)
+                )}
+              </Typography>
+              <Typography variant="body2" noWrap color="text.secondary">
+                {isEstimateLoading ? (
+                  <Skeleton width={60} />
+                ) : (
+                  `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+                )}
+              </Typography>
+            </Stack>
+            <Stack direction="row" gap={1}>
+              <Typography variant="body2" color="text.secondary">
+                {intl.formatMessage({ defaultMessage: 'Gas:' })}
+              </Typography>
+              <Typography variant="body2" fontWeight={500}>
+                {isEstimateLoading || gasPriceLoading ? (
+                  <Skeleton width={60} />
+                ) : (
+                  `~${intl.formatNumber(gasPrice?.gasCostUsd, currencyFormat)}`
+                )}
+              </Typography>
+            </Stack>
           </Stack>
           <Typography noWrap>
             {intl.formatMessage({
               defaultMessage: 'Redeem for mix via OETH vault',
             })}
           </Typography>
         </Stack>
-        <Stack justifyContent="flex-start" alignItems="flex-end">
-          <Stack direction="row" gap={1}>
-            <Typography variant="body2" color="text.secondary">
-              {intl.formatMessage({ defaultMessage: 'Gas:' })}
-            </Typography>
-            <Typography variant="body2" fontWeight={500}>
-              {isEstimateLoading || gasPriceLoading ? (
-                <Skeleton width={60} />
-              ) : (
-                `~${intl.formatNumber(gasPrice?.gasCostUsd, currencyFormat)}`
-              )}
-            </Typography>
-          </Stack>
-          {/* <Stack direction="row" gap={1}>
-            <Typography variant="body2" color="text.secondary">
-              {intl.formatMessage({ defaultMessage: 'Wait time:' })}
-            </Typography>
-            <Typography variant="body2" fontWeight={500}>
-              {isEstimateLoading ? (
-                <Skeleton width={60} />
-              ) : (
-                intl.formatMessage({ defaultMessage: '~1 min' })
-              )}
-            </Typography>
-          </Stack> */}
-        </Stack>
       </Stack>
       <Divider />
       <Stack
@@ -141,51 +131,80 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
       </Stack>
       <Divider />
       <Stack spacing={2} py={1.5} px={2}>
-        {split?.map((s) => {
-          const converted =
-            +formatUnits(s.amount, s.token.decimals) * prices?.[s.token.symbol];
-
-          return (
-            <Stack
-              key={s.token.symbol}
-              direction="row"
-              justifyContent="space-between"
-              alignItems="center"
-              gap={2}
-            >
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Box component="img" src={s.token.icon} />
-                <Typography fontWeight={500}>{s.token.symbol}</Typography>
-              </Stack>
-              <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="flex-end"
-                spacing={2}
-              >
-                <Typography fontWeight={500}>
-                  {isEstimateLoading ? (
-                    <Skeleton width={80} />
-                  ) : (
-                    formatAmount(s.amount, s.token.decimals)
-                  )}
-                </Typography>
-                {isPricesLoading || isEstimateLoading ? (
-                  <Skeleton width={80} />
-                ) : (
-                  <Typography
-                    fontWeight={500}
-                    color="text.secondary"
-                    sx={{ minWidth: 100, textAlign: 'end' }}
-                  >
-                    {intl.formatNumber(converted, currencyFormat)}
-                  </Typography>
-                )}
-              </Stack>
-            </Stack>
-          );
-        })}
+        {split?.map((s) => (
+          <SplitRow
+            key={s.token.symbol}
+            estimate={s}
+            price={prices?.[s.token.symbol]}
+            isEstimateLoading={isEstimateLoading}
+            isPricesLoading={isPricesLoading}
+          />
+        ))}
       </Stack>
     </Stack>
   );
 };
+
+type SplitRowProps = {
+  estimate: RedeemEstimate;
+  price: number;
+  isEstimateLoading: boolean;
+  isPricesLoading: boolean;
+} & StackProps;
+
+function SplitRow({
+  estimate,
+  price,
+  isEstimateLoading,
+  isPricesLoading,
+  ...rest
+}: SplitRowProps) {
+  const intl = useIntl();
+
+  const converted =
+    +formatUnits(estimate.amount, estimate.token.decimals) * price;
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      gap={1}
+      {...rest}
+    >
+      <Stack direction="row" alignItems="center" spacing={1}>
+        <Box component="img" src={estimate.token.icon} />
+        <Typography fontWeight={500}>{estimate.token.symbol}</Typography>
+      </Stack>
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="flex-end"
+        spacing={2}
+        overflow="hidden"
+        whiteSpace="nowrap"
+      >
+        <Typography fontWeight={500}>
+          {isEstimateLoading ? (
+            <Skeleton width={80} />
+          ) : (
+            formatAmount(estimate.amount, estimate.token.decimals)
+          )}
+        </Typography>
+        {isPricesLoading || isEstimateLoading ? (
+          <Skeleton width={80} />
+        ) : (
+          <Typography
+            noWrap
+            fontWeight={500}
+            color="text.secondary"
+            textAlign="end"
+            minWidth={80}
+          >
+            {intl.formatNumber(converted, currencyFormat)}
+          </Typography>
+        )}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -36,13 +36,13 @@ const tokenInputStyles = {
   boxSizing: 'border-box',
   '& .MuiInputBase-input': {
     padding: 0,
-    lineHeight: '1.875rem',
     boxSizing: 'border-box',
     fontStyle: 'normal',
-    fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
-    fontSize: '1.5rem',
+    fontFamily: 'Sailec, sans-serif',
+    fontSize: 24,
+    lineHeight: 1.25,
     fontWeight: 700,
-    height: '1.5rem',
+    height: 24,
     color: 'text.primary',
     '&::placeholder': {
       color: 'text.secondary',
@@ -115,7 +115,7 @@ function RedeemViewWrapped() {
           isConnected={isConnected}
           isAmountDisabled={isRedeemLoading}
           inputProps={{ sx: tokenInputStyles }}
-          tokenButtonProps={{ sx: { minWidth: 0, maxWidth: 120 } }}
+          tokenButtonProps={{ sx: { minWidth: 100, maxWidth: 100 } }}
           sx={{
             paddingBlock: 2.5,
             paddingBlockStart: 2.625,

diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx
@@ -133,7 +133,7 @@ export function GasPopover({
               sx={{
                 gridColumn: 'span 2',
                 mt: 1.25,
-                fontSize: (theme) => theme.typography.pxToRem(12),
+                fontSize: 12,
                 color: (theme) => theme.palette.warning.main,
                 fontWeight: 400,
                 fontStyle: 'normal',

diff --git a/libs/oeth/swap/src/components/ApyHeader.tsx b/libs/oeth/swap/src/components/ApyHeader.tsx
@@ -40,17 +40,13 @@ export const ApyHeader = (props: StackProps) => {
         direction="row"
         alignItems="center"
         justifyContent="space-between"
-        p={(theme) => theme.spacing(2, 3)}
+        px={{ xs: 2, md: 3 }}
+        py={{ xs: 1.5, md: 2 }}
       >
         {apyLoading ? (
           <Skeleton width={100} height={40} />
         ) : (
-          <Typography
-            fontSize={32}
-            fontWeight={700}
-            fontFamily="Sailec"
-            lineHeight="40px"
-          >
+          <Typography variant="h1">
             {intl.formatNumber(
               trailing.value === 30 ? apy.apy30DayAvg : apy.apy7DayAvg,
               { minimumFractionDigits: 2, maximumFractionDigits: 2 },
@@ -61,17 +57,34 @@ export const ApyHeader = (props: StackProps) => {
 
         <Button
           color="secondary"
-          size="small"
+          variant="text"
           onClick={(e) => setAnchorEl(e.currentTarget)}
           sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
             borderRadius: 1,
             color: 'text.secondary',
-            backgroundColor: 'grey.700',
-            img: { marginLeft: 0.75 },
+            transform: 'translateX(5px)',
           }}
         >
           {intl.formatMessage(trailing.label)}
-          <Box component="img" src={`/images/downarrow.png`} />
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '50%',
+              backgroundColor: 'grey.600',
+              color: 'text.secondary',
+              p: 0.2,
+              transform: 'translateY(2px)',
+              width: 16,
+              height: 16,
+            }}
+          >
+            <Box component="img" src="/images/dropdown.svg" />
+          </Box>
         </Button>
         <Menu
           anchorEl={anchorEl}

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={6}>
+        <Grid2 key={route.action} xs={12} sm={6}>
           <SwapRouteCard
             key={`bestRoute-${index}`}
             isSelected={routeEq(selectedSwapRoute, route)}