fix: MET-1963 fix show date time format

cardano-foundation · Mar 29, 2024 · e0f336e · e0f336e
1 parent f3bc663
commit e0f336e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 24 deletions.
diff --git a/src/commons/resources/icons/repeatVote.svg b/src/commons/resources/icons/repeatVote.svg
diff --git a/src/commons/resources/index.ts b/src/commons/resources/index.ts
@@ -227,6 +227,7 @@ import BlackWarningIcon from "./icons/warning-black.svg?react";
 import BlackCircleIcon from "./icons/black-cirle-copy.svg?react";
 import RepeatVotesIcon from "./icons/repeat-votes.svg?react";
 import historyIcon from "./icons/history.svg?react";
+import repeatVoteIcon from "./icons/repeatVote.svg?react";
 // eslint-disable-next-line import/order
 import TotalOutput from "./icons/totalOutput.svg?react";
 export {
@@ -454,6 +455,7 @@ export {
   ExpiryIcon,
   AnchorTextIcon,
   BlackWarningIcon,
+  repeatVoteIcon,
   BlackCircleIcon,
   RepeatVotesIcon
 };

diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx
@@ -455,8 +455,10 @@ const GovernanceVotesDetail: React.FC<{
             </InfoTitle>
             <InfoValue width={`${tab === "pool" ? "fit-content" : "100%"}`}>
               {tab === "pool" ? (
-                <Box display={"flex"} alignItems={"center"} gap={1}>
-                  <VoteStatus status={data?.voteType || ""} />
+                <Box display={"flex"} alignItems={"center"} gap={1} flexWrap={"wrap"}>
+                  <Box>
+                    <VoteStatus status={data?.voteType || ""} />
+                  </Box>
                   {data?.historyVotes && data?.historyVotes.length > 1 && (
                     <Box
                       sx={{ cursor: "pointer" }}
@@ -467,7 +469,7 @@ const GovernanceVotesDetail: React.FC<{
                       <ChipContainer
                         Icon={historyIcon}
                         message={
-                          <Box component={Typography} textTransform="uppercase" fontSize="12px" fontWeight={500}>
+                          <Box component={Typography} textTransform="uppercase" fontSize="1px" fontWeight={500}>
                             History
                           </Box>
                         }
@@ -659,6 +661,7 @@ export interface GovernanceVote {
   type: string;
   vote: string;
   votingPower: string;
+  isRepeatVote: boolean;
 }
 
 export interface GovernanceVoteDetail {
@@ -704,7 +707,7 @@ const VoteHistoryModal: React.FC<VoteHistoryProps> = ({ onClose, open, data }) =
         </Typography>{" "}
         <VoteStatus status={(data && data[0].vote) || ""} />
       </Box>
-      <TableContainer sx={{ p: "0px 10px", background: theme.isDark ? "" : theme.palette.secondary[0] }}>
+      <TableContainer sx={{ p: "0px 10px", background: theme.isDark ? "" : theme.palette.secondary[0], width: "auto" }}>
         <TableMui aria-label="simple table">
           <TableHead>
             <TableRow>
@@ -759,7 +762,7 @@ const VoteHistoryModal: React.FC<VoteHistoryProps> = ({ onClose, open, data }) =
                   sx={{ color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light }}
                   padding="none"
                 >
-                  {row.timestamp}
+                  {formatDateTime(row.timestamp)}
                 </TableCell>
               </TableRow>
             ))}
@@ -806,26 +809,33 @@ const ActionMetadataModal: React.FC<ActionMetadataProps> = ({ onClose, open, dat
           gap="24px"
           mt="20px"
           p="24px"
-          sx={{ background: theme.isDark ? "" : theme.palette.secondary[0], wordWrap: "break-word" }}
+          borderRadius={"10px"}
+          sx={{
+            background: theme.isDark ? theme.palette.secondary[100] : theme.palette.secondary[0],
+            wordWrap: "break-word"
+          }}
         >
           <Typography fontSize="16px" color={theme.palette.secondary.light}>
             {anchorHash}
           </Typography>
-          <Box
-            component={Typography}
-            fontSize="16px"
-            color="#0033AD !important"
-            fontWeight="700"
-            onClick={() => setOpenModal(true)}
-            sx={{ cursor: "pointer" }}
-          >
-            {anchorUrl}
+          <Box>
+            <Box
+              display={"inline"}
+              component={Typography}
+              fontSize="16px"
+              color={`${theme.palette.primary.main} !important`}
+              fontWeight="700"
+              onClick={() => setOpenModal(true)}
+              sx={{ cursor: "pointer" }}
+            >
+              {anchorUrl}
+            </Box>
             <Box
               ml={1}
               sx={{ transform: "translateY(3px)" }}
               component={CustomTooltip}
               title={
-                <Box>
+                <Box textAlign={"left"}>
                   <Box fontWeight={"bold"} component={"span"}>
                     Disclaimer:{" "}
                   </Box>
@@ -845,9 +855,7 @@ const ActionMetadataModal: React.FC<ActionMetadataProps> = ({ onClose, open, dat
         <Box
           display="flex"
           flexDirection="column"
-          gap="24px"
-          mt="20px"
-          p="24px"
+          mt={2}
           sx={{ background: theme.isDark ? "" : theme.palette.secondary[0] }}
         >
           <ViewJson maxHeight={"70vh"}>

diff --git a/src/components/commons/CardGovernanceVotes/index.tsx b/src/components/commons/CardGovernanceVotes/index.tsx
@@ -3,7 +3,7 @@ import { Box, Stack, Tooltip, Typography, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { t } from "i18next";
 
-import { VotesAbstainIcon, VotesNoIcon, VotesNoneIcon, VotesYesIcon } from "src/commons/resources";
+import { VotesAbstainIcon, VotesNoIcon, VotesNoneIcon, VotesYesIcon, repeatVoteIcon } 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";
@@ -26,7 +26,7 @@ export const actionTypeListDrep = [
 ];
 
 const CardGovernanceVotes: React.FC<ICardGovernanceVotes> = ({ data }) => {
-  const { status, txHash, type, vote, votingPower, index } = data;
+  const { status, txHash, type, vote, votingPower, index, isRepeatVote } = data;
   const theme = useTheme();
   const { t } = useTranslation();
 
@@ -48,7 +48,7 @@ const CardGovernanceVotes: React.FC<ICardGovernanceVotes> = ({ data }) => {
             </Tooltip>
           </Box>
           <>
-            <VoteStatus status={vote} />
+            <VoteStatus status={vote} isRepeatVote={isRepeatVote} />
           </>
         </Box>
         <Stack paddingTop="24px" spacing={"14px"}>
@@ -100,12 +100,16 @@ const CardGovernanceVotes: React.FC<ICardGovernanceVotes> = ({ data }) => {
 
 export default CardGovernanceVotes;
 
-export const VoteStatus: React.FC<{ status: string }> = ({ status }) => {
+export const VoteStatus: React.FC<{ status: string; isRepeatVote?: boolean }> = ({ status, isRepeatVote = false }) => {
   const { t } = useTranslation();
   const renderStatus = (key: string) => {
     switch (key) {
       case STATUS_VOTE.YES:
-        return [VotesYesIcon, "success"];
+        if (isRepeatVote) {
+          return [repeatVoteIcon, "success"];
+        } else {
+          return [VotesYesIcon, "success"];
+        }
       case STATUS_VOTE.NO:
         return [VotesNoIcon, "error"];
       case STATUS_VOTE.ABSTAIN: