[#545] change footer component

IntersectMBO · Apr 5, 2024 · 8f7ed22 · 8f7ed22
1 parent 6f5cf33
commit 8f7ed22
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 85 deletions.
diff --git a/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx b/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx
@@ -3,7 +3,7 @@ import { Box, Link } from "@mui/material";
 
 import { Background, Typography } from "@atoms";
 import { ICONS } from "@consts";
-import { DashboardTopNav } from "@organisms";
+import { DashboardTopNav, Footer } from "@organisms";
 import { useScreenDimension } from "@hooks";
 import { useNavigate } from "react-router-dom";
 import { theme } from "@/theme";
@@ -82,6 +82,7 @@ export const CenteredBoxPageWrapper: FC<PropsWithChildren<Props>> = ({
             </Box>
           </Box>
         </Box>
+        <Footer />
       </Box>
     </Background>
   );

diff --git a/govtool/frontend/src/components/organisms/Drawer.tsx b/govtool/frontend/src/components/organisms/Drawer.tsx
@@ -1,38 +1,37 @@
-import { Box, Grid } from '@mui/material';
-import { NavLink } from 'react-router-dom';
+import { Box, Grid } from "@mui/material";
+import { NavLink } from "react-router-dom";
 
-import { DrawerLink, Typography } from "@atoms";
-import { CONNECTED_NAV_ITEMS, ICONS, IMAGES, PATHS } from "@consts";
-import { useGetVoterInfo, useTranslation } from "@hooks";
+import { DrawerLink, Spacer } from "@atoms";
+import { CONNECTED_NAV_ITEMS, IMAGES, PATHS } from "@consts";
+import { useGetVoterInfo } from "@hooks";
 import { WalletInfoCard, DRepInfoCard } from "@molecules";
 import { openInNewTab } from "@utils";
 
 export const Drawer = () => {
   const { voter } = useGetVoterInfo();
-  const { t } = useTranslation();
 
   return (
     <Box
       sx={{
-        bgcolor: '#FBFBFF',
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100vh',
-        position: 'sticky',
+        bgcolor: "#FBFBFF",
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        position: "sticky",
         top: 0,
-        width: '268px',
+        width: "268px",
       }}
     >
       <NavLink
         data-testid="logo-button"
-        style={{ display: 'flex', justifyContent: 'center' }}
+        style={{ display: "flex", justifyContent: "center" }}
         to={PATHS.dashboard}
       >
         <img
           alt="app-logo"
           height={35}
           src={IMAGES.appLogo}
-          style={{ marginTop: 24, objectFit: 'contain' }}
+          style={{ marginTop: 24, objectFit: "contain" }}
         />
       </NavLink>
       <Grid
@@ -58,27 +57,10 @@ export const Drawer = () => {
           </Grid>
         ))}
       </Grid>
-      <Box px={2}>
+      <Box p={2}>
         {voter?.isRegisteredAsDRep && <DRepInfoCard />}
-        <Box py={2} />
+        <Spacer y={2} />
         <WalletInfoCard />
-        <Box my={1}>
-          <DrawerLink
-            dataTestId="helps-link"
-            label={t('menu.help')}
-            activeIcon={ICONS.helpIcon}
-            icon={ICONS.helpIcon}
-            navTo=""
-            onClick={() =>
-              openInNewTab(
-                "https://docs.sanchogov.tools/support/get-help-in-discord",
-              )
-            }
-          />
-        </Box>
-        <Typography sx={{ mb: 2 }} variant="caption">
-          {t('footer.copyright')}
-        </Typography>
       </Box>
     </Box>
   );

diff --git a/govtool/frontend/src/components/organisms/Footer.tsx b/govtool/frontend/src/components/organisms/Footer.tsx
@@ -1,43 +1,101 @@
 import { Box, Link } from "@mui/material";
 
-import { Typography } from "@atoms";
+import { Button, Typography } from "@atoms";
+import { ICONS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
+type FooterLinkProps = {
+  label: string;
+  onClick: () => void;
+};
+
+const FooterLink = ({ label, onClick }: FooterLinkProps) => (
+  <Link
+    onClick={onClick}
+    sx={{
+      color: "textBlack",
+      cursor: "pointer",
+      fontFamily: "Poppins",
+      fontSize: 12,
+      fontWeight: 400,
+      textDecoration: "none",
+      "&:hover": { color: "primaryBlue" },
+    }}
+  >
+    {label}
+  </Link>
+);
+
 export const Footer = () => {
-  const { isMobile, pagePadding } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
   const { t } = useTranslation();
 
+  const onClickHelp = () =>
+    openInNewTab("https://docs.sanchogov.tools/support/get-help-in-discord");
+
+  const onClickPrivacyPolicy = () =>
+    openInNewTab("https://docs.sanchogov.tools/legal/privacy-policy");
+
+  // TODO: change term of service link
+  const onClickTermOfService = () =>
+    openInNewTab("https://docs.sanchogov.tools/legal/privacy-policy");
+
+  // TODO: add feedback action
+  const onClickFeedback = () => {};
+
   return (
     <Box
-      display="flex"
-      flexDirection={isMobile ? "column" : "row"}
-      justifyContent="space-between"
-      px={pagePadding}
-      py={4}
+      sx={{
+        alignItems: screenWidth < 640 ? undefined : "center",
+        display: "flex",
+        flexDirection: screenWidth < 640 ? "column" : "row",
+        justifyContent: "space-between",
+        px: screenWidth < 640 ? 2 : 5,
+        py: 2,
+      }}
     >
-      <Box flex={1}>
-        <Typography fontWeight={500} variant="caption">
-          {t("footer.copyright")}
-        </Typography>
+      <Typography fontWeight={500} variant="caption">
+        {t("footer.copyright")}
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 3,
+          mt: screenWidth < 640 ? 1.5 : 0,
+        }}
+      >
+        <FooterLink
+          label={t("footer.privacyPolicy")}
+          onClick={onClickPrivacyPolicy}
+        />
+        <FooterLink
+          label={t("footer.termOfService")}
+          onClick={onClickTermOfService}
+        />
       </Box>
-      <Box display="flex" flexDirection="row" mt={isMobile ? 1.5 : 0}>
-        <Link
-          data-testid="privacy-policy-link"
-          onClick={() =>
-            openInNewTab("https://docs.sanchogov.tools/legal/privacy-policy")
-          }
-          sx={[{ textDecoration: "none" }]}
-          mr={6}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 3,
+          justifyContent: screenWidth < 640 ? "space-between" : undefined,
+          mt: screenWidth < 640 ? 1.5 : 0,
+        }}
+      >
+        <Button
+          onClick={onClickHelp}
+          size="small"
+          startIcon={<img alt="helpIcon" src={ICONS.helpIcon} />}
+          sx={{ color: "#26252D" }}
+          variant="text"
         >
-          <Typography
-            fontWeight={isMobile ? 300 : 500}
-            sx={{ "&:hover": { color: "primaryBlue", cursor: "pointer" } }}
-            variant="caption"
-          >
-            {t("footer.privacyPolicy")}
-          </Typography>
-        </Link>
+          {t("menu.help")}
+        </Button>
+        <Button onClick={onClickFeedback} size="small" variant="outlined">
+          {t("feedback")}
+        </Button>
       </Box>
     </Box>
   );

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -299,8 +299,9 @@ export const en = {
       },
     },
     footer: {
-      copyright: "© 2023 Voltaire Gov Tool",
+      copyright: "© 2024 Intersect MBO",
       privacyPolicy: "Privacy policy",
+      termOfService: "Term of service",
     },
     forms: {
       hashPlaceholder: "The hash of metadata at URL",
@@ -708,6 +709,7 @@ export const en = {
     confirm: "Confirm",
     continue: "Continue",
     delegate: "Delegate",
+    feedback: "Feedback",
     filter: "Filter",
     goBack: "Go back",
     here: "here",

diff --git a/govtool/frontend/src/pages/ChooseStakeKey.tsx b/govtool/frontend/src/pages/ChooseStakeKey.tsx
@@ -3,20 +3,15 @@ import { Box } from "@mui/material";
 import { Background } from "@atoms";
 
 import { TopNav, ChooseStakeKeyPanel, Footer } from "@organisms";
-import { useScreenDimension } from "@/hooks";
 
-export const ChooseStakeKey = () => {
-  const { isMobile } = useScreenDimension();
-
-  return (
-    <Background>
-      <Box display="flex" flexDirection="column" minHeight="100vh">
-        <TopNav isConnectButton={false} />
-        <Box display="flex" flex={1} justifyContent="center">
-          <ChooseStakeKeyPanel />
-        </Box>
-        {isMobile && <Footer />}
+export const ChooseStakeKey = () => (
+  <Background>
+    <Box display="flex" flexDirection="column" minHeight="100vh">
+      <TopNav isConnectButton={false} />
+      <Box display="flex" flex={1} justifyContent="center">
+        <ChooseStakeKeyPanel />
       </Box>
-    </Background>
-  );
-};
+      <Footer />
+    </Box>
+  </Background>
+);
diff --git a/govtool/frontend/src/pages/CreateGovernanceAction.tsx b/govtool/frontend/src/pages/CreateGovernanceAction.tsx
@@ -88,7 +88,7 @@ export const CreateGovernanceAction = () => {
           {step === 5 && <StoreDataInfo setStep={setStep} />}
           {step === 6 && <StorageInformation setStep={setStep} />}
         </FormProvider>
-        {isMobile && <Footer />}
+        <Footer />
       </Box>
     </Background>
   );

diff --git a/govtool/frontend/src/pages/Dashboard.tsx b/govtool/frontend/src/pages/Dashboard.tsx
@@ -62,7 +62,7 @@ export const Dashboard = () => {
           <DashboardTopNav title={getPageTitle(window.location.pathname)} />
           <ScrollToManage />
           <Outlet />
-          {isMobile ? <Footer /> : null}
+          <Footer />
         </Box>
       </Box>
     </Background>

diff --git a/govtool/frontend/src/pages/DelegateTodRep.tsx b/govtool/frontend/src/pages/DelegateTodRep.tsx
@@ -41,7 +41,7 @@ export const DelegateTodRep = () => {
           {step === 1 && <DelegateTodRepStepOne setStep={setStep} />}
           {step === 2 && <DelegateTodRepStepTwo setStep={setStep} />}
         </Box>
-        {isMobile && <Footer />}
+        <Footer />
       </Box>
     </Background>
   );

diff --git a/govtool/frontend/src/pages/EditDRepMetadata.tsx b/govtool/frontend/src/pages/EditDRepMetadata.tsx
@@ -82,7 +82,7 @@ export const EditDRepMetadata = () => {
           {step === 2 && <EditDRepStoreDataInfo setStep={setStep} />}
           {step === 3 && <EditDRepStorageInformation setStep={setStep} />}
         </FormProvider>
-        {isMobile && <Footer />}
+        <Footer />
       </Box>
     </Background>
   );

diff --git a/govtool/frontend/src/pages/GovernanceActions.tsx b/govtool/frontend/src/pages/GovernanceActions.tsx
@@ -3,7 +3,11 @@ import { useNavigate } from "react-router-dom";
 import { Box, CircularProgress, Divider } from "@mui/material";
 
 import { Background, ScrollToManage, Typography } from "@atoms";
-import { GOVERNANCE_ACTIONS_FILTERS, GOVERNANCE_ACTIONS_SORTING, PATHS } from "@consts";
+import {
+  GOVERNANCE_ACTIONS_FILTERS,
+  GOVERNANCE_ACTIONS_SORTING,
+  PATHS,
+} from "@consts";
 import { useCardano } from "@context";
 import {
   useDataActionsBar,
@@ -16,7 +20,7 @@ import { Footer, TopNav, GovernanceActionsToVote } from "@organisms";
 import { WALLET_LS_KEY, getItemFromLocalStorage } from "@utils";
 
 const defaultCategories = GOVERNANCE_ACTIONS_FILTERS.map(
-  (category) => category.key
+  (category) => category.key,
 );
 
 export const GovernanceActions = () => {

diff --git a/govtool/frontend/src/pages/RegisterAsdRep.tsx b/govtool/frontend/src/pages/RegisterAsdRep.tsx
@@ -115,7 +115,7 @@ export const RegisterAsdRep = () => {
             </FormProvider>
           </>
         )}
-        {isMobile && <Footer />}
+        <Footer />
       </Box>
     </Background>
   );

diff --git a/govtool/frontend/src/pages/RetireAsDrep.tsx b/govtool/frontend/src/pages/RetireAsDrep.tsx
@@ -4,7 +4,7 @@ import { Box } from "@mui/material";
 
 import { Background } from "@atoms";
 import { PATHS } from "@consts";
-import { DashboardTopNav, WhatRetirementMeans } from "@organisms";
+import { DashboardTopNav, Footer, WhatRetirementMeans } from "@organisms";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { LinkWithIcon } from "@molecules";
 import { checkIsWalletConnected } from "@utils";
@@ -41,6 +41,7 @@ export const RetireAsDrep = () => {
           }}
         />
         <WhatRetirementMeans onClickCancel={onClickBackToDashboard} />
+        <Footer />
       </Box>
     </Background>
   );