Fixes after CR

IntersectMBO · Mar 25, 2024 · 37b0c5f · 37b0c5f
1 parent fa3e5f0
commit 37b0c5f
Show file tree

Hide file tree

Showing 33 changed files with 269 additions and 282 deletions.
diff --git a/govtool/frontend/public/icons/Separator.svg b/govtool/frontend/public/icons/Separator.svg
diff --git a/govtool/frontend/src/components/atoms/CopyButton.tsx b/govtool/frontend/src/components/atoms/CopyButton.tsx
@@ -4,11 +4,11 @@ import { ICONS } from "@consts";
 import { useSnackbar } from "@context";
 import { useTranslation } from "@hooks";
 
-interface Props {
+type Props = {
   isChecked?: boolean;
   text: string;
   variant?: "blueThin" | "blue";
-}
+};
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { addSuccessAlert } = useSnackbar();

diff --git a/govtool/frontend/src/components/atoms/IconLink.tsx b/govtool/frontend/src/components/atoms/IconLink.tsx
diff --git a/govtool/frontend/src/components/atoms/Radio.tsx b/govtool/frontend/src/components/atoms/Radio.tsx
@@ -3,6 +3,7 @@ import { Box } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { theme } from "@/theme";
 
 type RadioProps = {
   isChecked: boolean;
@@ -43,8 +44,7 @@ export const Radio = ({ ...props }: RadioProps) => {
       borderColor={isChecked ? "specialCyanBorder" : undefined}
       sx={[
         {
-          boxShadow:
-            "0px 1px 2px 0px rgba(0, 51, 173, 0.08), 0px 1px 6px 1px rgba(0, 51, 173, 0.15)",
+          boxShadow: theme.shadows[1],
 
           "&:hover": {
             color: "blue",

diff --git a/govtool/frontend/src/components/atoms/Tooltip.tsx b/govtool/frontend/src/components/atoms/Tooltip.tsx
@@ -1,12 +1,7 @@
 import { styled } from "@mui/material";
 import * as TooltipMUI from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-
-export type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
-  heading?: string;
-  paragraphOne?: string;
-  paragraphTwo?: string;
-};
+import { TooltipProps } from "@atoms";
 
 const StyledTooltip = styled(
   ({ className, ...props }: TooltipMUI.TooltipProps) => (

diff --git a/govtool/frontend/src/components/atoms/index.ts b/govtool/frontend/src/components/atoms/index.ts
@@ -9,7 +9,6 @@ export * from "./ExternalModalButton";
 export * from "./FormErrorMessage";
 export * from "./FormHelpfulText";
 export * from "./HighlightedText";
-export * from "./IconLink";
 export * from "./InfoText";
 export * from "./Input";
 export * from "./Link";
@@ -21,7 +20,6 @@ export * from "./modal/ModalWrapper";
 export * from "./Radio";
 export * from "./ScrollToManage";
 export * from "./ScrollToTop";
-export * from "./SliderArrow";
 export * from "./Spacer";
 export * from "./StakeRadio";
 export * from "./TextArea";

diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
@@ -7,6 +7,7 @@ import {
   TextareaAutosizeProps,
   SxProps,
 } from "@mui/material";
+import * as TooltipMUI from "@mui/material/Tooltip";
 
 export type ButtonProps = Omit<MUIButtonProps, "size"> & {
   size?: "small" | "medium" | "large" | "extraLarge";
@@ -71,3 +72,9 @@ export type InfoTextProps = {
   label: string;
   sx?: SxProps;
 };
+
+export type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
+  heading?: string;
+  paragraphOne?: string;
+  paragraphTwo?: string;
+};
diff --git a/govtool/frontend/src/components/molecules/Breadcrumbs.tsx b/govtool/frontend/src/components/molecules/Breadcrumbs.tsx
@@ -1,7 +1,7 @@
 import { NavLink, To } from "react-router-dom";
 import { Box } from "@mui/material";
+import Divider from "@mui/material/Divider";
 
-import { ICONS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { Typography } from "@atoms";
 
@@ -40,7 +40,12 @@ export const Breadcrumbs = ({
           {elementOne}
         </Typography>
       </NavLink>
-      <img src={ICONS.separator} alt="separator" style={{ margin: "0 6px" }} />
+      <Divider
+        orientation="vertical"
+        flexItem
+        color="textBlack"
+        sx={{ margin: "0 6px" }}
+      />
       <Typography
         variant="caption"
         sx={{

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
@@ -20,25 +20,24 @@ import {
 const mockedLongText =
   "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, distinctio culpa minus eaque illo quidem voluptates quisquam mollitia consequuntur ex, sequi saepe? Ad ex adipisci molestiae sed.";
 
-interface ActionTypeProps
-  extends Omit<
-    ActionType,
-    | "yesVotes"
-    | "noVotes"
-    | "abstainVotes"
-    | "metadataHash"
-    | "url"
-    | "details"
-    | "id"
-    | "txHash"
-    | "index"
-  > {
+type ActionTypeProps = Omit<
+  ActionType,
+  | "yesVotes"
+  | "noVotes"
+  | "abstainVotes"
+  | "metadataHash"
+  | "url"
+  | "details"
+  | "id"
+  | "txHash"
+  | "index"
+> & {
   txHash: string;
   index: number;
   isDataMissing: boolean;
   onClick?: () => void;
   inProgress?: boolean;
-}
+};
 
 export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
   const {

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx
@@ -40,99 +40,97 @@ export const GovernanceActionCardElement = ({
   >
     <Box
       sx={{
-          display: "flex",
-          alignItems: "center",
-          mb: "4px",
-        }}
+        display: "flex",
+        alignItems: "center",
+        mb: "4px",
+      }}
     >
       <Typography
         sx={{
-            fontSize: isSliderCard ? 12 : 14,
-            fontWeight: isSliderCard ? 500 : 600,
-            lineHeight: isSliderCard ? "16px" : "20px",
-            color: "neutralGray",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-          }}
+          fontSize: isSliderCard ? 12 : 14,
+          fontWeight: isSliderCard ? 500 : 600,
+          lineHeight: isSliderCard ? "16px" : "20px",
+          color: "neutralGray",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
       >
         {label}
       </Typography>
       {tooltipProps && (
-      <Tooltip
-        heading={tooltipProps?.heading}
-        paragraphOne={tooltipProps?.paragraphOne}
-        placement="bottom-end"
-        arrow
-        {...tooltipProps}
-      >
-        <InfoOutlinedIcon
-          style={{}}
-          sx={{ ml: 0.7, mb: 0.1, color: "#ADAEAD", fontSize: "small" }}
-        />
-      </Tooltip>
-        )}
+        <Tooltip
+          heading={tooltipProps?.heading}
+          paragraphOne={tooltipProps?.paragraphOne}
+          placement="bottom-end"
+          arrow
+          {...tooltipProps}
+        >
+          <InfoOutlinedIcon
+            sx={{ ml: 0.7, mb: 0.1, color: "#ADAEAD", fontSize: "small" }}
+          />
+        </Tooltip>
+      )}
     </Box>
     <Box display="flex">
       {textVariant === "pill" ? (
         <Box
           sx={{
-              padding: "6px 18px",
-              overflow: "hidden",
-              bgcolor: "lightBlue",
-              borderRadius: 100,
-            }}
+            padding: "6px 18px",
+            overflow: "hidden",
+            bgcolor: "lightBlue",
+            borderRadius: 100,
+          }}
         >
           <Typography
             variant="caption"
             sx={{
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
           >
             {text}
           </Typography>
         </Box>
-        ) : (
-          <Box
+      ) : (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            overflow: "hidden",
+          }}
+        >
+          <Typography
             sx={{
-              display: "flex",
-              alignItems: "center",
-              overflow: "hidden",
+              fontSize: isSliderCard ? 14 : 16,
+              fontWeight: 400,
+              lineHeight: isSliderCard ? "20px" : "24px",
+              ...(textVariant === "oneLine" && { whiteSpace: "nowrap" }),
+              ...((textVariant === "oneLine" || textVariant === "twoLines") && {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }),
+              ...(textVariant === "twoLines" && {
+                display: "-webkit-box",
+                WebkitBoxOrient: "vertical",
+                WebkitLineClamp: 2,
+                whiteSpace: "normal",
+              }),
+              ...(isCopyButton && {
+                color: "primaryBlue",
+              }),
             }}
           >
-            <Typography
-              sx={{
-                fontSize: isSliderCard ? 14 : 16,
-                fontWeight: 400,
-                lineHeight: isSliderCard ? "20px" : "24px",
-                ...(textVariant === "oneLine" && { whiteSpace: "nowrap" }),
-                ...((textVariant === "oneLine" ||
-                  textVariant === "twoLines") && {
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                }),
-                ...(textVariant === "twoLines" && {
-                  display: "-webkit-box",
-                  WebkitBoxOrient: "vertical",
-                  WebkitLineClamp: 2,
-                  whiteSpace: "normal",
-                }),
-                ...(isCopyButton && {
-                  color: "primaryBlue",
-                }),
-              }}
-            >
-              {text}
-            </Typography>
-            {isCopyButton && (
-              <Box ml={1}>
-                <CopyButton text={text} variant="blueThin" />
-              </Box>
-            )}
-          </Box>
-        )}
+            {text}
+          </Typography>
+          {isCopyButton && (
+            <Box ml={1}>
+              <CopyButton text={text} variant="blueThin" />
+            </Box>
+          )}
+        </Box>
+      )}
     </Box>
   </Box>
-  );
+);
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardMyVote.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardMyVote.tsx
@@ -5,7 +5,11 @@ import { openInNewTab } from "@utils";
 import { useTranslation } from "@hooks";
 import { Vote } from "@models";
 
-export const GovernanceActionCardMyVote = ({ vote }: { vote: Vote }) => {
+type Props = {
+  vote: Vote;
+};
+
+export const GovernanceActionCardMyVote = ({ vote }: Props) => {
   const { t } = useTranslation();
 
   return (