Update UI and logo

packages/site/gatsby-config.ts

@@ -14,7 +14,6 @@ const config: GatsbyConfig = {
       options: {
         name: 'ChainTrack Snap',
         icon: 'src/assets/logo.svg',
-        theme_color: '#6F4CFF',
         background_color: '#FFFFFF',
         display: 'standalone',
       },

packages/site/package.json

@@ -66,8 +66,8 @@
     "eslint-plugin-jsdoc": "^39.2.9",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "gatsby": "^4.24.4",
-    "gatsby-plugin-manifest": "^4.24.0",
+    "gatsby": "^5.12.9",
+    "gatsby-plugin-manifest": "^5.12.3",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "prettier": "^2.2.1",
     "prettier-plugin-packagejson": "^2.2.18",

packages/site/src/Root.tsx

@@ -30,7 +30,9 @@ export const ToggleThemeContext = createContext({
 });
 
 export const Root: FunctionComponent<RootProps> = ({ children }) => {
-  const [mode, setMode] = useState<'light' | 'dark'>(getThemePreference());
+  const [mode, setMode] = useState<'light' | 'dark' | null>(
+    getThemePreference(),
+  );
   const colorMode = useMemo(
     () => ({
       toggleColorMode: () => {
@@ -44,27 +46,33 @@ export const Root: FunctionComponent<RootProps> = ({ children }) => {
     [],
   );
 
-  const theme = createTheme({
-    palette: {
-      mode,
-      primary: mode === 'dark' ? blueGrey : brown,
-      secondary: mode === 'dark' ? grey : blueGrey,
-    },
-    custom: mode === 'dark' ? { ...dark } : { ...light },
-  });
+  let theme;
+
+  if (mode) {
+    theme = createTheme({
+      palette: {
+        mode,
+        primary: mode === 'dark' ? blueGrey : brown,
+        secondary: mode === 'dark' ? grey : blueGrey,
+      },
+      custom: mode === 'dark' ? { ...dark } : { ...light },
+    });
+  }
 
   useEffect(() => {
     setMode(getThemePreference());
   }, []);
 
+  if (!mode || !theme) {
+    return null;
+  }
+
   return (
-    mode && (
-      <ToggleThemeContext.Provider value={colorMode}>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <MetaMaskProvider>{children}</MetaMaskProvider>
-        </ThemeProvider>
-      </ToggleThemeContext.Provider>
-    )
+    <ToggleThemeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <MetaMaskProvider>{children}</MetaMaskProvider>
+      </ThemeProvider>
+    </ToggleThemeContext.Provider>
   );
 };

packages/site/src/components/About/AboutCTA.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { MyButton } from '../Button';
 
 type AboutCTAProps = {
@@ -11,18 +12,27 @@ export const AboutCTA: FC<AboutCTAProps> = ({
   handleConnectClick,
   disabled,
 }) => {
+  const theme = useTheme();
+  const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md'));
+
   return (
     <Box
       display="flex"
       flexDirection="column"
       justifyContent="center"
       alignItems="center"
-      marginBottom="180px"
+      marginBottom="6rem"
     >
-      <Typography variant="h1" fontWeight="bold">
+      <Typography
+        variant={screenLessThanMedium ? 'h2' : 'h1'}
+        fontWeight="bold"
+      >
         Stay on top of your recurring transactions.
       </Typography>
-      <Typography variant="h1" fontWeight="bold">
+      <Typography
+        variant={screenLessThanMedium ? 'h2' : 'h1'}
+        fontWeight="bold"
+      >
         Experience the ChainTrack difference today.
       </Typography>
       <Box padding="30px 40px">
@@ -31,9 +41,9 @@ export const AboutCTA: FC<AboutCTAProps> = ({
           onClick={handleConnectClick}
           size="large"
           sx={{
-            fontSize: '25x',
-            fontWeight: 400,
-            padding: '15px 30px',
+            fontSize: '2rem',
+            fontWeight: 500,
+            padding: '20px 40px',
           }}
         >
           Get Started with ChainTrack

packages/site/src/components/About/AboutFAQ.tsx

@@ -5,19 +5,24 @@ import {
   AccordionSummary,
   Box,
   Typography,
+  useMediaQuery,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Grid from '@mui/material/Grid';
+import { useTheme } from '@mui/material/styles';
 
 export const AboutFaq: FC = () => {
+  const theme = useTheme();
+  const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md'));
+
   return (
     <Grid
       display="flex"
       justifyContent="space-between"
-      marginBottom="180px"
+      marginBottom="6rem"
       flexDirection="column"
       gap="48px"
-      width="50%"
+      width={screenLessThanMedium ? '100%' : '50%'}
       className="faq-accordion"
     >
       <Box>

packages/site/src/components/About/AboutFeatureSection.tsx

@@ -1,10 +1,14 @@
 import React, { FC } from 'react';
-import { Typography, styled, Grid, Box } from '@mui/material';
+import { Typography, styled, Grid, useMediaQuery } from '@mui/material';
 import CodeIcon from '@mui/icons-material/Code';
 import StarBorderIcon from '@mui/icons-material/StarBorder';
 import SmartphoneIcon from '@mui/icons-material/Smartphone';
+import { useTheme } from '@mui/material/styles';
 
 export const AboutFeatureSection: FC = () => {
+  const theme = useTheme();
+  const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md'));
+
   const BorderLine = styled('div')(() => ({
     minHeight: '25px',
     margin: '60px 0 40px 0',
@@ -30,16 +34,15 @@ export const AboutFeatureSection: FC = () => {
     <Grid
       display="flex"
       justifyContent="space-between"
-      marginBottom="180px"
+      marginTop="6rem"
+      marginBottom="6rem"
       gap="48px"
     >
-      <Box sx={{ '@media (max-width: 900px)': { display: 'none' } }}>
-        <Typography variant="h2" fontWeight="500">
-          WHAT WE DO
-        </Typography>
-      </Box>
       <Grid width="60%" sx={{ '@media (max-width: 900px)': { width: '100%' } }}>
-        <Typography variant="h1" fontWeight="500">
+        <Typography
+          variant={screenLessThanMedium ? 'h2' : 'h1'}
+          fontWeight="500"
+        >
           Exclusively for MetaMask users, we'll alert you about recurring
           transaction that hasn't taken place.
         </Typography>

packages/site/src/components/About/AboutHero.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { MyButton } from '../Button';
 
@@ -13,24 +13,25 @@ export const AboutHero: FC<AboutHeroProps> = ({
   disabled,
 }) => {
   const theme = useTheme();
+  const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
     <Box
-      height="100vh"
+      height={screenLessThanMedium ? 'auto' : '100vh'}
       display="flex"
       alignItems="center"
       justifyContent="center"
       flexDirection="column"
     >
       <Typography
-        fontSize="80px"
+        fontSize="6rem"
         fontWeight="bold"
         color={theme.palette.secondary.main}
       >
         ChainTrack
       </Typography>
       <Typography
-        fontSize="50px"
+        fontSize="3rem"
         fontWeight="bold"
         marginTop="20px"
         marginBottom="20px"
@@ -40,10 +41,9 @@ export const AboutHero: FC<AboutHeroProps> = ({
       <MyButton
         disabled={disabled}
         onClick={handleConnectClick}
-        variant="outlined"
         size="large"
         sx={{
-          fontSize: '32px',
+          fontSize: '2rem',
           fontWeight: 500,
           padding: '20px 40px',
         }}

packages/site/src/components/About/AboutTestimonials.tsx

@@ -1,34 +1,58 @@
 import React, { FC } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useMediaQuery } from '@mui/material';
 import Grid from '@mui/material/Grid';
+import { useTheme } from '@mui/material/styles';
 
 export const AboutTestimonials: FC = () => {
+  const theme = useTheme();
+  const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md'));
+
   return (
-    <Grid container spacing={8} marginBottom="180px">
-      <Grid container item xs={4} flexDirection="column" gap="12px">
-        <Typography variant="h3" fontWeight="500">
+    <Grid container spacing={screenLessThanMedium ? 4 : 8} marginBottom="6rem">
+      <Grid container item xs={6} flexDirection="column" gap="12px">
+        <Typography
+          variant={screenLessThanMedium ? 'h4' : 'h3'}
+          fontWeight="500"
+        >
           "ChainTrack is one of my first dives into the web3 world. Hope you dig
           it!"
         </Typography>
         <Box>
-          <Typography fontWeight="400" variant="h4">
+          <Typography
+            fontWeight="400"
+            variant={screenLessThanMedium ? 'h5' : 'h4'}
+          >
             Nikolay S.
           </Typography>
-          <Typography fontWeight="400" variant="h4" sx={{ opacity: '40%' }}>
+          <Typography
+            fontWeight="400"
+            variant={screenLessThanMedium ? 'h5' : 'h4'}
+            sx={{ opacity: '40%' }}
+          >
             Software Engineer
           </Typography>
         </Box>
       </Grid>
-      <Grid container item xs={5} flexDirection="column" gap="12px">
-        <Typography variant="h3" fontWeight="500">
+      <Grid container item xs={6} flexDirection="column" gap="12px">
+        <Typography
+          variant={screenLessThanMedium ? 'h4' : 'h3'}
+          fontWeight="500"
+        >
           "ChainTrack exhibits simplicity, effectiveness, and reliability. It
           has significantly improved the fluidity of my MetaMask experience."
         </Typography>
         <Box>
-          <Typography fontWeight="400" variant="h4">
+          <Typography
+            fontWeight="400"
+            variant={screenLessThanMedium ? 'h5' : 'h4'}
+          >
             Dzmitry H.
           </Typography>
-          <Typography fontWeight="400" variant="h4" sx={{ opacity: '40%' }}>
+          <Typography
+            fontWeight="400"
+            variant={screenLessThanMedium ? 'h5' : 'h4'}
+            sx={{ opacity: '40%' }}
+          >
             Software Engineer
           </Typography>
         </Box>

packages/site/src/components/ActionCard.tsx

@@ -6,22 +6,22 @@ import CardActions from '@mui/material/CardActions';
 import * as React from 'react';
 import Card from '@mui/material/Card';
 import { useTheme } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
 
 type CardProps = {
   content: {
     title?: string;
     description: ReactNode;
-    button?: ReactNode;
     buttons?: ReactNode[];
   };
   disabled?: boolean;
   fullWidth?: boolean;
 };
 
 export const ActionCard = ({ content }: CardProps) => {
-  const { title, description, button, buttons } = content;
+  const { title, description, buttons } = content;
   const theme = useTheme();
+  const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
     <Card
@@ -51,8 +51,19 @@ export const ActionCard = ({ content }: CardProps) => {
       <CardContent>
         <Box>{description}</Box>
       </CardContent>
-      {button && <CardActions sx={{ mt: 'auto' }}>{button}</CardActions>}
-      {buttons && <CardActions sx={{ mt: 'auto' }}>{buttons}</CardActions>}
+      {buttons && (
+        <CardActions
+          className="card-actions"
+          sx={{
+            mt: 'auto',
+            display: 'grid',
+            gridTemplateColumns: `repeat(2, 1fr)`,
+            gap: '12px',
+          }}
+        >
+          {buttons}
+        </CardActions>
+      )}
     </Card>
   );
 };

packages/site/src/components/AddMonitorActionCard.tsx

@@ -28,16 +28,16 @@ export function AddMonitorActionCard({
   installedSnap,
   handleSendAddClick,
 }: ConnectActionCardProps) {
-  const button = (
+  const buttons = [
     <MyButton onClick={handleSendAddClick} disabled={!installedSnap}>
       Add Transaction
-    </MyButton>
-  );
+    </MyButton>,
+  ];
 
   const content = {
     title: 'Add Transaction',
     description,
-    button,
+    buttons,
   };
 
   return <ActionCard content={content}></ActionCard>;