fix: changed tabs design, date formating, removed cta on memebers car…

…d, add guardrails btn on landing page
IntersectMBO · Nov 6, 2024 · 59cd5d2 · 59cd5d2
1 parent 76229c9
commit 59cd5d2
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 19 deletions.
diff --git a/frontend/messages/de.json b/frontend/messages/de.json
@@ -5,6 +5,7 @@
       "headline": "Wir setzen uns für die von der Community geführte Governance von Cardano ein",
       "description": "Bis eine endgültige Cardano-Verfassung entwickelt und von der Community ratifiziert wurde – ein Konsultationsprogramm, das das ganze Jahr 2024 über läuft – ist eine Reihe von Übergangsregeln erforderlich, um den Übergang zu unterstützen.",
       "seeConstitution": "Lesen Sie die Interimsverfassung",
+      "guardrails": "Guardrails Script",
       "signIn": "Anmelden",
       "constitutionalCommitteePortal": "Portal des Verfassungsausschusses"
     }

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -5,6 +5,7 @@
       "headline": "Championing Cardano's community-led governance",
       "description": "Until a final Cardano Constitution has been developed and ratified by the community - a programme of consultation taking place throughout 2024 - a set of interim rules is required to support the transition.",
       "seeConstitution": "Read the Interim Constitution",
+      "guardrails": "Guardrails Script",
       "signIn": "Sign In",
       "constitutionalCommitteePortal": "Constitutional Committee Portal"
     }

diff --git a/frontend/src/components/organisms/Footer/Footer.tsx b/frontend/src/components/organisms/Footer/Footer.tsx
@@ -67,7 +67,7 @@ export const Footer = ({
             data-testid="footer-privacy-policy-hyperlink"
           >
             <a
-              href="https://docs.intersectmbo.org/legal/policies-and-conditions/privacy-policy"
+              href={EXTERNAL_LINKS.privacyPolicy}
               target="_blank"
               rel="noopener noreferrer"
               style={{ color: "inherit", textDecoration: "none" }}
@@ -82,7 +82,7 @@ export const Footer = ({
             data-testid="footer-terms-of-service-hyperlink"
           >
             <a
-              href="https://docs.intersectmbo.org/legal/policies-and-conditions/terms-of-use"
+              href={EXTERNAL_LINKS.termsOfUse}
               target="_blank"
               rel="noopener noreferrer"
               style={{ color: "inherit", textDecoration: "none" }}

diff --git a/frontend/src/components/organisms/Hero/HeroActions.tsx b/frontend/src/components/organisms/Hero/HeroActions.tsx
@@ -1,10 +1,11 @@
 "use client";
+import { OutlinedLightButton } from "@/components/atoms";
 import { Button } from "@/components/atoms/Button";
-import { ICONS, IMAGES, PATHS } from "@/constants";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
+import { EXTERNAL_LINKS, ICONS, IMAGES, PATHS } from "@/constants";
 import { useModal } from "@context";
 import { Grid } from "@mui/material";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
 import { HeroActionsProps } from "../types";
 
 export function HeroActions({ role }: HeroActionsProps) {
@@ -21,7 +22,7 @@ export function HeroActions({ role }: HeroActionsProps) {
               startIcon={<img src={IMAGES.login} />}
               onClick={() => {
                 openModal({
-                  type: "signIn",
+                  type: "signIn"
                 });
               }}
               data-testid="admin-hero-sign-in-button"
@@ -43,7 +44,12 @@ export function HeroActions({ role }: HeroActionsProps) {
           </Grid>
         </>
       ) : (
-        <Grid item>
+        <Grid
+          item
+          display="flex"
+          gap={2}
+          flexDirection={{ xxs: "column", lg: "row" }}
+        >
           <Link href={PATHS.constitution}>
             <Button
               size="large"
@@ -53,6 +59,20 @@ export function HeroActions({ role }: HeroActionsProps) {
               {t("hero.seeConstitution")}
             </Button>
           </Link>
+          <a
+            href={EXTERNAL_LINKS.guardrails}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "inherit", textDecoration: "none" }}
+          >
+            <OutlinedLightButton
+              size="large"
+              data-testid="hero-see-guardrails-button"
+              sx={{ height: "40px", fontSize: 14, fontWeight: 500 }}
+            >
+              {t("hero.guardrails")}
+            </OutlinedLightButton>
+          </a>
         </Grid>
       )}
     </Grid>

diff --git a/frontend/src/components/organisms/MembersCard/MembersCard.tsx b/frontend/src/components/organisms/MembersCard/MembersCard.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 
-import { Button, Typography } from "@atoms";
+import { Typography } from "@atoms";
 
 import { formatDisplayDate, truncateText } from "@utils";
 import { useTranslations } from "next-intl";
@@ -54,14 +54,13 @@ export const MembersCard = ({
         justifyContent="center"
         gap={{ xxs: 1, md: 0 }}
       >
-        <Button
-          sx={{ pointerEvents: "none" }}
-          variant="text"
-          size="small"
+        <Typography
+          fontWeight={400}
+          variant="body1"
           data-testid={`members-${id}-joined`}
         >
           {t("card.joined")} {formatDisplayDate(created_at)}
-        </Button>
+        </Typography>
 
         {/** 
          * temporarily hidden

diff --git a/frontend/src/components/organisms/PageTitleTabs.tsx b/frontend/src/components/organisms/PageTitleTabs.tsx
@@ -9,7 +9,7 @@ export const PageTitleTabs = ({
   tabs,
   onChange,
   selectedValue,
-  sx,
+  sx
 }: {
   tabs: TabI[];
   onChange: (newValue: TabI) => void;
@@ -26,8 +26,8 @@ export const PageTitleTabs = ({
       sx={{ mb: { xxs: 1, md: 0 } }}
       value={selectedIndex}
       onChange={handleChange}
-      textColor="secondary"
-      indicatorColor="secondary"
+      textColor="inherit"
+      indicatorColor="primary"
     >
       {tabs.map((tab) => (
         <Tab
@@ -37,7 +37,7 @@ export const PageTitleTabs = ({
             textTransform: "none",
             fontSize: { xxs: 16, md: 32 },
             color: customPalette.textBlack,
-            ...sx,
+            ...sx
           }}
           data-testid={`${tab.value}-tab-button`}
         />

diff --git a/frontend/src/constants/paths.ts b/frontend/src/constants/paths.ts
@@ -14,7 +14,13 @@ export const PATHS = {
 
 export const EXTERNAL_LINKS = {
   guides:
-    "https://docs.gov.tools/about/what-is-the-constitutional-committee-portal"
+    "https://docs.gov.tools/about/what-is-the-constitutional-committee-portal",
+  termsOfUse:
+    "https://docs.intersectmbo.org/legal/policies-and-conditions/terms-of-use",
+  privacyPolicy:
+    "https://docs.intersectmbo.org/legal/policies-and-conditions/privacy-policy",
+  guardrails:
+    "https://github.com/IntersectMBO/plutus/tree/master/cardano-constitution"
 };
 
 export const adminProtectedPath = PATHS.admin.dashboard;

diff --git a/frontend/src/lib/utils/date.ts b/frontend/src/lib/utils/date.ts
@@ -23,5 +23,5 @@ import { format } from "date-fns";
  */
 export const formatDisplayDate = (
   date: string | Date,
-  outputFormat = "d.MM.yyyy"
+  outputFormat = "Qo MMM yyyy"
 ) => format(new Date(date), outputFormat).toString();