Merge pull request #3675 from IntersectMBO/fix/3622-layout-updates

fix(#3622): apply new design system theme changes to home page

Author: MSzalowski

govtool/frontend/src/components/atoms/Typography.tsx

@@ -12,8 +12,11 @@ export const Typography = ({
     headline3: 36,
     headline4: 32,
     headline5: 28,
+    title: 27,
     title1: 24,
+    titleH3: 23,
     title2: 22,
+    body: 21,
     body1: 16,
     body2: 14,
     caption: 12,
@@ -25,8 +28,11 @@ export const Typography = ({
     headline3: 400,
     headline4: 600,
     headline5: 500,
+    title: 500,
     title1: 400,
+    titleH3: 500,
     title2: 500,
+    body: 400,
     body1: 600,
     body2: 500,
     caption: 400,
@@ -38,8 +44,11 @@ export const Typography = ({
     headline3: "44px",
     headline4: "40px",
     headline5: "36px",
+    title: "32px",
+    titleH3: "32px",
     title1: "32px",
     title2: "28px",
+    body: "28px",
     body1: "24px",
     body2: "20px",
     caption: "16px",

govtool/frontend/src/components/atoms/types.ts

@@ -32,8 +32,11 @@ export type TypographyProps = Pick<
     | "headline3"
     | "headline4"
     | "headline5"
+    | "title"
+    | "titleH3"
     | "title1"
     | "title2"
+    | "body"
     | "body1"
     | "body2"
     | "caption";

govtool/frontend/src/components/molecules/HomeCard.tsx

@@ -19,17 +19,28 @@ export const HomeCard = ({ title, description, onCardClick }: Props) => (
       border: "none",
       cursor: onCardClick ? "pointer" : "default",
       outline: "none",
+      p: 3.75,
       "&:focus": {
         boxShadow: "0 0 0 3px rgba(47, 98, 220, 0.5)",
       },
+      "&:hover": {
+        boxShadow: onCardClick
+          ? "0 0 0 3px rgba(47, 98, 220, 0.5)"
+          : "2px 2px 20px 0px rgba(47, 98, 220, 0.20)",
+      },
+      backgroundColor: "white",
     }}
     onCardClick={onCardClick}
     component="button"
     role="button"
     aria-label={`${title}. ${description}`}
     dataTestId={`home-card-${title.replace(/\s+/g, "-").toLowerCase()}`}
   >
-    <Typography component="h3">{title}</Typography>
-    <Typography variant="caption">{description}</Typography>
+    <Typography component="h3" variant="titleH3" sx={{ textAlign: "left" }}>
+      {title}
+    </Typography>
+    <Typography variant="body" sx={{ textAlign: "left" }}>
+      {description}
+    </Typography>
   </Card>
 );

govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx

@@ -106,7 +106,7 @@ export const ConnectWalletTo = () => {
   return (
     <Box my={4} component="section" data-testid="connect-wallet-to-section">
       <Box display="flex" justifyContent="space-between" alignItems="center">
-        <Typography variant="title2">
+        <Typography variant="title">
           {t("home.connectWalletTo.section.title")}
         </Typography>
         <Button
@@ -125,8 +125,8 @@ export const ConnectWalletTo = () => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {CONNECT_WALLET_TO_CARDS.map(({ title, description, path }) => (
           <HomeCard

govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx

@@ -33,7 +33,7 @@ export const HelpBuildGovTool = ({ my = 4 }: { my?: number }) => {
 
   return (
     <Box my={my} component="section" data-testid="help-build-govtool-section">
-      <Typography variant="title2">
+      <Typography variant="title">
         {t("home.helpBuildGovTool.section.title")}
       </Typography>
       <Box
@@ -43,8 +43,8 @@ export const HelpBuildGovTool = ({ my = 4 }: { my?: number }) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {GOVTOOL_CARD_LINKS.map(({ title, description, url }) => (
           <HomeCard

govtool/frontend/src/components/organisms/Home/OpenToAny.tsx

@@ -87,7 +87,7 @@ export const OpenToAny = () => {
       component="section"
       data-testid="open-to-any-and-all-users-section"
     >
-      <Typography variant="title2">
+      <Typography variant="title" component="h2">
         {t("home.openToAny.section.title")}
       </Typography>
       <Box
@@ -97,8 +97,8 @@ export const OpenToAny = () => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {OPEN_TO_ANY_CARDS.map(({ title, description, path, url }) => (
           <HomeCard

govtool/frontend/src/components/organisms/Home/Socials.tsx

@@ -26,7 +26,7 @@ export const Socials = ({ my = 4 }: { my?: number }) => {
 
   return (
     <Box my={my} component="section" data-testid="join-discussion-section">
-      <Typography variant="title2">
+      <Typography variant="title">
         {t("home.joinDiscussion.section.title")}
       </Typography>
       <Box
@@ -36,8 +36,8 @@ export const Socials = ({ my = 4 }: { my?: number }) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {SOCIAL_CARDS.map(({ title, description, url }) => (
           <HomeCard

govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx

@@ -63,7 +63,7 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
 
   return (
     <div>
-      <Typography variant="title2" sx={{ mb: 4, textAlign: align }}>
+      <Typography variant="title" sx={{ mb: 4, textAlign: align }}>
         {t("usefulLinks.title")}
       </Typography>
       <Box
@@ -73,8 +73,8 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(4, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {Object.entries(LINKS).map(([key, { url }]) => (
           <Card
@@ -87,12 +87,13 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
               display: "flex",
               flexDirection: "column",
               gap: 1,
+              backgroundColor: "white",
             }}
           >
-            <Typography>
+            <Typography component="h3" variant="titleH3">
               {t(`usefulLinks.${key as keyof typeof LINKS}.title`)}
             </Typography>
-            <Typography variant="caption" sx={{ mb: 1 }}>
+            <Typography variant="body" sx={{ mb: 1 }}>
               {t(`usefulLinks.${key as keyof typeof LINKS}.description`)}
             </Typography>
             <Link
@@ -110,7 +111,11 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
                 },
               }}
             >
-              <Typography color="primary" variant="body2">
+              <Typography
+                color="primary"
+                variant="body2"
+                sx={{ fontSize: "21px" }}
+              >
                 {t(`usefulLinks.${key as keyof typeof LINKS}.link`)}
               </Typography>
               <img

govtool/frontend/src/pages/Home.tsx

@@ -47,7 +47,8 @@ export const Home = () => {
             sx={{
               whiteSpace: "pre-line",
             }}
-            variant="body1"
+            variant="title"
+            component="h1"
           >
             <Trans
               i18nKey="hero.description"
@@ -60,7 +61,7 @@ export const Home = () => {
                   rel="noopener noreferrer"
                   sx={{
                     cursor: "pointer",
-                    fontSize: 16,
+                    fontSize: 22,
                   }}
                 />,
               ]}