Merge pull request #562 from IntersectMBO/dashboard-cards-refactor

[#541] dashboard cards refactor
IntersectMBO · Mar 27, 2024 · c4c7bd9 · c4c7bd9
2 parents fa89b5f + 3ba91d2
commit c4c7bd9
Show file tree

Hide file tree

Showing 14 changed files with 706 additions and 644 deletions.
diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
@@ -11,6 +11,7 @@ import * as TooltipMUI from "@mui/material/Tooltip";
 
 export type ButtonProps = Omit<MUIButtonProps, "size"> & {
   size?: "small" | "medium" | "large" | "extraLarge";
+  dataTestId?: string;
 };
 
 export type LoadingButtonProps = ButtonProps & {

diff --git a/govtool/frontend/src/components/molecules/Card.tsx b/govtool/frontend/src/components/molecules/Card.tsx
@@ -39,7 +39,7 @@ export const Card = ({
   variant = "default",
   border = variant !== "default",
   children,
-  elevation = 4,
+  elevation = 3,
   label,
   sx,
 }: CardProps) => {

diff --git a/govtool/frontend/src/components/molecules/CopyableInfo.tsx b/govtool/frontend/src/components/molecules/CopyableInfo.tsx
@@ -0,0 +1,47 @@
+import { Box, Typography } from "@mui/material";
+
+import { CopyButton } from "@atoms";
+import { Card } from "./Card";
+import { gray } from "@/consts";
+
+type CopyableInfoProps = {
+  dataTestId?: string;
+  label: string;
+  value: string;
+};
+
+export const CopyableInfo = ({
+  dataTestId,
+  label,
+  value,
+}: CopyableInfoProps) => (
+  <Card
+    border
+    data-testid={dataTestId}
+    elevation={0}
+    sx={{
+      px: 1.5,
+      py: 1,
+      borderColor: gray.c100,
+      backgroundColor: (theme) => theme.palette.neutralWhite,
+    }}
+  >
+    <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)"
+      >
+        {value}
+      </Typography>
+    </Box>
+  </Card>
+);
diff --git a/govtool/frontend/src/components/molecules/DRepInfoCard.tsx b/govtool/frontend/src/components/molecules/DRepInfoCard.tsx
@@ -3,15 +3,17 @@ import { Box, Typography } from "@mui/material";
 import { useCardano } from "@context";
 import { CopyButton } from "@atoms";
 import { useTranslation } from "@hooks";
+import { Card } from "./Card";
+import { gray } from "@/consts";
 
 export const DRepInfoCard = () => {
   const { dRepIDBech32 } = useCardano();
   const { t } = useTranslation();
 
   return (
-    <Box border={1} borderColor="#D6E2FF" py={1} px={2} borderRadius={3}>
+    <Card border elevation={0} sx={{ p: 1.5 }}>
       <Box sx={{ display: "flex", justifyContent: "space-between" }}>
-        <Typography color="gray" fontSize={12} fontWeight={500}>
+        <Typography color={gray.c300} fontSize={12} fontWeight={500}>
           {t("myDRepId")}
         </Typography>
         <CopyButton text={dRepIDBech32} variant="blue" />
@@ -28,6 +30,6 @@ export const DRepInfoCard = () => {
           {dRepIDBech32}
         </Typography>
       </Box>
-    </Box>
+    </Card>
   );
 };
diff --git a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
@@ -1,30 +1,18 @@
-import { Box, ButtonProps, Skeleton } from "@mui/material";
+import { Box, Skeleton } from "@mui/material";
 import { FC, ReactNode } from "react";
 
-import { CopyButton, LoadingButton, Typography } from "@atoms";
+import { LoadingButton, LoadingButtonProps, Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
-import { theme } from "@/theme";
+import { Card } from "./Card";
 
-type DashboardActionCardProps = {
-  cardId?: string;
-  cardTitle?: string;
+export type DashboardActionCardProps = {
+  buttons?: LoadingButtonProps[];
+  children?: ReactNode;
   dataTestidDelegationStatus?: string;
-  dataTestidDrepIdBox?: string;
-  dataTestidFirstButton?: string;
-  dataTestidSecondButton?: string;
   description?: ReactNode;
-  firstButtonAction?: () => void;
-  firstButtonDisabled?: boolean;
-  firstButtonIsLoading?: boolean;
-  firstButtonLabel?: string;
-  firstButtonVariant?: ButtonProps["variant"];
   imageURL?: string;
-  inProgress?: boolean;
   isLoading?: boolean;
-  secondButtonAction?: () => void;
-  secondButtonIsLoading?: boolean;
-  secondButtonLabel?: string;
-  secondButtonVariant?: ButtonProps["variant"];
+  state?: "active" | "inProgress" | "default";
   title?: ReactNode;
 };
 
@@ -33,62 +21,32 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
 }) => {
   const { t } = useTranslation();
   const {
-    cardId,
-    cardTitle,
-    dataTestidDrepIdBox,
-    dataTestidFirstButton,
-    dataTestidSecondButton,
+    buttons,
+    children,
     description,
-    firstButtonAction,
-    firstButtonDisabled = false,
-    firstButtonIsLoading = false,
-    firstButtonLabel,
-    firstButtonVariant = "contained",
     imageURL,
-    inProgress,
     isLoading = false,
-    secondButtonAction,
-    secondButtonIsLoading = false,
-    secondButtonLabel,
-    secondButtonVariant = "outlined",
+    state = "default",
     title,
   } = props;
 
-  const {
-    palette: { boxShadow2 },
-  } = theme;
-  const { isMobile, screenWidth } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
 
   return (
-    <Box
-      border={inProgress && !isLoading ? 1 : 0}
-      borderColor="accentOrange"
-      borderRadius={3}
-      display="flex"
-      flex={1}
-      flexDirection="column"
-      p={3}
-      maxWidth={524}
-      position="relative"
-      sx={{ boxShadow: `5px 5px 15px 5px ${boxShadow2}` }}
+    <Card
+      {...(state === "inProgress" && {
+        border: true,
+        label: t("inProgress"),
+        variant: "warning",
+      })}
+      sx={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        maxWidth: 524,
+      }}
     >
-      {inProgress && !isLoading && (
-        <Box
-          bgcolor="rgb(242, 217, 169)"
-          px={2.25}
-          py={0.5}
-          borderRadius={100}
-          sx={{
-            position: "absolute",
-            top: -15,
-            right: 30,
-          }}
-        >
-          <Typography color="orangeDark" variant="body2">
-            {t("inProgress")}
-          </Typography>
-        </Box>
-      )}
       <Box display="flex" flexDirection="column" flex={1}>
         {imageURL ? (
           isLoading ? (
@@ -113,7 +71,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
             {isLoading ? <Skeleton variant="rounded" /> : title}
           </Typography>
         ) : null}
-        {inProgress && !isLoading ? (
+        {state === "inProgress" && !isLoading ? (
           <Typography variant="title2" fontWeight={700}>
             {t("inProgress")}
           </Typography>
@@ -122,7 +80,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
           <Typography
             data-testid="voting-power-delegation-status"
             color="textGray"
-            sx={{ mb: 3, mt: 1 }}
+            sx={{ mt: 1 }}
             variant="body2"
             fontWeight={400}
           >
@@ -133,102 +91,46 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
             )}
           </Typography>
         ) : null}
-        {cardId && (
-          <Box
-            data-testid={dataTestidDrepIdBox}
-            px={1.5}
-            py={1}
-            border={1}
-            borderColor="rgba(236, 234, 234, 1)"
-            borderRadius={1.5}
-            bgcolor="white"
-            mb={3}
-            sx={{ display: "flex", justifyContent: "flex-start" }}
-          >
-            <Box mr="24px">
-              <Typography color="#8E908E" variant="caption">
-                {cardTitle}
-              </Typography>
-              <Typography
-                variant="body2"
-                sx={{
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  width:
-                    screenWidth < 375
-                      ? "150px"
-                      : screenWidth < 425
-                      ? "200px"
-                      : screenWidth < 768
-                      ? "240px"
-                      : screenWidth < 1024
-                      ? "300px"
-                      : screenWidth < 1440
-                      ? "150px"
-                      : "300px",
-                }}
-              >
-                {cardId}
-              </Typography>
-            </Box>
-            <CopyButton text={cardId} />
-          </Box>
-        )}
       </Box>
-      {isLoading ? (
-        <Box display="flex" flexDirection="row">
-          <Skeleton
-            animation="wave"
-            variant="rounded"
-            width={100}
-            height={35}
-            sx={{ mr: 2 }}
-          />
-          <Skeleton
-            animation="wave"
-            variant="rounded"
-            width={100}
-            height={35}
-          />
-        </Box>
-      ) : (
-        <Box
-          display="flex"
-          flexDirection={screenWidth < 640 ? "column" : "row"}
-        >
-          {firstButtonLabel ? (
-            <LoadingButton
-              data-testid={dataTestidFirstButton}
-              disabled={firstButtonDisabled}
-              isLoading={firstButtonIsLoading}
-              onClick={firstButtonAction}
-              size="large"
-              variant={firstButtonVariant}
-              sx={{
-                mr: screenWidth < 640 ? 0 : 2,
-                width: isMobile ? "100%" : "auto",
-              }}
-            >
-              {firstButtonLabel}
-            </LoadingButton>
-          ) : null}
-          {secondButtonLabel ? (
+      {children}
+      <Box
+        display="flex"
+        flexDirection={screenWidth < 640 ? "column" : "row"}
+        gap={{ xxs: 0, md: 2 }}
+      >
+        {isLoading ? (
+          <>
+            <Skeleton
+              animation="wave"
+              variant="rounded"
+              width={100}
+              height={35}
+            />
+            <Skeleton
+              animation="wave"
+              variant="rounded"
+              width={100}
+              height={35}
+            />
+          </>
+        ) : (
+          buttons?.map(({ dataTestId, ...buttonProps }) => (
             <LoadingButton
-              data-testid={dataTestidSecondButton}
-              isLoading={secondButtonIsLoading}
-              onClick={secondButtonAction}
+              key={buttonProps.children?.toString()}
+              data-testid={dataTestId}
               size="large"
-              variant={secondButtonVariant}
+              variant="outlined"
               sx={{
-                width: isMobile ? "100%" : "auto",
-                marginTop: screenWidth < 640 ? 1 : 0,
+                width: {
+                  xxs: "100%",
+                  md: "auto",
+                },
               }}
-            >
-              {secondButtonLabel}
-            </LoadingButton>
-          ) : null}
-        </Box>
-      )}
-    </Box>
+              {...buttonProps}
+            />
+          ))
+        )}
+      </Box>
+    </Card>
   );
 };