Merge pull request #902 from IntersectMBO/fix/879-alingment-items-in-…

…drep-card fix/879-alingment-items-in-drep-card
IntersectMBO · May 1, 2024 · 6e09ecf · 6e09ecf
2 parents c309a66 + a3dbac6
commit 6e09ecf
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 14 deletions.
diff --git a/govtool/frontend/src/components/atoms/StatusPill.tsx b/govtool/frontend/src/components/atoms/StatusPill.tsx
@@ -1,6 +1,7 @@
 import { Chip, ChipProps, styled } from "@mui/material";
 import { cyan, errorRed, successGreen } from "@/consts";
 import { DRepStatus } from "@/models";
+import { theme } from "@/theme";
 
 interface StatusPillProps {
   status: DRepStatus;
@@ -20,7 +21,7 @@ export const StatusPill = ({
     size={size}
     label={label}
     sx={{
-      px: 0.5,
+      px: status === DRepStatus.Yourself ? 0.75 : 0.5,
       py: 0.5,
       height: 24,
       ...sx,
@@ -32,20 +33,24 @@ const bgColor = {
   [DRepStatus.Active]: successGreen.c200,
   [DRepStatus.Inactive]: errorRed.c100,
   [DRepStatus.Retired]: cyan.c100,
+  [DRepStatus.Yourself]: theme.palette.lightBlue,
 };
 
 const textColor = {
   [DRepStatus.Active]: successGreen.c700,
   [DRepStatus.Inactive]: errorRed.c500,
   [DRepStatus.Retired]: cyan.c500,
+  [DRepStatus.Yourself]: theme.palette.textBlack,
 };
 
 const StyledChip = styled(Chip)<{ status: DRepStatus }>(
-  ({ theme, status }) => ({
+  ({ theme: themeStyles, status }) => ({
     backgroundColor: bgColor[status],
     color: textColor[status],
-    border: `2px solid ${theme.palette.neutralWhite}`,
     fontSize: "0.75rem",
     textTransform: "capitalize",
+    ...(status !== DRepStatus.Yourself && {
+      border: `2px solid ${themeStyles.palette.neutralWhite}`,
+    }),
   }),
 );
diff --git a/govtool/frontend/src/components/organisms/DRepCard.tsx b/govtool/frontend/src/components/organisms/DRepCard.tsx
@@ -5,9 +5,9 @@ import { Button, StatusPill, Typography } from "@atoms";
 import { ICONS, PATHS } from "@consts";
 import { useModal, useSnackbar } from "@context";
 import { useTranslation } from "@hooks";
-import { DRepData } from "@models";
+import { DRepData, DRepStatus } from "@models";
 import { Card } from "@molecules";
-import { correctAdaFormat } from "@utils";
+import { correctDRepDirectoryFormat } from "@utils";
 
 type DRepCardProps = {
   dRep: DRepData;
@@ -44,14 +44,19 @@ export const DRepCard = ({
     <Card
       {...(isMe && {
         variant: "primary",
-        label: t("yourself"),
       })}
       {...(isInProgress && {
         variant: "warning",
         label: t("inProgress"),
       })}
       sx={{ container: "root / inline-size", py: 2.5 }}
     >
+      {isMe && (
+        <StatusPill
+          status={DRepStatus.Yourself}
+          sx={{ mb: 1.5, display: { lg: "none" } }}
+        />
+      )}
       <Box
         display="flex"
         flexDirection="column"
@@ -68,7 +73,7 @@ export const DRepCard = ({
             display="flex"
             flexDirection="column"
             rowGap={3}
-            columnGap={6}
+            columnGap={10}
             sx={{
               "@container (min-width: 480px)": {
                 flexDirection: "row",
@@ -77,7 +82,7 @@ export const DRepCard = ({
               containerType: "inline-size",
             }}
           >
-            <Box flex={1} minWidth={0}>
+            <Box minWidth={0} display="flex" flexDirection="column">
               <Typography sx={ellipsisStyles}>{type}</Typography>
               <ButtonBase
                 data-testid={`${view}-copy-id-button`}
@@ -88,7 +93,7 @@ export const DRepCard = ({
                 }}
                 sx={{
                   gap: 1,
-                  maxWidth: "100%",
+                  width: "250px",
                   "&:hover": {
                     opacity: 0.6,
                     transition: "opacity 0.3s",
@@ -103,7 +108,7 @@ export const DRepCard = ({
             </Box>
 
             <Box sx={{ display: "flex", flex: { xl: 1 }, gap: 3 }}>
-              <Box sx={{ flex: { xl: 1 } }}>
+              <Box sx={{ width: { lg: "128px" } }}>
                 <Typography
                   variant="caption"
                   color="textSecondary"
@@ -112,7 +117,7 @@ export const DRepCard = ({
                   {t("votingPower")}
                 </Typography>
                 <Typography sx={{ whiteSpace: "nowrap" }}>
-                  ₳ {correctAdaFormat(votingPower)}
+                  ₳ {correctDRepDirectoryFormat(votingPower)}
                 </Typography>
               </Box>
               <Divider
@@ -128,20 +133,28 @@ export const DRepCard = ({
                 >
                   {t("status")}
                 </Typography>
-                <StatusPill status={status} />
+                <Box display="flex" flexDirection="row">
+                  <StatusPill status={status} />
+                  {isMe && (
+                    <StatusPill
+                      status={DRepStatus.Yourself}
+                      sx={{ ml: 0.75, display: { lg: "flex", xxs: "none" } }}
+                    />
+                  )}
+                </Box>
               </Box>
             </Box>
           </Box>
         </Box>
 
         <Box
           display="flex"
-          flex={1}
           gap={2.5}
           minWidth={isConnected ? 233 : 310}
           sx={{
             "@container root (min-width: 480px)": {
               justifyContent: "flex-end",
+              alignItems: "center",
             },
           }}
         >

diff --git a/govtool/frontend/src/models/api.ts b/govtool/frontend/src/models/api.ts
@@ -16,6 +16,7 @@ export enum DRepStatus {
   Active = "Active",
   Inactive = "Inactive",
   Retired = "Retired",
+  Yourself = "Yourself",
 }
 
 export enum DRepListSort {

diff --git a/govtool/frontend/src/utils/adaFormat.ts b/govtool/frontend/src/utils/adaFormat.ts
@@ -7,3 +7,11 @@ export const correctAdaFormat = (lovelace: number | undefined) => {
   }
   return 0;
 };
+
+export const correctDRepDirectoryFormat = (lovelace: number | undefined) => {
+  if (lovelace) {
+    return Number((lovelace / LOVELACE).toFixed(0))?.toLocaleString("en-US");
+  }
+
+  return "0";
+};
diff --git a/govtool/frontend/src/utils/tests/adaFormat.test.ts b/govtool/frontend/src/utils/tests/adaFormat.test.ts
@@ -1,4 +1,4 @@
-import { correctAdaFormat } from "..";
+import { correctAdaFormat, correctDRepDirectoryFormat } from "..";
 
 describe("correctAdaFormat", () => {
   const LOVELACE = 1000000;
@@ -34,3 +34,23 @@ describe("correctAdaFormat", () => {
     expect(correctAdaFormat(lovelace)).toBe(0);
   });
 });
+
+describe("correctDRepDirectoryFormat", () => {
+  test("Correctly formats lovelace value to directory format", () => {
+    const lovelace = 143500000000;
+    const expectedResult = "143,500";
+    expect(correctDRepDirectoryFormat(lovelace)).toBe(expectedResult);
+  });
+
+  test("Returns 0 for numbers smaller than one million", () => {
+    const lovelace = 1435;
+    const expectedResult = "0";
+    expect(correctDRepDirectoryFormat(lovelace)).toBe(expectedResult);
+  });
+
+  test("Returns result without comma", () => {
+    const lovelace = undefined;
+    const expectedResult = "0";
+    expect(correctDRepDirectoryFormat(lovelace)).toBe(expectedResult);
+  });
+});