Merge pull request #3831 from IntersectMBO/3828-misplaced-and-clipped-receiving-address-and-amount-in-treasury-withdrawal-governance-action

(fix#3828): unification of sections 'Receiving Address' and 'Amount' in Treasury Withdrawal Governance Action

Author: Ciabas

CHANGELOG.md

@@ -25,6 +25,7 @@ changes.
 
 ### Changed
 - Adjust top menu (navbar) layout when wallet is not connected [Issue-3682](https://github.com/IntersectMBO/govtool/issues/3682)
+- Unification of sections 'Receiving Address' and 'Amount' in Treasury Withdrawal Governance Action [Issue-3828](https://github.com/IntersectMBO/govtool/issues/3828)
 
 ### Removed
 

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

@@ -1,10 +1,7 @@
-import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-import { Typography, CopyButton } from "@atoms";
 import { correctVoteAdaFormat } from "@utils";
-
-import { useScreenDimension } from "@/hooks";
+import { GovernanceActionCardElement } from "./GovernanceActionCardElement";
 
 type Props = {
   receivingAddress: string;
@@ -16,87 +13,22 @@ export const GovernanceActionCardTreasuryWithdrawalElement = ({
   amount,
 }: Props) => {
   const { t } = useTranslation();
-  const { isMobile } = useScreenDimension();
+
   return (
-    <Box
-      sx={{
-        display: "flex",
-        mb: "4px",
-        flexDirection: "column",
-      }}
-    >
-      <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
-        <Typography
-          data-testid="receiving-address-label"
-          sx={{
-            width: "160px",
-            fontSize: 14,
-            fontWeight: 600,
-            lineHeight: "20px",
-            color: "neutralGray",
-          }}
-        >
-          {t("govActions.receivingAddress")}
-        </Typography>
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            overflow: "hidden",
-            flexDirection: "row",
-          }}
-        >
-          <Typography
-            data-testid="receiving-address"
-            sx={{
-              ml: isMobile ? 0 : 8,
-              color: "primaryBlue",
-              fontSize: 16,
-              fontWeight: 400,
-              lineHeight: "20px",
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
-          >
-            {receivingAddress}
-          </Typography>
-          <Box ml={1}>
-            <CopyButton text={receivingAddress} variant="blueThin" />
-          </Box>
-        </Box>
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: isMobile ? "column" : "row",
-          mt: "6px",
-        }}
-      >
-        <Typography
-          sx={{
-            width: "160px",
-            fontSize: 14,
-            fontWeight: 600,
-            lineHeight: "20px",
-            color: "neutralGray",
-          }}
-          data-testid="amount-label"
-        >
-          {t("govActions.amount")}
-        </Typography>
-        <Typography
-          data-testid="amount"
-          sx={{
-            ml: isMobile ? 0 : 8,
-            fontSize: 16,
-            fontWeight: 400,
-            lineHeight: "20px",
-          }}
-        >
-          ₳ {correctVoteAdaFormat(amount) ?? 0}
-        </Typography>
-      </Box>
-    </Box>
+    <>
+      <GovernanceActionCardElement
+        label={t("govActions.receivingAddress")}
+        text={receivingAddress}
+        textVariant="oneLine"
+        dataTestId="receiving-address-label"
+        isCopyButton
+      />
+      <GovernanceActionCardElement
+        label={t("govActions.amount")}
+        text={`₳ ${correctVoteAdaFormat(amount) ?? 0}`}
+        textVariant="oneLine"
+        dataTestId="amount"
+      />
+    </>
   );
 };