Merge pull request #3684 from IntersectMBO/revert/3622

revert(#3683): revert changes introduced in #3622

Author: MSzalowski

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

@@ -12,11 +12,8 @@ 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,
@@ -28,11 +25,8 @@ 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,
@@ -44,11 +38,8 @@ 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,11 +32,8 @@ export type TypographyProps = Pick<
     | "headline3"
     | "headline4"
     | "headline5"
-    | "title"
-    | "titleH3"
     | "title1"
     | "title2"
-    | "body"
     | "body1"
     | "body2"
     | "caption";

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

@@ -1,20 +1,19 @@
-import { Chip, Paper, SxProps, PaperProps } from "@mui/material";
+import { Chip, Paper, SxProps } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { PropsWithChildren } from "react";
 
 import { errorRed, orange, primaryBlue, successGreen } from "@/consts";
 
-type CardProps = Omit<PaperProps, "variant"> &
-  PropsWithChildren & {
-    border?: boolean;
-    elevation?: number;
-    dataTestId?: string;
-    label?: string;
-    labelDataTestId?: string;
-    sx?: SxProps<Theme>;
-    variant?: "default" | "error" | "primary" | "success" | "warning";
-    onCardClick?: () => void;
-  };
+type CardProps = PropsWithChildren & {
+  border?: boolean;
+  elevation?: number;
+  dataTestId?: string;
+  label?: string;
+  labelDataTestId?: string;
+  sx?: SxProps<Theme>;
+  variant?: "default" | "error" | "primary" | "success" | "warning";
+  onCardClick?: () => void;
+};
 
 const COLORS = {
   default: {
@@ -49,22 +48,14 @@ export const Card = ({
   labelDataTestId = "card-label",
   sx,
   onCardClick,
-  ...props
 }: CardProps) => {
   const colors = COLORS[variant];
 
   return (
     <Paper
-      {...props}
       elevation={elevation}
       data-testid={dataTestId}
       onClick={onCardClick}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onCardClick?.();
-        }
-      }}
       sx={{
         backgroundColor: (theme) =>
           colors.backgroundColor ?? `${theme.palette.neutralWhite}4D`,

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

@@ -0,0 +1,109 @@
+import { useMemo } from "react";
+import { Trans } from "react-i18next";
+import { Box, Link } from "@mui/material";
+import { ArrowDownward } from "@mui/icons-material";
+
+import { Button, Typography } from "@atoms";
+import { IMAGES } from "@consts";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { openInNewTab } from "@utils";
+
+export const Hero = () => {
+  const { isMobile, screenWidth } = useScreenDimension();
+  const { t } = useTranslation();
+  const IMAGE_SIZE = screenWidth < 640 ? 300 : screenWidth < 860 ? 400 : 600;
+
+  const paddingHorizontal = useMemo(() => {
+    if (screenWidth < 640) return 3;
+    if (screenWidth < 1512) return 9.375;
+    if (screenWidth < 1728) return 14;
+    if (screenWidth < 1920) return 27.375;
+    if (screenWidth < 2560) return 39.375;
+    return 49.25;
+  }, [screenWidth]);
+
+  const imageRightMargin = useMemo(() => {
+    if (screenWidth <= 860) return -(IMAGE_SIZE / 4);
+    if (screenWidth <= 1440) return -(IMAGE_SIZE / 15);
+    if (screenWidth <= 1728) return screenWidth / 20;
+    return screenWidth / 11;
+  }, [screenWidth]);
+
+  const onClickVotingPower = () =>
+    openInNewTab("https://docs.cardano.org/about-cardano/governance-overview");
+
+  return (
+    <Box
+      alignItems="center"
+      display="flex"
+      flex={1}
+      marginTop={16}
+      flexDirection="row"
+      overflow="visible"
+      position="relative"
+      px={paddingHorizontal}
+    >
+      <Box alignItems="center" flex={1} height="min-content">
+        <Typography
+          variant={screenWidth < 860 ? "headline2" : "headline1"}
+          sx={{ whiteSpace: "pre-line" }}
+          {...(screenWidth < 430 && { fontSize: 50 })}
+        >
+          {t("hero.headline")}
+        </Typography>
+        <Typography
+          fontWeight={400}
+          sx={{
+            maxWidth: 725,
+            my: 4,
+            whiteSpace: "pre-line",
+          }}
+          variant="title2"
+        >
+          <Trans
+            i18nKey="hero.description"
+            components={[
+              <Link
+                data-testid="voting-power-link"
+                onClick={onClickVotingPower}
+                sx={{
+                  cursor: "pointer",
+                }}
+              />,
+            ]}
+          />
+        </Typography>
+        <Button
+          data-testid="hero-connect-wallet-button"
+          onClick={() => {
+            const homeCards =
+              window.document.getElementsByClassName("home-cards")[0];
+
+            homeCards.scrollIntoView({
+              behavior: "smooth",
+              block: "nearest",
+            });
+          }}
+          endIcon={<ArrowDownward />}
+          size={isMobile ? "medium" : "extraLarge"}
+        >
+          {t("hero.connectWallet")}
+        </Button>
+      </Box>
+      <Box
+        flex={1}
+        position="absolute"
+        right={imageRightMargin}
+        top={-80}
+        zIndex={-1}
+      >
+        <img
+          alt="hero"
+          src={IMAGES.heroImage}
+          width={IMAGE_SIZE}
+          height={IMAGE_SIZE}
+        />
+      </Box>
+    </Box>
+  );
+};