Merge pull request #3428 from cardano-foundation/feat/MET-2055-update…

…-Governance-votes fix: MET-2055 update UI
cardano-foundation · May 8, 2024 · 6764f4f · 6764f4f
2 parents 09be83c + a6a5ced
commit 6764f4f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/src/components/GovernanceVotes/OverallVote.tsx b/src/components/GovernanceVotes/OverallVote.tsx
@@ -205,12 +205,7 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
               width={"100%"}
             >
               <Box display="flex" justifyContent="space-between" pr="5px">
-                <CustomIcon
-                  fill={theme.palette.secondary.light}
-                  icon={CurrentStatusIcon}
-                  height={28}
-                  marginTop="15px"
-                />
+                <CustomIcon fill={theme.palette.secondary.light} icon={CurrentStatusIcon} height={28} />
                 <BlackWarningIcon />
               </Box>
               <InfoTitle>
@@ -294,7 +289,7 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
               item
               xs={6}
               md={6}
-              pb={"38px !important"}
+              pb={"45px !important"}
               pl={"25px !important"}
               top={1}
               sx={{
@@ -315,17 +310,22 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
                 theme.isDark ? theme.palette.secondary[700] : theme.palette.primary[200]
               }  !important`}
             >
-              <Box display="flex" justifyContent="space-between" pr="5px">
+              <Box
+                display="flex"
+                justifyContent="space-between"
+                pr="5px"
+                sx={{ [theme.breakpoints.down("md")]: { pt: "20px" } }}
+              >
                 <CustomIcon fill={theme.palette.secondary.light} icon={VoteIcon} height={27} marginTop="15px" />
                 <BlackWarningIcon />
               </Box>
               <InfoTitle
-                paddingTop="2px"
                 paddingBottom="3px"
                 paddingRight="5px"
                 display="flex"
                 justifyContent="space-between"
                 alignItems="center !important"
+                mt="7px !important"
               >
                 <StyledTitle data-testid="governance.votesTitle">{t("pool.votes")}</StyledTitle>
 
@@ -371,7 +371,8 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
                         height: 150,
                         [theme.breakpoints.down("sm")]: {
                           height: 300
-                        }
+                        },
+                        bgcolor: theme.isDark ? theme.palette.secondary[600] : ""
                       }}
                       borderRadius={2}
                     />
@@ -423,12 +424,7 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
                 }}
               >
                 <Box display="flex" justifyContent="space-between" pr="5px">
-                  <CustomIcon
-                    fill={theme.palette.secondary.light}
-                    height={27}
-                    icon={VotingPowerIcon}
-                    style={{ marginTop: "5px" }}
-                  />
+                  <CustomIcon fill={theme.palette.secondary.light} height={27} icon={VotingPowerIcon} />
                   <BlackWarningIcon />
                 </Box>
                 <InfoTitle paddingBottom="3px">
@@ -492,7 +488,7 @@ const VoteBar = ({
   return (
     <Box display="flex" flexDirection="column" alignItems="center">
       <Typography data-testid="governance.voteBar.percent" fontSize="10px" fontWeight={400}>
-        {!percentage ? "0%" : percentage}
+        {!value ? "0" : value}
       </Typography>
       <LightTooltip
         title={
@@ -704,7 +700,7 @@ export const AbstainInfo: React.FC<{ onClose?: () => void; open: boolean; data:
       width={650}
       sx={{ maxHeight: "70vh" }}
     >
-      <Box display="block" pb="15px">
+      <Box display="block">
         <Typography data-testid="governance.metadataModal.anchor" color={theme.palette.secondary.main}>
           {data?.voterType === "CONSTITUTIONAL_COMMITTEE_HOT_KEY_HASH"
             ? t("drep.abstainInfoDescriptionCC")

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1118,7 +1118,7 @@
   "drep.lifetimeVotes": "Lifetime Votes",
   "drep.governanceVotes": "Governance Votes",
   "drep.abstainInfo": "ABSTAIN INFORMATION",
-  "drep.abstainInfoTitle": "ABSTAIN INFORMATION",
+  "drep.abstainInfoTitle": "Abstain Information",
   "drep.abstainInfoDescriptionDrep": "The active voting stake is decreased if any of the participating DRep’s ADA is used to vote abstain. This then changes the amount of ADA required to reach the governance action’s ratification threshold.",
   "drep.abstainInfoDescriptionSPOs": "The active voting stake is decreased if any of the participating SPO’s ADA is used to vote abstain. This then changes the amount of ADA required to reach the governance action’s ratification threshold.",
   "drep.abstainInfoDescriptionCC": "The number of Constitutional Committee (CC) Members are decreased if any of the participating CC’s vote abstain. This then changes the amount of CC Members required to reach the governance action’s ratification threshold.",