Further changes

IntersectMBO · Mar 24, 2024 · 9f74b25 · 9f74b25
1 parent db43b31
commit 9f74b25
Show file tree

Hide file tree

Showing 34 changed files with 507 additions and 433 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/ExternalModalButton.tsx b/govtool/frontend/src/components/atoms/ExternalModalButton.tsx
@@ -32,6 +32,7 @@ export const ExternalModalButton = ({
       }}
       disableRipple
       variant="text"
+      data-testid="external-modal-button"
     >
       <Typography variant="body1" fontWeight={500} color="primary">
         {label}

diff --git a/govtool/frontend/src/components/atoms/Radio.tsx b/govtool/frontend/src/components/atoms/Radio.tsx
@@ -41,8 +41,17 @@ export const Radio = ({ ...props }: RadioProps) => {
       p={isChecked ? "2px" : 0}
       border={isChecked ? 2 : 0}
       borderColor={isChecked ? "specialCyanBorder" : undefined}
-      sx={[{ "&:hover": { color: "blue", cursor: "pointer" } }]}
-      boxShadow="0px 1px 2px 0px rgba(0, 51, 173, 0.08), 0px 1px 6px 1px rgba(0, 51, 173, 0.15)"
+      sx={[
+        {
+          boxShadow:
+            "0px 1px 2px 0px rgba(0, 51, 173, 0.08), 0px 1px 6px 1px rgba(0, 51, 173, 0.15)",
+
+          "&:hover": {
+            color: "blue",
+            cursor: disabled ? "default" : "pointer",
+          },
+        },
+      ]}
     >
       <input
         type="radio"

diff --git a/govtool/frontend/src/components/atoms/SliderArrow.tsx b/govtool/frontend/src/components/atoms/SliderArrow.tsx
@@ -3,13 +3,13 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 import { theme } from "@/theme";
 
-interface Props {
+interface SliderArrowProps {
   disabled: boolean;
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   left?: boolean;
 }
 
-export const SliderArrow = ({ disabled, onClick, left }: Props) => {
+export const SliderArrow = ({ disabled, onClick, left }: SliderArrowProps) => {
   const {
     palette: { primaryBlue, arcticWhite, lightBlue },
   } = theme;
@@ -27,6 +27,11 @@ export const SliderArrow = ({ disabled, onClick, left }: Props) => {
         justifyContent: "center",
         alignItems: "center",
         cursor: "pointer",
+        transition: "0.3s",
+
+        "&:hover": {
+          boxShadow: disabled ? 0 : 2,
+        },
       }}
     >
       <ChevronRightIcon

diff --git a/govtool/frontend/src/components/molecules/Breadcrumbs.tsx b/govtool/frontend/src/components/molecules/Breadcrumbs.tsx
@@ -0,0 +1,57 @@
+import { NavLink, To } from "react-router-dom";
+import { Box } from "@mui/material";
+
+import { ICONS } from "@consts";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { Typography } from "@atoms";
+
+type BreadcrumbsProps = {
+  elementOne: string;
+  elementOnePath: To;
+  elementTwo: string;
+  isDataMissing: boolean;
+};
+
+export const Breadcrumbs = ({
+  elementOne,
+  elementOnePath,
+  elementTwo,
+  isDataMissing,
+}: BreadcrumbsProps) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        margin: `2px 0 ${isMobile ? "44px" : "24px"}`,
+      }}
+    >
+      <NavLink to={elementOnePath} style={{ textDecorationColor: "#0033AD" }}>
+        <Typography
+          color="primary"
+          variant="caption"
+          sx={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          {elementOne}
+        </Typography>
+      </NavLink>
+      <img src={ICONS.separator} alt="separator" style={{ margin: "0 6px" }} />
+      <Typography
+        variant="caption"
+        sx={{
+          fontWeight: 500,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {isDataMissing ? t("govActions.dataMissing") : elementTwo}
+      </Typography>
+    </Box>
+  );
+};
diff --git a/govtool/frontend/src/components/molecules/DataActionsBar.tsx b/govtool/frontend/src/components/molecules/DataActionsBar.tsx
@@ -2,10 +2,9 @@ import { Dispatch, FC, SetStateAction } from "react";
 import { Box, InputBase } from "@mui/material";
 import Search from "@mui/icons-material/Search";
 
-import { GovernanceActionsFilters, GovernanceActionsSorting } from ".";
+import { GovernanceActionsFilters, GovernanceActionsSorting } from "@molecules";
 import { OrderActionsChip } from "./OrderActionsChip";
 import { ClickOutside } from "../atoms";
-
 import { theme } from "@/theme";
 
 type DataActionsBarProps = {

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
@@ -5,6 +5,7 @@ import { Button } from "@atoms";
 import {
   GovernanceActionCardElement,
   GovernanceActionCardHeader,
+  GovernanceActionCardStatePill,
   GovernanceActionsDatesBox,
 } from "@molecules";
 
@@ -13,6 +14,7 @@ import {
   formatDisplayDate,
   getFullGovActionId,
   getProposalTypeLabel,
+  getProposalTypeNoEmptySpaces,
 } from "@utils";
 
 const mockedLongText =
@@ -31,17 +33,17 @@ interface ActionTypeProps
     | "txHash"
     | "index"
   > {
-  onClick?: () => void;
-  // inProgress?: boolean;
   txHash: string;
   index: number;
   isDataMissing: boolean;
+  onClick?: () => void;
+  inProgress?: boolean;
 }
 
 export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
   const {
     type,
-    // inProgress = false,
+    inProgress = false,
     expiryDate,
     onClick,
     createdDate,
@@ -53,10 +55,6 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
   const { t } = useTranslation();
 
   const govActionId = getFullGovActionId(txHash, index);
-  const proposalTypeNoEmptySpaces = getProposalTypeLabel(type).replace(
-    / /g,
-    "",
-  );
 
   return (
     <Box
@@ -75,16 +73,21 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         ...(isDataMissing && {
           border: "1px solid #F6D5D5",
         }),
+        ...(inProgress && {
+          border: "1px solid #FFCBAD",
+        }),
       }}
-      data-testid={`govaction-${proposalTypeNoEmptySpaces}-card`}
+      data-testid={`govaction-${getProposalTypeNoEmptySpaces(type)}-card`}
     >
+      {inProgress && <GovernanceActionCardStatePill variant="inProgress" />}
       <Box
         sx={{
           padding: "40px 24px 0",
         }}
       >
         <GovernanceActionCardHeader
-          title={mockedLongText}
+          // TODO: Add real title from props when BE is ready
+          title="Fund our project"
           isDataMissing={isDataMissing}
         />
         <GovernanceActionCardElement
@@ -98,7 +101,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           label={t("govActions.governanceActionType")}
           text={getProposalTypeLabel(type)}
           textVariant="pill"
-          dataTestId={`${proposalTypeNoEmptySpaces}-type`}
+          dataTestId={`${getProposalTypeNoEmptySpaces(type)}-type`}
           isSliderCard
         />
         <GovernanceActionsDatesBox
@@ -125,7 +128,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
       >
         <Button
           onClick={onClick}
-          variant="contained"
+          variant={inProgress ? "outlined" : "contained"}
           size="large"
           sx={{
             width: "100%",

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardHeader.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardHeader.tsx
@@ -4,9 +4,6 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { Tooltip, Typography } from "@atoms";
 import { useTranslation } from "@hooks";
 
-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.";
-
 type GovernanceActionCardHeaderProps = {
   title: string;
   isDataMissing: boolean;
@@ -25,6 +22,7 @@ export const GovernanceActionCardHeader = ({
         alignItems: "center",
         mb: "20px",
       }}
+      data-testid="governance-action-card-header"
     >
       <Typography
         sx={{
@@ -43,8 +41,8 @@ export const GovernanceActionCardHeader = ({
       </Typography>
       {isDataMissing && (
         <Tooltip
-          heading="Data Missing"
-          paragraphOne={mockedLongText}
+          heading={t("govActions.dataMissing")}
+          paragraphOne={t("govActions.dataMissingTooltipExplanation")}
           placement="bottom-end"
           arrow
         >

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardStatePill.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardStatePill.tsx
@@ -14,6 +14,7 @@ export const GovernanceActionCardStatePill = ({
   return (
     <Box
       sx={{
+        // TODO: To decide on final state pill design
         position: "absolute",
         top: -15,
         right: 30,

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardHeader.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardHeader.tsx
@@ -30,6 +30,7 @@ export const GovernanceActionDetailsCardHeader = ({
         alignItems: "center",
         mb: 2,
       }}
+      data-testid="governance-action-details-card-header"
     >
       <Box
         sx={{

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx
@@ -3,11 +3,12 @@ import { Box } from "@mui/material";
 import { IconLink, Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
 
+// TODO: When BE is ready, pass links as props
 const LINKS = [
-  "https://www.google.com",
-  "https://www.google.com",
-  "https://www.google.com",
-  "https://www.google.com",
+  "https://docs.sanchogov.tools/support/get-help-in-discord",
+  "https://docs.sanchogov.tools/how-to-use-the-govtool/prerequsites",
+  "https://docs.sanchogov.tools/faqs",
+  "https://docs.sanchogov.tools/",
 ];
 
 export const GovernanceActionDetailsCardLinks = () => {
@@ -27,6 +28,7 @@ export const GovernanceActionDetailsCardLinks = () => {
           whiteSpace: "nowrap",
           mb: 2,
         }}
+        data-testid="supporting-links"
       >
         {t("govActions.supportingLinks")}
       </Typography>

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardOnChainData.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardOnChainData.tsx
@@ -16,7 +16,7 @@ export const GovernanceActionDetailsCardOnChainData = ({
   const { t } = useTranslation();
 
   return (
-    <Box mb="32px">
+    <Box mb="32px" data-testid="governance-action-on-chain-data">
       <Box
         sx={{
           display: "flex",
@@ -40,6 +40,7 @@ export const GovernanceActionDetailsCardOnChainData = ({
       </Box>
       {data.map(({ label, content }) => (
         <Box
+          key={label}
           sx={{
             display: "flex",
             alignItems: "center",
@@ -56,8 +57,7 @@ export const GovernanceActionDetailsCardOnChainData = ({
               textOverflow: "ellipsis",
             }}
           >
-            {label}
-            :
+            {label}:
           </Typography>
           <Typography
             sx={{

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionsDatesBox.tsx b/govtool/frontend/src/components/molecules/GovernanceActionsDatesBox.tsx
@@ -50,6 +50,7 @@ export const GovernanceActionsDatesBox = ({
             fontSize: isFontSizeSmaller ? 11 : 12,
             fontWeight: 300,
           }}
+          data-testid="submission-date"
         >
           <Trans
             i18nKey="govActions.submittedDateWithEpoch"
@@ -92,6 +93,7 @@ export const GovernanceActionsDatesBox = ({
             fontSize: isFontSizeSmaller ? 11 : 12,
             fontWeight: 300,
           }}
+          data-testid="expiry-date"
         >
           <Trans
             i18nKey="govActions.expiresDateWithEpoch"