Merge pull request #2111 from IntersectMBO/feat/1995-useful-links

[#1995] add useful external links to home page and dashboard
IntersectMBO · Oct 2, 2024 · 8b2d90e · 8b2d90e
2 parents b71f63d + 882bfe8
commit 8b2d90e
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,7 +12,7 @@ changes.
 
 ### Added
 
--
+- Add useful external links to home page and dashboard [Issue 1995](https://github.com/IntersectMBO/govtool/issues/1995)
 
 ### Fixed
 

diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx
@@ -6,7 +6,6 @@ import { PATHS, PDF_PATHS } from "@consts";
 import { useCardano, useFeatureFlag, useModal } from "@context";
 import { useWalletConnectionListener } from "@hooks";
 import {
-  DashboardCards,
   DashboardGovernanceActions,
   DashboardGovernanceActionDetails,
 } from "@organisms";
@@ -39,6 +38,7 @@ import {
 } from "@utils";
 import { PublicRoute } from "./pages/PublicRoute";
 import { TopBanners } from "./components/organisms/TopBanners";
+import { DashboardHome } from "./pages/DashboardHome";
 
 export default () => {
   const { isProposalDiscussionForumEnabled } = useFeatureFlag();
@@ -104,7 +104,7 @@ export default () => {
           />
         )}
         <Route element={<Dashboard />}>
-          <Route path={PATHS.dashboard} element={<DashboardCards />} />
+          <Route path={PATHS.dashboard} element={<DashboardHome />} />
           {isProposalDiscussionForumEnabled && (
             <Route
               path={`${PDF_PATHS.proposalDiscussion}/*`}

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -32,7 +32,7 @@ export const DashboardCards = () => {
           alignItems: "center",
           display: "flex",
           flex: 1,
-          height: "100vh",
+          minHeight: "calc(100vh - 175px)",
           justifyContent: "center",
         }}
       >
@@ -42,49 +42,45 @@ export const DashboardCards = () => {
   }
 
   return (
-    <Box flex={1}>
-      <Box
-        sx={{
-          columnGap: 3,
-          display: "grid",
-          gridTemplateColumns:
-            screenWidth < 1280
-              ? "repeat(1, minmax(300px, 530px))"
-              : screenWidth >= 1728
-              ? "repeat(3, minmax(300px, 570px))"
-              : "repeat(2, minmax(300px, 530px))",
-          justifyContent: screenWidth < 1024 ? "center" : "flex-start",
-          px: screenWidth < 640 ? 2 : 5,
-          py: 3,
-          rowGap: 3,
-        }}
-      >
-        <DelegateDashboardCard
-          currentDelegation={currentDelegation}
-          delegateTx={pendingTransaction.delegate}
-          dRepID={dRepID}
-          voter={voter}
-          votingPower={votingPower}
-        />
+    <Box
+      sx={{
+        columnGap: 3,
+        display: "grid",
+        gridTemplateColumns:
+          screenWidth < 1280
+            ? "repeat(1, minmax(300px, 530px))"
+            : screenWidth >= 1728
+            ? "repeat(3, minmax(300px, 570px))"
+            : "repeat(2, minmax(300px, 530px))",
+        justifyContent: screenWidth < 1024 ? "center" : "flex-start",
+        rowGap: 3,
+      }}
+    >
+      <DelegateDashboardCard
+        currentDelegation={currentDelegation}
+        delegateTx={pendingTransaction.delegate}
+        dRepID={dRepID}
+        voter={voter}
+        votingPower={votingPower}
+      />
 
-        <DRepDashboardCard
-          dRepIDBech32={dRepIDBech32}
-          pendingTransaction={pendingTransaction}
-          voter={voter}
-        />
+      <DRepDashboardCard
+        dRepIDBech32={dRepIDBech32}
+        pendingTransaction={pendingTransaction}
+        voter={voter}
+      />
 
-        <DirectVoterDashboardCard
-          pendingTransaction={pendingTransaction}
-          voter={voter}
-          votingPower={votingPower}
-        />
+      <DirectVoterDashboardCard
+        pendingTransaction={pendingTransaction}
+        voter={voter}
+        votingPower={votingPower}
+      />
 
-        <ListGovActionsDashboardCards />
+      <ListGovActionsDashboardCards />
 
-        <ProposeGovActionDashboardCard
-          createGovActionTx={pendingTransaction.createGovAction}
-        />
-      </Box>
+      <ProposeGovActionDashboardCard
+        createGovActionTx={pendingTransaction.createGovAction}
+      />
     </Box>
   );
 };
diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
@@ -5,14 +5,13 @@ import { Box } from "@mui/material";
 import { IMAGES, PATHS, PDF_PATHS } from "@consts";
 import { useFeatureFlag, useModal } from "@context";
 import { ActionCard } from "@molecules";
-import { useScreenDimension, useTranslation } from "@hooks";
+import { useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
 export const HomeCards = () => {
   const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const navigate = useNavigate();
   const { openModal } = useModal();
-  const { screenWidth } = useScreenDimension();
   const { t } = useTranslation();
 
   const openWalletModal = useCallback(
@@ -66,23 +65,8 @@ export const HomeCards = () => {
     <Box
       columnGap={4.625}
       display="grid"
-      gridTemplateColumns={
-        screenWidth < 2560
-          ? "repeat(1, minmax(300px, 866px))"
-          : "repeat(2, minmax(300px, 866px))"
-      }
+      gridTemplateColumns="repeat(auto-fill, minmax(300px, 866px))"
       justifyContent="center"
-      mb={screenWidth < 640 ? 10 : 17}
-      mt={screenWidth < 640 ? 10 : 14.5}
-      px={
-        screenWidth < 640
-          ? 2
-          : screenWidth < 1024
-          ? 5
-          : screenWidth < 1440
-          ? 10
-          : 34
-      }
       rowGap={4.625}
     >
       {/* DELEGATE CARD */}

diff --git a/govtool/frontend/src/components/organisms/UsefulLinks.tsx b/govtool/frontend/src/components/organisms/UsefulLinks.tsx
@@ -0,0 +1,91 @@
+import { Box, Link } from "@mui/material";
+
+import { useTranslation } from "@hooks";
+import { Typography } from "../atoms";
+import { ICONS } from "@/consts";
+import { Card } from "../molecules";
+
+const LINKS = {
+  ccPortal: {
+    url: "https://constitution.gov.tools",
+  },
+  intersectWebsite: {
+    url: "https://www.intersectmbo.org/",
+  },
+} as const;
+
+type Props = {
+  align?: "left" | "center";
+};
+
+export const UsefulLinks = ({ align = "left" }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Typography variant="title1" sx={{ mb: 4, textAlign: align }}>
+        {t("usefulLinks.title")}
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: { xxs: "column", lg: "row" },
+          columnGap: 4.5,
+          rowGap: 2.5,
+          justifyContent: align === "center" ? "center" : "flex-start",
+          alignContent: "center",
+          flexWrap: "wrap",
+        }}
+      >
+        {Object.entries(LINKS).map(([key, { url }]) => (
+          <Card
+            key={key}
+            sx={{
+              flexBasis: 0,
+              boxShadow: "2px 2px 20px 0px rgba(47, 98, 220, 0.20)",
+              maxWidth: 464,
+              minWidth: 264,
+              minHeight: 196,
+              boxSizing: "border-box",
+              display: "flex",
+              flexDirection: "column",
+              gap: 1,
+            }}
+          >
+            <Typography>
+              {t(`usefulLinks.${key as keyof typeof LINKS}.title`)}
+            </Typography>
+            <Typography variant="caption" sx={{ mb: 1 }}>
+              {t(`usefulLinks.${key as keyof typeof LINKS}.description`)}
+            </Typography>
+            <Link
+              data-testid={`useful-link-${key}`}
+              href={url}
+              target="_blank"
+              sx={{
+                alignSelf: "flex-start",
+                display: "flex",
+                gap: 1,
+                alignItems: "center",
+                mt: "auto",
+                "&:not(:hover)": {
+                  textDecoration: "none",
+                },
+              }}
+            >
+              <Typography color="primary" variant="body2">
+                {t(`usefulLinks.${key as keyof typeof LINKS}.link`)}
+              </Typography>
+              <img
+                alt="link"
+                height={16}
+                src={ICONS.externalLinkIcon}
+                width={16}
+              />
+            </Link>
+          </Card>
+        ))}
+      </Box>
+    </div>
+  );
+};
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -830,6 +830,19 @@ export const en = {
       unconstitutional: "Unconstitutional",
       yes: "Yes",
     },
+    usefulLinks: {
+      title: "Useful links",
+      ccPortal: {
+        title: "Check the Constitutional Committee Portal",
+        description: "See Interim Cardano Constitution and Constitutional committee votes rationales",
+        link: "CC Portal",
+      },
+      intersectWebsite: {
+        title: "Intersect website",
+        description: "Intersect is a member-based organization for the Cardano ecosystem — putting the community at the center of Cardano’s development",
+        link: "Intersect website",
+      },
+    },
     about: "About",
     addLink: "+ Add link",
     back: "Back",

diff --git a/govtool/frontend/src/pages/DashboardHome.tsx b/govtool/frontend/src/pages/DashboardHome.tsx
@@ -0,0 +1,25 @@
+import { Box } from "@mui/material";
+
+import { DashboardCards } from "@organisms";
+import { UsefulLinks } from "@/components/organisms/UsefulLinks";
+import { useScreenDimension } from "@/hooks";
+
+export const DashboardHome = () => {
+  const { screenWidth } = useScreenDimension();
+
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        px: screenWidth < 640 ? 2 : 5,
+        py: 3,
+      }}
+    >
+      <DashboardCards />
+      <UsefulLinks />
+    </Box>
+  );
+};
diff --git a/govtool/frontend/src/pages/Home.tsx b/govtool/frontend/src/pages/Home.tsx
@@ -7,10 +7,13 @@ import { PATHS } from "@consts";
 import { useCardano } from "@context";
 import { TopNav, Hero, Footer, HomeCards } from "@organisms";
 import { WALLET_LS_KEY, getItemFromLocalStorage } from "@utils";
+import { UsefulLinks } from "@/components/organisms/UsefulLinks";
+import { useScreenDimension } from "@/hooks";
 
 export const Home = () => {
   const { isEnabled } = useCardano();
   const navigate = useNavigate();
+  const { screenWidth } = useScreenDimension();
 
   useEffect(() => {
     if (isEnabled && getItemFromLocalStorage(`${WALLET_LS_KEY}_stake_key`)) {
@@ -23,7 +26,19 @@ export const Home = () => {
       <TopNav />
       <Box overflow="hidden">
         <Hero />
-        <HomeCards />
+        <Box
+          maxWidth={screenWidth < 2560 ? 866 : 1770}
+          mx="auto"
+          mt={screenWidth < 640 ? 10 : 14.5}
+          mb={screenWidth < 640 ? 4.5 : 6}
+          px={screenWidth < 640 ? 2 : 5}
+          display="flex"
+          flexDirection="column"
+          gap={10}
+        >
+          <HomeCards />
+          <UsefulLinks align="center" />
+        </Box>
         {/* FIXME: Footer should be on top of the layout.
         Should not be rerendered across the pages */}
         <Footer />