Merge pull request #622 from IntersectMBO/develop

UI Improvements: Introduce New Cards Design and Translation Fixes
IntersectMBO · Apr 4, 2024 · 7921469 · 7921469
2 parents 4a7bf6f + 012face
commit 7921469
Show file tree

Hide file tree

Showing 17 changed files with 353 additions and 185 deletions.
diff --git a/govtool/frontend/index.html b/govtool/frontend/index.html
@@ -18,6 +18,9 @@
         overscroll-behavior-y: none;
         padding: 0;
       }
+      #root {
+        white-space: pre-line;
+      }
     </style>
   </head>
   <body>

diff --git a/govtool/frontend/src/components/molecules/CopyableInfo.tsx b/govtool/frontend/src/components/molecules/CopyableInfo.tsx
@@ -1,19 +1,22 @@
-import { Box, Typography } from "@mui/material";
+import { Box, SxProps, Typography } from "@mui/material";
 
 import { CopyButton } from "@atoms";
+import { gray } from "@consts";
+
 import { Card } from "./Card";
-import { gray } from "@/consts";
 
 type CopyableInfoProps = {
   dataTestId?: string;
   label: string;
   value: string;
+  sx?: SxProps;
 };
 
 export const CopyableInfo = ({
   dataTestId,
   label,
   value,
+  sx,
 }: CopyableInfoProps) => (
   <Card
     border
@@ -24,24 +27,23 @@ export const CopyableInfo = ({
       py: 1,
       borderColor: gray.c100,
       backgroundColor: (theme) => theme.palette.neutralWhite,
+      ...sx,
     }}
   >
+    <Typography color={gray.c300} fontSize={12} fontWeight={500}>
+      {label}
+    </Typography>
     <Box sx={{ display: "flex", justifyContent: "space-between" }}>
-      <Typography color={gray.c300} fontSize={12} fontWeight={500}>
-        {label}
-      </Typography>
-      <CopyButton text={value} />
-    </Box>
-    <Box display="flex" flexDirection="row" alignItems="center">
       <Typography
         textOverflow="ellipsis"
         overflow="hidden"
         fontSize={14}
         fontWeight={500}
-        maxWidth="calc(100% - 1.5rem)"
+        width="90%"
       >
         {value}
       </Typography>
+      <CopyButton text={value} />
     </Box>
   </Card>
 );
diff --git a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
@@ -1,9 +1,10 @@
 import { Box, Skeleton } from "@mui/material";
 import { FC, ReactNode } from "react";
 
-import { LoadingButton, LoadingButtonProps, Typography } from "@atoms";
+import { Button, LoadingButton, LoadingButtonProps, Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { Card } from "./Card";
+import { openInNewTab } from "@/utils";
 
 export type DashboardActionCardProps = {
   buttons?: LoadingButtonProps[];
@@ -12,8 +13,10 @@ export type DashboardActionCardProps = {
   description?: ReactNode;
   imageURL?: string;
   isLoading?: boolean;
+  isInProgressOnCard?: boolean;
   state?: "active" | "inProgress" | "default";
   title?: ReactNode;
+  transactionId?: string;
 };
 
 export const DashboardActionCard: FC<DashboardActionCardProps> = ({
@@ -26,12 +29,17 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
     description,
     imageURL,
     isLoading = false,
+    isInProgressOnCard = true,
     state = "default",
     title,
+    transactionId,
   } = props;
 
   const { screenWidth } = useScreenDimension();
 
+  const onClickShowTransaction = () =>
+    openInNewTab(`https://sancho.cexplorer.io/tx/${transactionId}`);
+
   return (
     <Card
       {...(state === "inProgress" && {
@@ -40,10 +48,10 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
         variant: "warning",
       })}
       sx={{
+        backgroundColor: state === "active" ? "#F0F4FF" : undefined,
         flex: 1,
         display: "flex",
         flexDirection: "column",
-        gap: 3,
         maxWidth: 524,
       }}
     >
@@ -69,11 +77,15 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
         {title ? (
           <Typography sx={{ mt: 2 }} variant="title2">
             {isLoading ? <Skeleton variant="rounded" /> : title}
-          </Typography>
-        ) : null}
-        {state === "inProgress" && !isLoading ? (
-          <Typography variant="title2" fontWeight={700}>
-            {t("inProgress")}
+            {state === "inProgress" && !isLoading && isInProgressOnCard ? (
+              <Typography
+                variant="title2"
+                fontWeight={600}
+                sx={{ display: "inline" }}
+              >
+                {` ${t("inProgress")}`}
+              </Typography>
+            ) : null}
           </Typography>
         ) : null}
         {description ? (
@@ -93,10 +105,20 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
         ) : null}
       </Box>
       {children}
+      {transactionId && (
+        <Button
+          onClick={onClickShowTransaction}
+          sx={{ width: "fit-content", p: 0 }}
+          variant="text"
+        >
+          {t("dashboard.cards.showTransaction")}
+        </Button>
+      )}
       <Box
         display="flex"
         flexDirection={screenWidth < 640 ? "column" : "row"}
-        gap={{ xxs: 0, md: 2 }}
+        mt={3}
+        gap={2}
       >
         {isLoading ? (
           <>
@@ -125,6 +147,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
                   xxs: "100%",
                   md: "auto",
                 },
+                ...buttonProps.sx,
               }}
               {...buttonProps}
             />

diff --git a/govtool/frontend/src/components/molecules/SoleVoterAction.tsx b/govtool/frontend/src/components/molecules/SoleVoterAction.tsx
@@ -0,0 +1,55 @@
+import { Box } from "@mui/material";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+
+import { Typography } from "@atoms";
+import { gray } from "@consts";
+import { useTranslation } from "@hooks";
+
+import { Card } from "./Card";
+import { SoleVoterActionProps } from "./types";
+
+export const SoleVoterAction = ({
+  dRepId,
+  onClickArrow,
+  sx,
+}: SoleVoterActionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card
+      border
+      elevation={0}
+      sx={{
+        alignItems: "center",
+        backgroundColor: (theme) => theme.palette.neutralWhite,
+        borderColor: gray.c100,
+        display: "flex",
+        justifyContent: "space-between",
+        px: 1.5,
+        py: 1,
+        ...sx,
+      }}
+    >
+      <Box sx={{ width: "90%" }}>
+        <Typography fontWeight={600} variant="body2">
+          {t("dashboard.cards.drepName")}
+        </Typography>
+        <Typography
+          sx={{
+            mt: 0.5,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+          variant="body2"
+        >
+          {dRepId}
+        </Typography>
+      </Box>
+      <ArrowForwardIosIcon
+        color="primary"
+        onClick={onClickArrow}
+        sx={{ cursor: "pointer", height: 16, width: 24 }}
+      />
+    </Card>
+  );
+};
diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts
@@ -15,19 +15,20 @@ export * from "./GovActionDetails";
 export * from "./GovernanceActionCard";
 export * from "./GovernanceActionCardElement";
 export * from "./GovernanceActionCardHeader";
-export * from "./GovernanceActionDetailsCardLinks";
 export * from "./GovernanceActionCardMyVote";
 export * from "./GovernanceActionCardStatePill";
-export * from "./GovernanceActionDetailsCardVotes";
 export * from "./GovernanceActionDetailsCardHeader";
+export * from "./GovernanceActionDetailsCardLinks";
 export * from "./GovernanceActionDetailsCardOnChainData";
+export * from "./GovernanceActionDetailsCardVotes";
 export * from "./GovernanceActionsDatesBox";
 export * from "./GovernanceVotedOnCard";
 export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
 export * from "./Share";
 export * from "./SliderArrow";
 export * from "./SliderArrows";
+export * from "./SoleVoterAction";
 export * from "./Step";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";

diff --git a/govtool/frontend/src/components/molecules/types.ts b/govtool/frontend/src/components/molecules/types.ts
@@ -15,3 +15,9 @@ export type StepProps = {
   componentsLayoutStyles?: SxProps;
   layoutStyles?: SxProps;
 };
+
+export type SoleVoterActionProps = {
+  dRepId: string;
+  onClickArrow: () => void;
+  sx?: SxProps;
+};
diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -22,9 +22,9 @@ export const DashboardCards = () => {
   const { voter } = useGetVoterInfo();
 
   if (
-    currentDelegation === undefined
-    || votingPower === undefined
-    || voter === undefined
+    currentDelegation === undefined ||
+    votingPower === undefined ||
+    voter === undefined
   ) {
     return (
       <Box
@@ -72,12 +72,13 @@ export const DashboardCards = () => {
       />
 
       <SoleVoterDashboardCard
+        dRepIDBech32={dRepIDBech32}
         pendingTransaction={pendingTransaction}
         voter={voter}
         votingPower={votingPower}
       />
 
-      <ListGovActionsDashboardCards voter={voter} />
+      <ListGovActionsDashboardCards />
 
       <ProposeGovActionDashboardCard
         createGovActionTx={pendingTransaction.createGovAction}