Skip to content

Commit 95edffc

Browse files
MSzalowskiMSzalowski
committed
feat(#3622): home page redesign
1 parent a2cbaff commit 95edffc

File tree

15 files changed

+690
-328
lines changed

15 files changed

+690
-328
lines changed

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import { Chip, Paper, SxProps } from "@mui/material";
1+
import { Chip, Paper, SxProps, PaperProps } from "@mui/material";
22
import { Theme } from "@mui/material/styles";
33
import { PropsWithChildren } from "react";
44

55
import { errorRed, orange, primaryBlue, successGreen } from "@/consts";
66

7-
type CardProps = PropsWithChildren & {
8-
border?: boolean;
9-
elevation?: number;
10-
dataTestId?: string;
11-
label?: string;
12-
labelDataTestId?: string;
13-
sx?: SxProps<Theme>;
14-
variant?: "default" | "error" | "primary" | "success" | "warning";
15-
onCardClick?: () => void;
16-
};
7+
type CardProps = Omit<PaperProps, "variant"> &
8+
PropsWithChildren & {
9+
border?: boolean;
10+
elevation?: number;
11+
dataTestId?: string;
12+
label?: string;
13+
labelDataTestId?: string;
14+
sx?: SxProps<Theme>;
15+
variant?: "default" | "error" | "primary" | "success" | "warning";
16+
onCardClick?: () => void;
17+
};
1718

1819
const COLORS = {
1920
default: {
@@ -48,14 +49,22 @@ export const Card = ({
4849
labelDataTestId = "card-label",
4950
sx,
5051
onCardClick,
52+
...props
5153
}: CardProps) => {
5254
const colors = COLORS[variant];
5355

5456
return (
5557
<Paper
58+
{...props}
5659
elevation={elevation}
5760
data-testid={dataTestId}
5861
onClick={onCardClick}
62+
onKeyDown={(e) => {
63+
if (e.key === "Enter" || e.key === " ") {
64+
e.preventDefault();
65+
onCardClick?.();
66+
}
67+
}}
5968
sx={{
6069
backgroundColor: (theme) =>
6170
colors.backgroundColor ?? `${theme.palette.neutralWhite}4D`,

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Card } from "./Card";
2+
import { Typography } from "../atoms";
3+
4+
type Props = {
5+
title: string;
6+
description: string;
7+
onCardClick?: () => void;
8+
};
9+
10+
export const HomeCard = ({ title, description, onCardClick }: Props) => (
11+
<Card
12+
sx={{
13+
flexBasis: 0,
14+
boxShadow: "2px 2px 20px 0px rgba(47, 98, 220, 0.20)",
15+
boxSizing: "border-box",
16+
display: "flex",
17+
flexDirection: "column",
18+
gap: 1,
19+
border: "none",
20+
cursor: onCardClick ? "pointer" : "default",
21+
outline: "none",
22+
"&:focus": {
23+
boxShadow: "0 0 0 3px rgba(47, 98, 220, 0.5)",
24+
},
25+
}}
26+
onCardClick={onCardClick}
27+
component="button"
28+
role="button"
29+
aria-label={`${title}. ${description}`}
30+
>
31+
<Typography component="h3">{title}</Typography>
32+
<Typography variant="caption">{description}</Typography>
33+
</Card>
34+
);

‎govtool/frontend/src/components/organisms/Hero.tsx‎

Lines changed: 0 additions & 109 deletions
This file was deleted.

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { Box } from "@mui/material";
2+
import { useTranslation } from "react-i18next";
3+
import { useNavigate } from "react-router-dom";
4+
5+
import I18n from "@/i18n";
6+
import { BUDGET_DISCUSSION_PATHS, PATHS, PDF_PATHS } from "@/consts";
7+
import { useCardano, useModal } from "@/context";
8+
9+
import { Typography, Button } from "../../atoms";
10+
import { HomeCard } from "../../molecules/HomeCard";
11+
12+
const isProposalDiscussionForumEnabled = JSON.parse(
13+
import.meta.env.VITE_IS_PROPOSAL_DISCUSSION_FORUM_ENABLED,
14+
);
15+
16+
const CONNECT_WALLET_TO_CARDS = [
17+
...(isProposalDiscussionForumEnabled
18+
? [
19+
{
20+
title: I18n.t(
21+
"home.connectWalletTo.cards.discussBudgetProposals.title",
22+
),
23+
description: I18n.t(
24+
"home.connectWalletTo.cards.discussBudgetProposals.description",
25+
),
26+
path: BUDGET_DISCUSSION_PATHS.budgetDiscussion,
27+
},
28+
{
29+
title: I18n.t(
30+
"home.connectWalletTo.cards.createBudgetProposal.title",
31+
),
32+
description: I18n.t(
33+
"home.connectWalletTo.cards.createBudgetProposal.description",
34+
),
35+
path: BUDGET_DISCUSSION_PATHS.budgetDiscussion,
36+
},
37+
{
38+
title: I18n.t(
39+
"home.connectWalletTo.cards.discussGovernanceActions.title",
40+
),
41+
description: I18n.t(
42+
"home.connectWalletTo.cards.discussGovernanceActions.description",
43+
),
44+
path: PDF_PATHS.proposalDiscussion,
45+
},
46+
{
47+
title: I18n.t(
48+
"home.connectWalletTo.cards.proposeGovernanceAction.title",
49+
),
50+
description: I18n.t(
51+
"home.connectWalletTo.cards.proposeGovernanceAction.description",
52+
),
53+
path: PDF_PATHS.proposalDiscussionPropose,
54+
},
55+
]
56+
: []),
57+
{
58+
title: I18n.t("home.connectWalletTo.cards.registerToVote.title"),
59+
description: I18n.t(
60+
"home.connectWalletTo.cards.registerToVote.description",
61+
),
62+
path: PATHS.registerAsDirectVoter,
63+
},
64+
{
65+
title: I18n.t("home.connectWalletTo.cards.delegateVote.title"),
66+
description: I18n.t("home.connectWalletTo.cards.delegateVote.description"),
67+
path: PATHS.dRepDirectory,
68+
},
69+
{
70+
title: I18n.t("home.connectWalletTo.cards.becomeDRep.title"),
71+
description: I18n.t("home.connectWalletTo.cards.becomeDRep.description"),
72+
path: PATHS.registerAsdRep,
73+
},
74+
{
75+
title: I18n.t("home.connectWalletTo.cards.voteOnGovernanceActions.title"),
76+
description: I18n.t(
77+
"home.connectWalletTo.cards.voteOnGovernanceActions.description",
78+
),
79+
path: PATHS.dashboardGovernanceActions,
80+
},
81+
];
82+
83+
export const ConnectWalletTo = () => {
84+
const { t } = useTranslation();
85+
const { openModal } = useModal();
86+
const { isEnabled, stakeKey } = useCardano();
87+
const navigate = useNavigate();
88+
89+
const handleCardClick = ({ path }: { path?: string }) => {
90+
if (!path) return;
91+
openModal({
92+
type: "chooseWallet",
93+
state: {
94+
pathToNavigate: path,
95+
},
96+
});
97+
};
98+
99+
const onClickConnectButton = () => {
100+
if (isEnabled && stakeKey) {
101+
navigate(PATHS.dashboard);
102+
}
103+
openModal({ type: "chooseWallet" });
104+
};
105+
106+
return (
107+
<Box my={4} component="section" data-testid="connect-wallet-to-section">
108+
<Box display="flex" justifyContent="space-between" alignItems="center">
109+
<Typography variant="title2">
110+
{t("home.connectWalletTo.section.title")}
111+
</Typography>
112+
<Button
113+
data-testid="connect-wallet-button"
114+
onClick={onClickConnectButton}
115+
size="extraLarge"
116+
variant="contained"
117+
>
118+
{t("wallet.connectWallet")}
119+
</Button>
120+
</Box>
121+
<Box
122+
display="grid"
123+
gridTemplateColumns={{
124+
xxs: "repeat(1, 1fr)",
125+
sm: "repeat(2, 1fr)",
126+
lg: "repeat(3, 1fr)",
127+
}}
128+
gap={4}
129+
mt={4}
130+
>
131+
{CONNECT_WALLET_TO_CARDS.map(({ title, description, path }) => (
132+
<HomeCard
133+
key={title}
134+
title={title}
135+
description={description}
136+
onCardClick={path ? () => handleCardClick({ path }) : undefined}
137+
/>
138+
))}
139+
</Box>
140+
</Box>
141+
);
142+
};

0 commit comments

Comments
 (0)