From 59cd5d2ab9a47665a6e46b868af56e669327a3cd Mon Sep 17 00:00:00 2001
From: Vojimirovich <vojimir.cirovic.bloxico@gmail.com>
Date: Wed, 6 Nov 2024 17:17:33 +0100
Subject: [PATCH] fix: changed tabs design, date formating, removed cta on
 memebers card, add guardrails btn on landing page

---
 frontend/messages/de.json                     |  1 +
 frontend/messages/en.json                     |  1 +
 .../components/organisms/Footer/Footer.tsx    |  4 +--
 .../components/organisms/Hero/HeroActions.tsx | 30 +++++++++++++++----
 .../organisms/MembersCard/MembersCard.tsx     | 11 ++++---
 .../components/organisms/PageTitleTabs.tsx    |  8 ++---
 frontend/src/constants/paths.ts               |  8 ++++-
 frontend/src/lib/utils/date.ts                |  2 +-
 8 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index b068c1a6..8ea40181 100644
--- 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
index b4a9f141..d07e3cd3 100644
--- 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
index cf22f562..f3c47fbf 100644
--- 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
index 37d0a1fd..9326309b 100644
--- 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
index a38073a6..d517f5b4 100644
--- 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
index b3d2da13..8cc31fc0 100644
--- 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
index 1c1a12d6..22b0467a 100644
--- 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
index 9fb6aacc..ad859d77 100644
--- 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();