feat: theming

- review theme values - adapt component to use proper theme keys - update spacings - update component structure
OriginProtocol · Sep 26, 2023 · d5b76ab · d5b76ab
1 parent 6c60bb7
commit d5b76ab
Show file tree

Hide file tree

Showing 29 changed files with 715 additions and 757 deletions.
diff --git a/apps/oeth/index.html b/apps/oeth/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Oeth</title>
+    <title>OETH</title>
     <meta
       name="description"
       content="An ETH-pegged token that earns yield from all forms of staking"

diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -8,23 +8,17 @@ export const App = () => {
     <>
       <CssBaseline />
       <Stack>
-        <Topnav />
-        <Container
-          sx={{
-            mt: {
-              xs: 3,
-              md: 5,
-              paddingInline: {
-                xs: 2,
-                md: 0,
-              },
-            },
-          }}
-          maxWidth="sm"
-        >
-          <Stack mt={3}>
-            <Outlet />
-          </Stack>
+        <Topnav
+          sx={(theme) => ({
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: 1,
+            height: theme.mixins.toolbar.height,
+          })}
+        />
+        <Container sx={{ my: 3 }} maxWidth="sm">
+          <Outlet />
         </Container>
       </Stack>
     </>

diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
@@ -33,15 +33,15 @@ export function Topnav(props: BoxProps) {
   return (
     <Box
       component="nav"
+      {...props}
       sx={{
         display: 'grid',
-        borderBlockEnd: {
+        borderBottom: (theme) => ({
           xs: 'none',
-          md: '1px solid var(--mui-palette-background-paper)',
-        },
+          md: `1px solid ${theme.palette.background.paper}`,
+        }),
         gap: { xs: 1, md: 10 },
         alignItems: 'center',
-        backgroundColor: 'divider',
         paddingInline: {
           xs: 1.5,
           md: 3,
@@ -94,16 +94,6 @@ export function Topnav(props: BoxProps) {
             xs: 4,
             md: 0,
           },
-          backgroundColor: 'transparent',
-          minHeight: 0,
-          overflow: 'visible',
-          '& .MuiTabs-fixed': {
-            overflow: 'visible !important',
-          },
-          fontSize: {
-            xs: '0.875rem',
-            md: '1rem',
-          },
           '& .MuiTabs-flexContainer': {
             justifyContent: {
               xs: 'center',
@@ -117,50 +107,15 @@ export function Topnav(props: BoxProps) {
             key={route?.path ?? '/'}
             value={route?.path ?? '/'}
             label={intl.formatMessage(route.handle.label)}
-            sx={{
-              fontSize: {
-                xs: '0.875rem',
-                md: '1rem',
-              },
-              position: 'relative',
-              textTransform: 'none',
-              boxSizing: 'borderBox',
-              paddingInline: 2,
-              paddingBlock: { xs: 1, md: 3 },
-              lineHeight: '1.6875rem',
-              '&:hover:after': {
-                content: '""',
-                width: '100%',
-                height: '2px',
-                background: (theme) =>
-                  `linear-gradient(90deg, ${alpha(
-                    theme.palette.primary.main,
-                    0.4,
-                  )} 0%, ${alpha(theme.palette.primary.dark, 0.4)} 100%)`,
-                position: 'absolute',
-                left: 0,
-                bottom: 0,
-                zIndex: 2,
-              },
-            }}
           />
         ))}
       </Tabs>
-
       <Box
         sx={{
           display: 'flex',
           justifyContent: 'flex-end',
           alignItems: 'center',
           gap: { xs: 1, md: 2 },
-          '& > a, & > *': {
-            fontSize: {
-              xs: '0.75rem',
-              md: '1rem',
-            },
-            color: (theme) => theme.palette.primary.contrastText,
-            lineHeight: (theme) => theme.spacing(3),
-          },
         }}
       >
         <MuiLink
@@ -169,30 +124,28 @@ export function Topnav(props: BoxProps) {
           noWrap
           sx={{
             borderRadius: 25,
-            paddingBlock: 0.75,
-            display: 'grid',
-            placeContent: 'center',
-            paddingInline: {
+            paddingX: {
               md: 3,
               xs: 2,
             },
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
+            paddingY: {
+              md: 1,
+              xs: 0.75,
+            },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             fontWeight: 500,
-            minHeight: 36,
-            background: ` linear-gradient(0deg, ${alpha(
+            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,
-              backgroundImage: 'none',
             },
-            color: 'primary.contrastText',
-            boxSizing: 'border-box',
-            lineHeight: '1rem',
           }}
         >
           {isMd
@@ -205,6 +158,21 @@ export function Topnav(props: BoxProps) {
               setAccountModalAnchor(e.currentTarget);
             }
           }}
+          sx={{
+            borderRadius: 25,
+            paddingX: {
+              md: 3,
+              xs: 2,
+            },
+            paddingY: {
+              md: 1,
+              xs: 0.75,
+            },
+            minWidth: 36,
+            maxWidth: { xs: 36, sm: 160, lg: 220 },
+            fontWeight: 500,
+            minHeight: { xs: 36, md: 44 },
+          }}
         />
         <AccountPopover
           anchor={accountModalAnchor}

diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
@@ -101,7 +101,6 @@ function ValueContainer({
           lineHeight: '2rem',
           textAlign: 'center',
         }}
-        color="primary.contrastText"
       >
         {isLoading ? <Skeleton width={60} /> : value}
       </Typography>

diff --git a/libs/oeth/history/src/components/ChartCard.tsx b/libs/oeth/history/src/components/ChartCard.tsx
@@ -1,5 +1,11 @@
-import { Stack, Typography, useTheme } from '@mui/material';
-import { Card } from '@origin/shared/components';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { Line } from 'react-chartjs-2';
 import { useIntl } from 'react-intl';
 
@@ -13,82 +19,81 @@ export function ChartCard(props: Props) {
   const intl = useIntl();
 
   return (
-    <Card
-      sxCardTitle={{ paddingBlock: { xs: 2, md: 3 } }}
-      sxCardContent={{ paddingInline: 0 }}
-      title={<>{intl.formatMessage({ defaultMessage: 'APY' })}</>}
-    >
-      <Stack sx={{ paddingBlock: { xs: 2, md: 3 }, paddingInline: 2 }}>
-        <Typography variant="h3" color="primary.contrastText">
-          {intl.formatNumber(props.apyPercent / 100, {
-            style: 'percent',
-            maximumFractionDigits: 2,
-          })}
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          {intl.formatDate(new Date(), {
-            month: 'long',
-            day: 'numeric',
-            year: 'numeric',
-          })}
-        </Typography>
-      </Stack>
+    <Card>
+      <CardHeader title={intl.formatMessage({ defaultMessage: 'APY' })} />
+      <CardContent>
+        <Stack sx={{ paddingBlock: { xs: 2, md: 3 }, paddingInline: 2 }}>
+          <Typography variant="h3">
+            {intl.formatNumber(props.apyPercent / 100, {
+              style: 'percent',
+              maximumFractionDigits: 2,
+            })}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {intl.formatDate(new Date(), {
+              month: 'long',
+              day: 'numeric',
+              year: 'numeric',
+            })}
+          </Typography>
+        </Stack>
 
-      <Line
-        options={{
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.secondary,
-          responsive: true,
-          animation: {
-            easing: 'easeInOutQuad',
-          },
+        <Line
+          options={{
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.secondary,
+            responsive: true,
+            animation: {
+              easing: 'easeInOutQuad',
+            },
 
-          borderColor(ctx, options) {
-            const gradient = ctx.chart.ctx.createLinearGradient(
-              0,
-              0,
-              ctx.chart.width,
-              ctx.chart.height,
-            );
-            gradient.addColorStop(0, theme.palette.primary.main);
-            gradient.addColorStop(1, theme.palette.primary.dark);
-            return gradient;
-          },
-          scales: {
-            y: {
-              display: false,
-              ticks: {
-                stepSize: 200,
-              },
+            borderColor(ctx, options) {
+              const gradient = ctx.chart.ctx.createLinearGradient(
+                0,
+                0,
+                ctx.chart.width,
+                ctx.chart.height,
+              );
+              gradient.addColorStop(0, theme.palette.primary.main);
+              gradient.addColorStop(1, theme.palette.primary.dark);
+              return gradient;
             },
-            x: {
-              ticks: {
-                padding: 16,
-                font: {
-                  size: 11,
-                  family: 'Inter',
-                  weight: '400',
+            scales: {
+              y: {
+                display: false,
+                ticks: {
+                  stepSize: 200,
+                },
+              },
+              x: {
+                ticks: {
+                  padding: 16,
+                  font: {
+                    size: 11,
+                    family: 'Inter',
+                    weight: '400',
+                  },
                 },
               },
             },
-          },
-        }}
-        data={{
-          datasets: [
-            {
-              data: props.apy.map((item) => ({
-                x: intl.formatDate(new Date(item.timestamp), {
-                  month: 'short',
-                  day: 'numeric',
-                }),
-                y: item.value,
-              })),
-              pointRadius: 0,
-              tension: 0.5,
-            },
-          ],
-        }}
-      />
+          }}
+          data={{
+            datasets: [
+              {
+                data: props.apy.map((item) => ({
+                  x: intl.formatDate(new Date(item.timestamp), {
+                    month: 'short',
+                    day: 'numeric',
+                  }),
+                  y: item.value,
+                })),
+                pointRadius: 0,
+                tension: 0.5,
+              },
+            ],
+          }}
+        />
+      </CardContent>
     </Card>
   );
 }