fix: polish overall design

src/components/Careers/Values/index.tsx

@@ -3,7 +3,7 @@ import { Container } from '@mui/system'
 import clsx from 'clsx'
 import type { ReactElement } from 'react'
 
-import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 
 import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'

src/components/Careers/Values/styles.module.css

@@ -73,6 +73,11 @@
   text-align: center;
 }
 
+.icon {
+  width: 16px;
+  height: 16px;
+}
+
 .icon path {
   fill: var(--mui-palette-primary-main);
 }

src/components/Core/LinkedCardGrid/index.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Container, Grid, Typography } from '@mui/material'
-import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 import css from './styles.module.css'
 import FourSquareAnimation from '@/components/common/FourSquareAnimation'
 import ThreeSquareAnimation from '@/components/common/ThreeSquareAnimation'

src/components/Core/LinkedCardGrid/styles.module.css

@@ -52,6 +52,8 @@
   position: absolute;
   top: 32px;
   right: 32px;
+  width: 16px;
+  height: 16px;
   transition: transform var(--transition-duration);
 }
 

src/components/Ecosystem/Cards/index.tsx

@@ -1,41 +1,39 @@
 import { type BaseBlock } from '@/components/Home/types'
 import css from './styles.module.css'
-import { Container, Grid, Typography } from '@mui/material'
+import { Grid, Typography } from '@mui/material'
 import Link from 'next/link'
 import clsx from 'clsx'
 
 const Cards = ({ items, stacked = false }: Pick<BaseBlock, 'items'> & { stacked?: boolean }) => {
   return (
-    <Container>
-      <Grid container>
-        {items?.map(({ title, text, link, image }, index) => (
-          <Grid
-            key={index}
-            item
-            xs={12}
-            md={stacked ? 12 : 12 / items.length}
-            className={clsx(css.card, stacked && css.stacked)}
-          >
-            <div className={css.cardContent}>
-              <Typography variant="h4" component="div">
-                {title}
-              </Typography>
-              {image && <img src={image.src} alt={image.alt} className={css.cardImage} />}
-            </div>
-            {text && (
-              <Typography color="primary.light" mt={1}>
-                {text}
-              </Typography>
-            )}
-            {link && (
-              <Link href={link.href} target="_blank" rel="noreferrer" className={css.cardLink}>
-                {link.title}
-              </Link>
-            )}
-          </Grid>
-        ))}
-      </Grid>
-    </Container>
+    <Grid container>
+      {items?.map(({ title, text, link, image }, index) => (
+        <Grid
+          key={index}
+          item
+          xs={12}
+          md={stacked ? 12 : 12 / items.length}
+          className={clsx(css.card, stacked && css.stacked)}
+        >
+          <div className={css.cardContent}>
+            <Typography variant="h5" component="div">
+              {title}
+            </Typography>
+            {image && <img src={image.src} alt={image.alt} className={css.cardImage} />}
+          </div>
+          {text && (
+            <Typography color="primary.light" mt={1}>
+              {text}
+            </Typography>
+          )}
+          {link && (
+            <Link href={link.href} target="_blank" rel="noreferrer" className={css.cardLink}>
+              {link.title}
+            </Link>
+          )}
+        </Grid>
+      ))}
+    </Grid>
   )
 }
 

src/components/Ecosystem/Cards/styles.module.css

@@ -58,6 +58,11 @@
   justify-content: space-between;
 }
 
+.cardImage {
+  width: 16px;
+  height: 16px;
+}
+
 @media (min-width: 600px) {
   .card:first-of-type {
     border-top-right-radius: 0;

src/components/Ecosystem/Intro/index.tsx

@@ -12,7 +12,7 @@ const EcosystemIntro = ({ title, text }: BaseBlock) => {
           <Typography variant="h1" mb={4}>
             {title}
           </Typography>
-          <Typography variant="h4" component="div" mb={5}>
+          <Typography variant="h5" component="div" mb={5}>
             {text}
           </Typography>
         </Grid>

src/components/Governance/Delegates/index.tsx

@@ -31,7 +31,7 @@ const DelegateCard = (props: Delegate) => (
       </Avatar>
 
       <div>
-        <Typography variant="h4" className={css.name}>
+        <Typography variant="h5" className={css.name}>
           {props.name}
         </Typography>
 
@@ -61,7 +61,7 @@ const Delegates = (props: BaseBlock & { footer: { text: string; highlight: strin
     <Container className={layoutCss.containerMedium}>
       <HeaderCTA {...props} />
 
-      <Grid container position="relative" className={css.cardGrid} spacing={{ xs: '16px', md: '30px', xl: '50px' }}>
+      <Grid container className={css.cardGrid} spacing={{ xs: '16px', md: '30px', xl: '50px' }}>
         {delegatesData.map((item, index) => (
           <Grid key={index} item xs={12} md={4}>
             <DelegateCard {...item} />

src/components/Governance/Proposals/Proposals.tsx

@@ -27,9 +27,9 @@ const ProposalRow = ({ title, state, href }: Omit<SnapshotProposal, 'id'> & { hr
 
   return (
     <a href={href} target="_blank" rel="noreferrer" className={css.proposalRow}>
-      <Typography variant="h4" maxWidth={{ sm: '.6' }}>
+      <Typography variant="h5" maxWidth={{ sm: '.6' }}>
         <Typography
-          variant="h4"
+          variant="h5"
           component="span"
           color="primary.light"
           marginRight={1}

src/components/Home/BigIconsCardGrid/index.tsx

@@ -4,7 +4,7 @@ import { Container, Grid, Typography } from '@mui/material'
 import LinkButton from '@/components/common/LinkButton'
 import css from './styles.module.css'
 import layoutCss from '@/components/common/styles.module.css'
-import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 import type { BaseBlock } from '@/components/Home/types'
 import Link from 'next/link'
 
@@ -33,7 +33,7 @@ const BigIconsCardGrid = ({ items }: { items: Array<Partial<BaseBlock> & { video
 
               <div className={css.tag}>{item.text}</div>
 
-              <Typography variant="h3" mb={5} mt={2} width="80%">
+              <Typography variant="h5" mb={5} mt={2} width="80%">
                 {item.title}
               </Typography>
 

src/components/Home/BigIconsCardGrid/styles.module.css

@@ -58,6 +58,8 @@
   position: absolute;
   top: 32px;
   right: 32px;
+  width: 16px;
+  height: 16px;
   transition: transform var(--transition-duration);
 }
 

src/components/Home/Blog/index.tsx

@@ -24,7 +24,7 @@ const BlogCard = ({ title, link, image, isBig = false }: Partial<BaseBlock> & {
             </Typography>
           </div>
 
-          <Typography variant="h3" className={clsx(css.title, { [css.main]: isBig })}>
+          <Typography variant="h4" className={clsx(css.title, { [css.main]: isBig })}>
             {title}
           </Typography>
         </div>

src/components/Home/Governance/index.tsx

@@ -12,15 +12,13 @@ const Governance = ({ caption, title, text, items, link }: BaseBlock) => {
           <Container className={`${layoutCss.containerMedium} ${css.container}`}>
             <Grid container columnSpacing={2} rowGap="20px">
               <Grid item xs={12} md={6}>
-                <Typography variant="caption" className={css.caption}>
-                  {caption}
-                </Typography>
+                <Typography variant="caption">{caption}</Typography>
                 <Box mt={{ xs: '20px', md: '48px' }}>
                   <Typography variant="h2">{title}</Typography>
                 </Box>
               </Grid>
               <Grid item xs={12} md={6} display="flex" alignItems="center">
-                <Typography color="primary.light">{text}</Typography>
+                <Typography>{text}</Typography>
               </Grid>
             </Grid>
 

src/components/Home/Governance/styles.module.css

@@ -3,13 +3,10 @@
   margin-top: 80px;
 }
 
-.caption {
-  position: relative;
-  z-index: 1;
-}
-
 @media (min-width: 600px) {
   .container {
+    position: relative;
+    z-index: 1;
     margin-bottom: 140px;
   }
 

src/components/Home/LinkCard/index.tsx

@@ -1,5 +1,5 @@
 import LinkButton from '@/components/common/LinkButton'
-import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 import { type BaseBlock } from '@/components/Home/types'
 import { Typography } from '@mui/material'
 import css from './styles.module.css'
@@ -13,7 +13,7 @@ const LinkCard = ({ caption, title, text, link }: Partial<BaseBlock>) => (
         </div>
 
         <div className={css.cardBody}>
-          <Typography variant="h3" className={css.title}>
+          <Typography variant="h4" className={css.title}>
             {title}
           </Typography>
 

src/components/Home/LinkCard/styles.module.css

@@ -83,5 +83,7 @@
   position: absolute;
   top: 24px;
   right: 24px;
+  width: 16px;
+  height: 16px;
   transition: transform var(--transition-duration);
 }

src/components/Home/SafeAtScale/styles.module.css

@@ -78,11 +78,6 @@
   position: relative;
 }
 
-.metricsWrapper *,
-.metricsInner * {
-  margin: 0 1.5vw;
-}
-
 .metric {
   transition: opacity var(--metrics-fade-time) ease calc(var(--metrics-show-delay) + var(--i) * var(--metrics-stagger));
   opacity: 1;
@@ -223,12 +218,7 @@
 }
 
 @media (min-width: 1200px) {
-  .metricsWrapper *,
-  .metricsInner * {
-    margin: 0 16px;
-  }
-
-  .title br {
-    display: inherit;
+  .metricsInner {
+    gap: 32px;
   }
 }

src/components/Pressroom/MailToCard/index.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@mui/material'
-import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 import commonCss from '../styles.module.css'
 import { COMMS_EMAIL } from '@/config/constants'
 

src/components/Pressroom/MediaKit/index.tsx

@@ -2,7 +2,7 @@ import { Container, Divider, Grid, Typography } from '@mui/material'
 import NextLink from 'next/link'
 import { PRESS_LINK } from '@/config/constants'
 import MailToCard from '@/components/Pressroom/MailToCard'
-import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 import css from './styles.module.css'
 import commonCss from '../styles.module.css'
 

src/components/Pressroom/styles.module.css

@@ -29,6 +29,8 @@
 
 .icon {
   transition: transform var(--transition-duration);
+  width: 16px;
+  height: 16px;
 }
 
 .icon path {

src/components/Token/Hero/index.tsx

@@ -1,6 +1,6 @@
 import css from './styles.module.css'
 import { motion } from 'framer-motion'
-import { Box, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import OrbitRingsList from '@/components/Token/Hero/token-hero-rings.json'
 import OrbitPath from '@/components/Token/OrbitPath'
 import Floater, { type AnimationDirection } from '@/components/Token/Floaters'
@@ -41,9 +41,9 @@ const Hero = (props: BaseBlockEntry) => {
         {/* Token Hero Content */}
         <div className={css.container}>
           <Typography variant="h5">{caption}</Typography>
-          <Box className={css.title}>
+          <div className={css.title}>
             <RichText {...title} />
-          </Box>
+          </div>
 
           <ButtonsWrapper buttons={buttonsList} />
 

src/components/Token/Hero/styles.module.css

@@ -57,7 +57,6 @@
 }
 
 .title {
-  color: white;
   text-align: center;
   width: max-content;
   max-width: 800px;

src/components/Wallet/Stepper/index.tsx

@@ -23,15 +23,15 @@ const CustomStepper = ({ steps }: { steps: StepsType }) => (
     {steps.map(({ label, description, state }) => (
       <Step key={label}>
         <StepLabel sx={{ py: 0 }} icon={<CircleIcon className={clsx(css.icon, state && css.iconActive)} />}>
-          <Typography variant="h4" color="white">
+          <Typography variant="h5" color="white">
             {label}
           </Typography>
         </StepLabel>
         <StepContent className={clsx(css.stepContent, state === StepState.ACTIVE && css.activeBorder)}>
           <ul className={css.list}>
             {description?.map((item, index) => (
-              <li className={css.listItem} key={index}>
-                <Typography key={index} color="primary.light" marginTop="18px" display="inline">
+              <li key={index}>
+                <Typography color="primary.light" marginTop="18px" display="inline">
                   {item}
                 </Typography>
               </li>

src/components/common/HeaderCTA/index.tsx

@@ -11,7 +11,7 @@ type HeaderCTAProps = BaseBlock & {
 
 const HeaderCTA = (props: HeaderCTAProps) => {
   return (
-    <Grid container mb={{ sm: 5, md: 7 }}>
+    <Grid container mb={{ xs: 5, md: 7 }}>
       <Grid item xs={12} md={!props.bigTitle ? 8 : undefined}>
         <Typography variant="h2" mb={3} className={`${props.bigTitle ? css.bigTitle : null}`}>
           {props.title}

src/components/common/ItemGrid/index.tsx

@@ -21,7 +21,7 @@ const ItemGrid = ({ title, items, icon }: Partial<BaseBlock> & { icon?: React.Re
                   <div>
                     <div className={css.titleWrapper}>
                       {icon}
-                      <Typography variant="h4">{title}</Typography>
+                      <Typography variant="h5">{title}</Typography>
                     </div>
 
                     {text ? (

src/components/common/LinkCard/index.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material'
 import LinkButton from '@/components/common/LinkButton'
-import ArrowIcon from '@/public/images/arrow-out-icon.svg'
+import ArrowIcon from '@/public/images/arrow-out-square-corner.svg'
 import SafeLink from '@/components/common/SafeLink'
 import css from './styles.module.css'
 import type { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
@@ -25,7 +25,7 @@ const LinkCard = ({ caption, title, image, link, icon, highlight }: CardProps) =
     </div>
 
     <div className={css.cardBody}>
-      <Typography variant="h3" className={css.title}>
+      <Typography variant="h4" className={css.title}>
         {title}
       </Typography>