Merge pull request #450 from IntersectMBO/feat/multiple-ui-improvements

Feat/multiple UI improvements
IntersectMBO · Nov 6, 2024 · 68ac9a4 · 68ac9a4
2 parents 539fb47 + 76229c9
commit 68ac9a4
Show file tree

Hide file tree

Showing 21 changed files with 471 additions and 483 deletions.
diff --git a/frontend/messages/de.json b/frontend/messages/de.json
@@ -30,6 +30,7 @@
     "govAction": "Governance Action",
     "govActionCategoryShort": "GA Category",
     "voted": "Voted",
+    "time": "Time",
     "rationale": "Rationale",
     "actionTitle": "Show more",
     "notAvailable": "Not Available",
@@ -225,29 +226,15 @@
     "previewRationale": {
       "headline": "Rationale",
       "description": "Please update rationale for your vote on specific governance action.",
-      "noRationaleUrl": "A rationale has not been provided for this vote",
       "rationaleLink": "Rationale link",
+      "rationale": "Rationale",
+      "notAvailable": "Not Available",
+      "governanceActionStatus": "Governance Action Status",
       "governanceActionCategory": "Governance Action Category",
       "governanceActionId": "Governance Action ID",
       "voted": "Voted",
-      "submissionDate": "Submission date",
-      "expiryDate": "Expiry date",
-      "voteSubmissionDate": "Vote submission date",
-      "tooltips": {
-        "expiryDate": {
-          "heading": "Expiry Date",
-          "paragraphOne": "The date when the governance action will expiry if it doesn’t reach ratification thresholds.",
-          "paragraphTwo": "IMPORTANT: If the governance action is ratified before the expiry date it will be considered ratified and it will not be available to vote on afterwards."
-        },
-        "submissionDate": {
-          "heading": "Submission Date",
-          "paragraphOne": "The date when the governance action was submitted on-chain.",
-          "vote": {
-            "heading": "Vote Submission Date",
-            "paragraphOne": "The date when the vote was submitted on-chain."
-          }
-        }
-      },
+      "submissionDate": "GA submitted on:",
+      "expiryDate": "GA expiration date:",
       "alerts": {
         "error": "Error fetching rationale data"
       }

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -30,6 +30,7 @@
     "govAction": "Governance Action",
     "govActionCategoryShort": "GA Category",
     "voted": "Voted",
+    "time": "Time",
     "rationale": "Rationale",
     "actionTitle": "Show more",
     "notAvailable": "Not Available",
@@ -225,29 +226,15 @@
     "previewRationale": {
       "headline": "Rationale",
       "description": "Please update rationale for your vote on specific governance action.",
-      "noRationaleUrl": "A rationale has not been provided for this vote",
       "rationaleLink": "Rationale link",
+      "rationale": "Rationale",
+      "notAvailable": "Not Available",
+      "governanceActionStatus": "Governance Action Status",
       "governanceActionCategory": "Governance Action Category",
       "governanceActionId": "Governance Action ID",
       "voted": "Voted",
-      "submissionDate": "Submission date",
-      "expiryDate": "Expiry date",
-      "voteSubmissionDate": "Vote submission date",
-      "tooltips": {
-        "expiryDate": {
-          "heading": "Expiry Date",
-          "paragraphOne": "The date when the governance action will expiry if it doesn’t reach ratification thresholds.",
-          "paragraphTwo": "IMPORTANT: If the governance action is ratified before the expiry date it will be considered ratified and it will not be available to vote on afterwards."
-        },
-        "submissionDate": {
-          "heading": "Submission Date",
-          "paragraphOne": "The date when the governance action was submitted on-chain.",
-          "vote": {
-            "heading": "Vote Submission Date",
-            "paragraphOne": "The date when the vote was submitted on-chain."
-          }
-        }
-      },
+      "submissionDate": "GA submitted on:",
+      "expiryDate": "GA expiration date:",
       "alerts": {
         "error": "Error fetching rationale data"
       }

diff --git a/frontend/src/app/[locale]/loading.tsx b/frontend/src/app/[locale]/loading.tsx
@@ -0,0 +1,16 @@
+import { Box, CircularProgress } from "@mui/material";
+
+export default function CenteredLoading() {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh"
+      }}
+    >
+      <CircularProgress color="primary" size={50} thickness={2} />
+    </Box>
+  );
+}
diff --git a/frontend/src/components/atoms/modal/ModalWrapper.tsx b/frontend/src/components/atoms/modal/ModalWrapper.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { SxProps, styled } from "@mui/material/styles";
+import { styled, SxProps } from "@mui/material/styles";
 
-import { customPalette, ICONS } from "@consts";
-import { callAll } from "@utils";
 import { useModal } from "@/context";
 import { useScreenDimension } from "@/lib/hooks";
+import { customPalette, ICONS } from "@consts";
+import { callAll } from "@utils";
 
 type ModalVariant = "modal" | "popup" | "wide";
 interface Props {
@@ -27,7 +27,7 @@ export const ModalWrapper = ({
   icon,
   scrollable,
   hideCloseButton = true,
-  onClose,
+  onClose
 }: Props) => {
   const { closeModal } = useModal();
   const { isMobile } = useScreenDimension();
@@ -79,6 +79,7 @@ export const BaseWrapper = styled("div")<{
   transform: translate(-50%, -50%);
   overflow-y: ${({ scrollable }) => scrollable && "scroll"};
   overflow-x: hidden;
+  scrollbar-width: ${({ scrollable }) => (scrollable ? "auto" : "none")};
   @media (max-width: ${700}px) {
     overflow: scroll;
   }

diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx
@@ -16,6 +16,7 @@ import {
   Heading1,
   Heading2,
   Heading3,
+  Heading5,
   ListItem,
   NavDrawerDesktop,
   Paragraph,
@@ -66,6 +67,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
     h1: Heading1,
     h2: Heading2,
     h3: Heading3,
+    h5: Heading5,
     p: Paragraph,
     li: ListItem,
     code: Code,

diff --git a/frontend/src/components/organisms/Constitution/ConstitutionSidebar.tsx b/frontend/src/components/organisms/Constitution/ConstitutionSidebar.tsx
@@ -28,7 +28,7 @@ export const ConstitutionSidebar = ({ tableOfContents, metadata }) => {
         justifyContent="left"
         padding={2}
         pt={{ xxs: 0, md: 2 }}
-        px={{ xxs: 2, md: 3 }}
+        px={{ xxs: 1, md: 2 }}
         flexWrap="nowrap"
       >
         {/* <Grid item xxs={12} md="auto">
@@ -45,7 +45,7 @@ export const ConstitutionSidebar = ({ tableOfContents, metadata }) => {
         container
         direction="column"
         width={{ xxs: "100%", lg: "340px" }}
-        px={{ xxs: 1, md: 1 }}
+        px={{ xxs: 0, md: 0 }}
       >
         {/* {tab === "revisions" ? (
           <Grid item justifyContent="flex-end" px={{ xxs: 1, md: 0 }}>

diff --git a/frontend/src/components/organisms/Constitution/MDXComponents.tsx b/frontend/src/components/organisms/Constitution/MDXComponents.tsx
@@ -79,6 +79,21 @@ export const Heading3 = ({ children, id }) => (
     <Anchor id={id} />
   </>
 );
+export const Heading5 = ({ children }) => (
+  <Typography
+    variant="headline5"
+    sx={{
+      marginTop: "22px",
+      marginBottom: "22px",
+      fontWeight: 800,
+      fontSize: { xxs: 12, md: 14 },
+      lineHeight: "1em",
+      overflowWrap: "break-word"
+    }}
+  >
+    {children}
+  </Typography>
+);
 
 export const Paragraph = ({ children, id }) => (
   <>
@@ -105,7 +120,8 @@ export const ListItem = ({ children, id }) => (
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-start",
-      justifyContent: "center"
+      justifyContent: "center",
+      wordBreak: "break-all"
     }}
   >
     {children}
@@ -131,6 +147,7 @@ export const Code = ({ children }) => (
 export const TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS = {
   backgroundColor: customPalette.neutralWhite,
   borderRadius: "16px",
+  padding: "12px",
   "& ol.toc-level": {
     margin: 0
   },

diff --git a/frontend/src/components/organisms/Constitution/TOCAccordion.tsx b/frontend/src/components/organisms/Constitution/TOCAccordion.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { customPalette } from "@/constants";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Accordion,
@@ -35,7 +34,6 @@ export const TocAccordion = ({ children }) => {
               elevation={0}
               sx={{
                 boxShadow: "none",
-                padding: 0,
                 "&:before": {
                   display: "none"
                 },
@@ -48,12 +46,7 @@ export const TocAccordion = ({ children }) => {
                 sx={{
                   borderRadius: "30px",
                   minHeight: "56px",
-                  "&:hover": {
-                    backgroundColor: customPalette.accordionBg
-                  },
-                  "&.Mui-expanded": {
-                    backgroundColor: customPalette.accordionBg
-                  },
+                  padding: 0,
                   "& a": {
                     "&:active": {
                       pointerEvents: "none" // disables the href activation on click but keep tooltip showing
@@ -69,6 +62,7 @@ export const TocAccordion = ({ children }) => {
                     flexDirection: "column",
                     listStyleType: "none",
                     padding: "0 16px",
+
                     "& li": {
                       display: "flex",
                       alignItems: "center",
@@ -100,11 +94,9 @@ export const TocAccordion = ({ children }) => {
                 alignItems: "center",
                 justifyContent: "left",
                 listStyleType: "none",
-                padding: "0 16px",
+                padding: 0,
                 width: "100%",
-                "&:hover": {
-                  backgroundColor: customPalette.accordionBg
-                },
+
                 "& li": {
                   display: "flex",
                   alignItems: "center"
@@ -117,7 +109,7 @@ export const TocAccordion = ({ children }) => {
             <AccordionDetails
               sx={{
                 listStyleType: "none",
-                padding: "0 16px",
+                padding: 0,
                 height: "56px",
                 "& li": {
                   minHeight: "56px"

diff --git a/frontend/src/components/organisms/Constitution/TOCLink.tsx b/frontend/src/components/organisms/Constitution/TOCLink.tsx
@@ -67,19 +67,29 @@ const TOCLink = ({ href, children, callback }: Props) => {
   }, [children]);
 
   return (
-    <Tooltip title={isTruncated ? children : ""} arrow>
+    <Tooltip
+      title={isTruncated ? children : ""}
+      arrow
+      enterDelay={200}
+      enterNextDelay={200}
+      leaveDelay={0}
+    >
       <a
         ref={linkRef}
         href={href}
         onClick={handleClick}
         style={{
           color: customPalette.textBlack,
           textDecoration: "none",
-          maxWidth: "260px",
+          maxWidth: "292px",
           whiteSpace: "nowrap",
           overflow: "hidden",
           textOverflow: "ellipsis",
-          display: "inline-block"
+          display: "inline-block",
+          backgroundColor: isActive ? customPalette.accordionBg : undefined,
+          borderRadius: "30px",
+          padding: "0 16px",
+          boxSizing: "border-box"
         }}
       >
         {children}

diff --git a/frontend/src/components/organisms/Constitution/TOCNested.tsx b/frontend/src/components/organisms/Constitution/TOCNested.tsx
@@ -1,4 +1,3 @@
-import { customPalette } from "@/constants";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material";
 
@@ -23,12 +22,8 @@ export const TocNested = ({ headings }) => {
           sx={{
             borderRadius: "30px",
             minHeight: "56px",
-            "&:hover": {
-              backgroundColor: customPalette.accordionBg
-            },
-            "&.Mui-expanded": {
-              backgroundColor: customPalette.accordionBg
-            },
+            padding: 0,
+
             "& a": {
               "&:active": {
                 pointerEvents: "none" // disables the href activation on click but keep tooltip showing

diff --git a/frontend/src/components/organisms/Footer/Footer.tsx b/frontend/src/components/organisms/Footer/Footer.tsx
@@ -66,14 +66,29 @@ export const Footer = ({
             variant="caption"
             data-testid="footer-privacy-policy-hyperlink"
           >
-            {t("privacyPolicy")}
+            <a
+              href="https://docs.intersectmbo.org/legal/policies-and-conditions/privacy-policy"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "inherit", textDecoration: "none" }}
+            >
+              {t("privacyPolicy")}
+            </a>
           </Typography>
+
           <Typography
             fontWeight={400}
             variant="caption"
             data-testid="footer-terms-of-service-hyperlink"
           >
-            {t("termsOfService")}
+            <a
+              href="https://docs.intersectmbo.org/legal/policies-and-conditions/terms-of-use"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "inherit", textDecoration: "none" }}
+            >
+              {t("termsOfService")}
+            </a>
           </Typography>
 
           {!userSession && showSignIn && (

diff --git a/frontend/src/components/organisms/LatestUpdates.tsx b/frontend/src/components/organisms/LatestUpdates.tsx
@@ -47,7 +47,9 @@ export const LatestUpdates = ({
           end_time: action.gov_action_proposal_end_time,
           vote: action.value,
           reasoning_title: action.reasoning_title,
-          rationale_url: action.rationale_url
+          rationale_url: action.rationale_url,
+          status: action.gov_action_proposal_status,
+          title: action.gov_action_proposal_title
         }
       }
     });