Skip to content

Commit 012face

Browse files
Sworzen1Sworzen1
authored
Merge pull request #618 from IntersectMBO/feat/578-update-all-cards-text-and-buttons
feat/578-update-all-cards-text-and-buttons
2 parents 40c343b + e2c75d8 commit 012face

17 files changed

+353
-185
lines changed

‎govtool/frontend/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
overscroll-behavior-y: none;
1919
padding: 0;
2020
}
21+
#root {
22+
white-space: pre-line;
23+
}
2124
</style>
2225
</head>
2326
<body>

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

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
import { Box, Typography } from "@mui/material";
1+
import { Box, SxProps, Typography } from "@mui/material";
22

33
import { CopyButton } from "@atoms";
4+
import { gray } from "@consts";
5+
46
import { Card } from "./Card";
5-
import { gray } from "@/consts";
67

78
type CopyableInfoProps = {
89
dataTestId?: string;
910
label: string;
1011
value: string;
12+
sx?: SxProps;
1113
};
1214

1315
export const CopyableInfo = ({
1416
dataTestId,
1517
label,
1618
value,
19+
sx,
1720
}: CopyableInfoProps) => (
1821
<Card
1922
border
@@ -24,24 +27,23 @@ export const CopyableInfo = ({
2427
py: 1,
2528
borderColor: gray.c100,
2629
backgroundColor: (theme) => theme.palette.neutralWhite,
30+
...sx,
2731
}}
2832
>
33+
<Typography color={gray.c300} fontSize={12} fontWeight={500}>
34+
{label}
35+
</Typography>
2936
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
30-
<Typography color={gray.c300} fontSize={12} fontWeight={500}>
31-
{label}
32-
</Typography>
33-
<CopyButton text={value} />
34-
</Box>
35-
<Box display="flex" flexDirection="row" alignItems="center">
3637
<Typography
3738
textOverflow="ellipsis"
3839
overflow="hidden"
3940
fontSize={14}
4041
fontWeight={500}
41-
maxWidth="calc(100% - 1.5rem)"
42+
width="90%"
4243
>
4344
{value}
4445
</Typography>
46+
<CopyButton text={value} />
4547
</Box>
4648
</Card>
4749
);

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

+31-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Box, Skeleton } from "@mui/material";
22
import { FC, ReactNode } from "react";
33

4-
import { LoadingButton, LoadingButtonProps, Typography } from "@atoms";
4+
import { Button, LoadingButton, LoadingButtonProps, Typography } from "@atoms";
55
import { useScreenDimension, useTranslation } from "@hooks";
66
import { Card } from "./Card";
7+
import { openInNewTab } from "@/utils";
78

89
export type DashboardActionCardProps = {
910
buttons?: LoadingButtonProps[];
@@ -12,8 +13,10 @@ export type DashboardActionCardProps = {
1213
description?: ReactNode;
1314
imageURL?: string;
1415
isLoading?: boolean;
16+
isInProgressOnCard?: boolean;
1517
state?: "active" | "inProgress" | "default";
1618
title?: ReactNode;
19+
transactionId?: string;
1720
};
1821

1922
export const DashboardActionCard: FC<DashboardActionCardProps> = ({
@@ -26,12 +29,17 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
2629
description,
2730
imageURL,
2831
isLoading = false,
32+
isInProgressOnCard = true,
2933
state = "default",
3034
title,
35+
transactionId,
3136
} = props;
3237

3338
const { screenWidth } = useScreenDimension();
3439

40+
const onClickShowTransaction = () =>
41+
openInNewTab(`https://sancho.cexplorer.io/tx/${transactionId}`);
42+
3543
return (
3644
<Card
3745
{...(state === "inProgress" && {
@@ -40,10 +48,10 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
4048
variant: "warning",
4149
})}
4250
sx={{
51+
backgroundColor: state === "active" ? "#F0F4FF" : undefined,
4352
flex: 1,
4453
display: "flex",
4554
flexDirection: "column",
46-
gap: 3,
4755
maxWidth: 524,
4856
}}
4957
>
@@ -69,11 +77,15 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
6977
{title ? (
7078
<Typography sx={{ mt: 2 }} variant="title2">
7179
{isLoading ? <Skeleton variant="rounded" /> : title}
72-
</Typography>
73-
) : null}
74-
{state === "inProgress" && !isLoading ? (
75-
<Typography variant="title2" fontWeight={700}>
76-
{t("inProgress")}
80+
{state === "inProgress" && !isLoading && isInProgressOnCard ? (
81+
<Typography
82+
variant="title2"
83+
fontWeight={600}
84+
sx={{ display: "inline" }}
85+
>
86+
{` ${t("inProgress")}`}
87+
</Typography>
88+
) : null}
7789
</Typography>
7890
) : null}
7991
{description ? (
@@ -93,10 +105,20 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
93105
) : null}
94106
</Box>
95107
{children}
108+
{transactionId && (
109+
<Button
110+
onClick={onClickShowTransaction}
111+
sx={{ width: "fit-content", p: 0 }}
112+
variant="text"
113+
>
114+
{t("dashboard.cards.showTransaction")}
115+
</Button>
116+
)}
96117
<Box
97118
display="flex"
98119
flexDirection={screenWidth < 640 ? "column" : "row"}
99-
gap={{ xxs: 0, md: 2 }}
120+
mt={3}
121+
gap={2}
100122
>
101123
{isLoading ? (
102124
<>
@@ -125,6 +147,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
125147
xxs: "100%",
126148
md: "auto",
127149
},
150+
...buttonProps.sx,
128151
}}
129152
{...buttonProps}
130153
/>

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Box } from "@mui/material";
2+
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
3+
4+
import { Typography } from "@atoms";
5+
import { gray } from "@consts";
6+
import { useTranslation } from "@hooks";
7+
8+
import { Card } from "./Card";
9+
import { SoleVoterActionProps } from "./types";
10+
11+
export const SoleVoterAction = ({
12+
dRepId,
13+
onClickArrow,
14+
sx,
15+
}: SoleVoterActionProps) => {
16+
const { t } = useTranslation();
17+
18+
return (
19+
<Card
20+
border
21+
elevation={0}
22+
sx={{
23+
alignItems: "center",
24+
backgroundColor: (theme) => theme.palette.neutralWhite,
25+
borderColor: gray.c100,
26+
display: "flex",
27+
justifyContent: "space-between",
28+
px: 1.5,
29+
py: 1,
30+
...sx,
31+
}}
32+
>
33+
<Box sx={{ width: "90%" }}>
34+
<Typography fontWeight={600} variant="body2">
35+
{t("dashboard.cards.drepName")}
36+
</Typography>
37+
<Typography
38+
sx={{
39+
mt: 0.5,
40+
overflow: "hidden",
41+
textOverflow: "ellipsis",
42+
}}
43+
variant="body2"
44+
>
45+
{dRepId}
46+
</Typography>
47+
</Box>
48+
<ArrowForwardIosIcon
49+
color="primary"
50+
onClick={onClickArrow}
51+
sx={{ cursor: "pointer", height: 16, width: 24 }}
52+
/>
53+
</Card>
54+
);
55+
};

‎govtool/frontend/src/components/molecules/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,20 @@ export * from "./GovActionDetails";
1515
export * from "./GovernanceActionCard";
1616
export * from "./GovernanceActionCardElement";
1717
export * from "./GovernanceActionCardHeader";
18-
export * from "./GovernanceActionDetailsCardLinks";
1918
export * from "./GovernanceActionCardMyVote";
2019
export * from "./GovernanceActionCardStatePill";
21-
export * from "./GovernanceActionDetailsCardVotes";
2220
export * from "./GovernanceActionDetailsCardHeader";
21+
export * from "./GovernanceActionDetailsCardLinks";
2322
export * from "./GovernanceActionDetailsCardOnChainData";
23+
export * from "./GovernanceActionDetailsCardVotes";
2424
export * from "./GovernanceActionsDatesBox";
2525
export * from "./GovernanceVotedOnCard";
2626
export * from "./LinkWithIcon";
2727
export * from "./OrderActionsChip";
2828
export * from "./Share";
2929
export * from "./SliderArrow";
3030
export * from "./SliderArrows";
31+
export * from "./SoleVoterAction";
3132
export * from "./Step";
3233
export * from "./VoteActionForm";
3334
export * from "./VotesSubmitted";

‎govtool/frontend/src/components/molecules/types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,9 @@ export type StepProps = {
1515
componentsLayoutStyles?: SxProps;
1616
layoutStyles?: SxProps;
1717
};
18+
19+
export type SoleVoterActionProps = {
20+
dRepId: string;
21+
onClickArrow: () => void;
22+
sx?: SxProps;
23+
};

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ export const DashboardCards = () => {
2222
const { voter } = useGetVoterInfo();
2323

2424
if (
25-
currentDelegation === undefined
26-
|| votingPower === undefined
27-
|| voter === undefined
25+
currentDelegation === undefined ||
26+
votingPower === undefined ||
27+
voter === undefined
2828
) {
2929
return (
3030
<Box
@@ -72,12 +72,13 @@ export const DashboardCards = () => {
7272
/>
7373

7474
<SoleVoterDashboardCard
75+
dRepIDBech32={dRepIDBech32}
7576
pendingTransaction={pendingTransaction}
7677
voter={voter}
7778
votingPower={votingPower}
7879
/>
7980

80-
<ListGovActionsDashboardCards voter={voter} />
81+
<ListGovActionsDashboardCards />
8182

8283
<ProposeGovActionDashboardCard
8384
createGovActionTx={pendingTransaction.createGovAction}

0 commit comments

Comments
 (0)