feat(#3622): home page redesign

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

@@ -1,19 +1,20 @@
-import { Chip, Paper, SxProps } from "@mui/material";
+import { Chip, Paper, SxProps, PaperProps } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { PropsWithChildren } from "react";
 
 import { errorRed, orange, primaryBlue, successGreen } from "@/consts";
 
-type CardProps = PropsWithChildren & {
-  border?: boolean;
-  elevation?: number;
-  dataTestId?: string;
-  label?: string;
-  labelDataTestId?: string;
-  sx?: SxProps<Theme>;
-  variant?: "default" | "error" | "primary" | "success" | "warning";
-  onCardClick?: () => void;
-};
+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;
+  };
 
 const COLORS = {
   default: {
@@ -48,14 +49,22 @@ 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,34 @@
+import { Card } from "./Card";
+import { Typography } from "../atoms";
+
+type Props = {
+  title: string;
+  description: string;
+  onCardClick?: () => void;
+};
+
+export const HomeCard = ({ title, description, onCardClick }: Props) => (
+  <Card
+    sx={{
+      flexBasis: 0,
+      boxShadow: "2px 2px 20px 0px rgba(47, 98, 220, 0.20)",
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: 1,
+      border: "none",
+      cursor: onCardClick ? "pointer" : "default",
+      outline: "none",
+      "&:focus": {
+        boxShadow: "0 0 0 3px rgba(47, 98, 220, 0.5)",
+      },
+    }}
+    onCardClick={onCardClick}
+    component="button"
+    role="button"
+    aria-label={`${title}. ${description}`}
+  >
+    <Typography component="h3">{title}</Typography>
+    <Typography variant="caption">{description}</Typography>
+  </Card>
+);

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

@@ -0,0 +1,142 @@
+import { Box } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import I18n from "@/i18n";
+import { BUDGET_DISCUSSION_PATHS, PATHS, PDF_PATHS } from "@/consts";
+import { useCardano, useModal } from "@/context";
+
+import { Typography, Button } from "../../atoms";
+import { HomeCard } from "../../molecules/HomeCard";
+
+const isProposalDiscussionForumEnabled = JSON.parse(
+  import.meta.env.VITE_IS_PROPOSAL_DISCUSSION_FORUM_ENABLED || false,
+);
+
+const CONNECT_WALLET_TO_CARDS = [
+  ...(isProposalDiscussionForumEnabled
+    ? [
+        {
+          title: I18n.t(
+            "home.connectWalletTo.cards.discussBudgetProposals.title",
+          ),
+          description: I18n.t(
+            "home.connectWalletTo.cards.discussBudgetProposals.description",
+          ),
+          path: BUDGET_DISCUSSION_PATHS.budgetDiscussion,
+        },
+        {
+          title: I18n.t(
+            "home.connectWalletTo.cards.createBudgetProposal.title",
+          ),
+          description: I18n.t(
+            "home.connectWalletTo.cards.createBudgetProposal.description",
+          ),
+          path: BUDGET_DISCUSSION_PATHS.budgetDiscussion,
+        },
+        {
+          title: I18n.t(
+            "home.connectWalletTo.cards.discussGovernanceActions.title",
+          ),
+          description: I18n.t(
+            "home.connectWalletTo.cards.discussGovernanceActions.description",
+          ),
+          path: PDF_PATHS.proposalDiscussion,
+        },
+        {
+          title: I18n.t(
+            "home.connectWalletTo.cards.proposeGovernanceAction.title",
+          ),
+          description: I18n.t(
+            "home.connectWalletTo.cards.proposeGovernanceAction.description",
+          ),
+          path: PDF_PATHS.proposalDiscussionPropose,
+        },
+      ]
+    : []),
+  {
+    title: I18n.t("home.connectWalletTo.cards.registerToVote.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.registerToVote.description",
+    ),
+    path: PATHS.registerAsDirectVoter,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.delegateVote.title"),
+    description: I18n.t("home.connectWalletTo.cards.delegateVote.description"),
+    path: PATHS.dRepDirectory,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.becomeDRep.title"),
+    description: I18n.t("home.connectWalletTo.cards.becomeDRep.description"),
+    path: PATHS.registerAsdRep,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.voteOnGovernanceActions.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.voteOnGovernanceActions.description",
+    ),
+    path: PATHS.dashboardGovernanceActions,
+  },
+];
+
+export const ConnectWalletTo = () => {
+  const { t } = useTranslation();
+  const { openModal } = useModal();
+  const { isEnabled, stakeKey } = useCardano();
+  const navigate = useNavigate();
+
+  const handleCardClick = ({ path }: { path?: string }) => {
+    if (!path) return;
+    openModal({
+      type: "chooseWallet",
+      state: {
+        pathToNavigate: path,
+      },
+    });
+  };
+
+  const onClickConnectButton = () => {
+    if (isEnabled && stakeKey) {
+      navigate(PATHS.dashboard);
+    }
+    openModal({ type: "chooseWallet" });
+  };
+
+  return (
+    <Box my={4} component="section" data-testid="connect-wallet-to-section">
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography variant="title2">
+          {t("home.connectWalletTo.section.title")}
+        </Typography>
+        <Button
+          data-testid="connect-wallet-button"
+          onClick={onClickConnectButton}
+          size="extraLarge"
+          variant="contained"
+        >
+          {t("wallet.connectWallet")}
+        </Button>
+      </Box>
+      <Box
+        display="grid"
+        gridTemplateColumns={{
+          xxs: "repeat(1, 1fr)",
+          sm: "repeat(2, 1fr)",
+          lg: "repeat(3, 1fr)",
+        }}
+        gap={4}
+        mt={4}
+      >
+        {CONNECT_WALLET_TO_CARDS.map(({ title, description, path }) => (
+          <HomeCard
+            key={title}
+            title={title}
+            description={description}
+            onCardClick={path ? () => handleCardClick({ path }) : undefined}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};