feat: MET-1963 resolve conflict

cardano-foundation · Apr 1, 2024 · 841b723 · 841b723
2 parents ba906d3 + ba83ce0
commit 841b723
Show file tree

Hide file tree

Showing 7 changed files with 297 additions and 172 deletions.
diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx
diff --git a/src/components/GovernanceVotes/styles.ts b/src/components/GovernanceVotes/styles.ts
@@ -0,0 +1,16 @@
+import { Typography, styled } from "@mui/material";
+
+export const HashName = styled(Typography)(({ theme }) => ({
+  paddingBottom: "15px",
+  fontSize: "32px",
+  fontWeight: 600,
+  lineHeight: "28px",
+  textAlign: "center",
+  color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light,
+  [theme.breakpoints.down("lg")]: {
+    fontSize: "24px"
+  },
+  [theme.breakpoints.down("sm")]: {
+    fontSize: "16px"
+  }
+}));
diff --git a/src/components/commons/CardGovernanceVotes/index.tsx b/src/components/commons/CardGovernanceVotes/index.tsx
@@ -3,12 +3,12 @@ import { Box, Stack, Tooltip, Typography, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { t } from "i18next";
 
-import { VotesAbstainIcon, VotesNoIcon, VotesNoneIcon, VotesYesIcon, repeatVoteIcon } from "src/commons/resources";
+import { VotesAbstainIcon, VotesNoIcon, VotesNoneIcon, VotesYesIcon, RepeatVotesIcon } from "src/commons/resources";
 import { ChipContainer } from "src/pages/NativeScriptsAndSC/Card";
 import { POOLS_ACTION_TYPE, STATUS_VOTE } from "src/commons/utils/constants";
 import { GovernanceVote } from "src/components/GovernanceVotes";
 
-import { CardGovernanceVote, StatusContainer } from "./styles";
+import { CardGovernanceVote, StatusContainer, TitleCard } from "./styles";
 
 interface ICardGovernanceVotes {
   data: GovernanceVote;
@@ -36,23 +36,17 @@ const CardGovernanceVotes: React.FC<ICardGovernanceVotes> = ({ data }) => {
         <Box display="flex" justifyContent="space-between" width="100%">
           <Box maxWidth="400px" flex={1}>
             <Tooltip title={txHash} placement="top" arrow>
-              <Typography
-                sx={{ wordBreak: "break-word" }}
-                fontWeight={600}
-                fontSize="24px"
-                lineHeight="28px"
-                color={theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.main}
-              >
+              <TitleCard>
                 {actionTypeListDrep.find((action) => action.value === type)?.text} #{index}
-              </Typography>
+              </TitleCard>
             </Tooltip>
           </Box>
           <>
             <VoteStatus status={vote} isRepeatVote={isRepeatVote} />
           </>
         </Box>
         <Stack paddingTop="24px" spacing={"14px"}>
-          <Box display="flex" alignItems="center">
+          <Box display="flex" alignItems="center" flexWrap={"wrap"}>
             <Typography
               fontWeight={600}
               fontSize="16px"
@@ -66,7 +60,7 @@ const CardGovernanceVotes: React.FC<ICardGovernanceVotes> = ({ data }) => {
               {actionTypeListDrep.find((action) => action.value === type)?.text}
             </Typography>
           </Box>
-          <Box display="flex" alignItems="center">
+          <Box display="flex" alignItems="center" flexWrap="wrap">
             <Typography
               fontWeight={600}
               fontSize="16px"
@@ -78,7 +72,7 @@ const CardGovernanceVotes: React.FC<ICardGovernanceVotes> = ({ data }) => {
             </Typography>
             <GovernanceStatus status={status} />
           </Box>
-          <Box display="flex" alignItems="center">
+          <Box display="flex" alignItems="center" flexWrap="wrap">
             <Typography
               fontWeight={600}
               fontSize="16px"
@@ -106,7 +100,7 @@ export const VoteStatus: React.FC<{ status: string; isRepeatVote?: boolean }> =
     switch (key) {
       case STATUS_VOTE.YES:
         if (isRepeatVote) {
-          return [repeatVoteIcon, "success"];
+          return [RepeatVotesIcon, "success"];
         } else {
           return [VotesYesIcon, "success"];
         }
@@ -143,7 +137,7 @@ export const GovernanceStatus: React.FC<{ status: string | null }> = ({ status }
     switch (key) {
       case STATUS_VOTE.RATIFIED:
         return "success";
-      case STATUS_VOTE.OPEN:
+      case STATUS_VOTE.OPEN_BALLOT:
         return "warning";
       case STATUS_VOTE.ENACTED:
         return "info";
@@ -166,7 +160,7 @@ export const GovernanceStatus: React.FC<{ status: string | null }> = ({ status }
             lineHeight="23px"
             color={theme.palette.secondary.light}
           >
-            {status === STATUS_VOTE.OPEN ? "Open Ballot" : !status ? t("common.N/A") : status}
+            {status === STATUS_VOTE.OPEN_BALLOT ? t("pool.open") : !status ? t("common.N/A") : status}
           </Typography>
         }
         variant={typeStatus as "success" | "warning" | "info" | "error"}

diff --git a/src/components/commons/CardGovernanceVotes/styles.ts b/src/components/commons/CardGovernanceVotes/styles.ts
@@ -1,4 +1,4 @@
-import { Box, styled } from "@mui/material";
+import { Box, Typography, styled } from "@mui/material";
 
 import Card from "../Card";
 
@@ -20,3 +20,17 @@ export const StatusContainer = styled(Box)`
     border-radius: 20px;
   }
 `;
+
+export const TitleCard = styled(Typography)(({ theme }) => ({
+  paddingRight: "3px",
+  wordBreak: "break-word",
+  fontWeight: 600,
+  lineHeight: "28px",
+  color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light,
+  [theme.breakpoints.down("lg")]: {
+    fontSize: "24px"
+  },
+  [theme.breakpoints.down("sm")]: {
+    fontSize: "16px"
+  }
+}));
diff --git a/src/components/commons/CopyButton/index.tsx b/src/components/commons/CopyButton/index.tsx
@@ -1,12 +1,12 @@
+import { IconButton, IconButtonProps, TooltipProps, styled, useTheme } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import { IconButton, IconButtonProps, styled, TooltipProps, useTheme } from "@mui/material";
-import { useCopyToClipboard } from "react-use";
 import { BiCheckCircle } from "react-icons/bi";
+import { useCopyToClipboard } from "react-use";
 
 import { CopyIconSquare } from "src/commons/resources";
 
-import CustomTooltip from "../CustomTooltip";
 import CustomIcon from "../CustomIcon";
+import CustomTooltip from "../CustomTooltip";
 
 const Button = styled(IconButton)`
   color: ${(props) => props.theme.palette.text.primary};
@@ -22,14 +22,25 @@ interface CopyButtonProps extends IconButtonProps {
   className?: string;
   children?: React.ReactNode;
   customIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  height?: number;
+  fill?: string;
   onClick?: (e: React.MouseEvent) => void;
 }
 
-const CopyButton: React.FC<CopyButtonProps> = ({ text = "", onClick, children, placement, customIcon, ...props }) => {
+const CopyButton: React.FC<CopyButtonProps> = ({
+  text = "",
+  height,
+  onClick,
+  fill,
+  children,
+  placement,
+  customIcon,
+  ...props
+}) => {
   const [, copyToClipboard] = useCopyToClipboard();
   const [copied, setCopied] = useState<boolean>();
+  const [open, setOpen] = useState<boolean>(false);
   const theme = useTheme();
-  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (copied) {
@@ -48,6 +59,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({ text = "", onClick, children, p
       onClick?.(e);
     }
   };
+
   return (
     <CustomTooltip
       open={open}
@@ -65,7 +77,11 @@ const CopyButton: React.FC<CopyButtonProps> = ({ text = "", onClick, children, p
               style={{ verticalAlign: "text-bottom", scale: "2", height: 16 }}
             />
           ) : (
-            <CustomIcon fill={theme.palette.secondary.light} icon={customIcon || CopyIconSquare} height={16} />
+            <CustomIcon
+              fill={fill ? fill : theme.palette.secondary.light}
+              icon={customIcon || CopyIconSquare}
+              height={height ? height : 16}
+            />
           ))}
       </Button>
     </CustomTooltip>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1029,6 +1029,7 @@
   "pool.harkFork": "Hard-fork initiation",
   "pool.Infor": "Infor",
   "pool.tabPool": "The vote cast on the blockchain by Pool Name.",
+  "pool.tabPoolDrep": "The vote cast on the blockchain by Drep.",
   "pool.overall": "Votes cast on the blockchain by Delegated Representatives (DReps), Stake Pool Operators (SPOs), and members of the Constitutional Committee.",
   "pool.actionMetadata": "Governance Action Metadata",
   "pool.anchor": "Anchor",

diff --git a/src/pages/NativeScriptsAndSC/styles.ts b/src/pages/NativeScriptsAndSC/styles.ts
@@ -211,6 +211,13 @@ export const StyledTabAssociated = styled(Box)(() => ({
   overflowY: "scroll"
 }));
 
+export const FilterWrapper = styled(Box)`
+  background: ${({ theme }) => theme.palette.secondary[0]};
+  position: relative;
+  display: inline-flex;
+  border-radius: 5px;
+`;
+
 export const FilterContainer = styled(Box)(({ theme }) => ({
   width: 300,
   backgroundColor: theme.palette.secondary[0],
@@ -221,11 +228,18 @@ export const FilterContainer = styled(Box)(({ theme }) => ({
   borderRadius: theme.spacing(1),
   boxShadow: "2px 2px 10px 0px #43465633",
   [theme.breakpoints.down("sm")]: {
-    width: "calc(100% - 30px)"
+    width: 230,
+    left: "21"
   },
+
+  "& .MuiAccordion-root::before": {
+    position: "unset !important"
+  },
+
   ":hover": {
     backgroundColor: theme.palette.secondary[0]
   },
+
   ":after": {
     content: "''",
     display: "block",