[#1183] Refactor routes for registration and retirement

govtool/frontend/src/components/molecules/CenteredBoxBottomButtons.tsx

@@ -1,73 +1,68 @@
-import { useMemo } from "react";
+import { useNavigate } from "react-router-dom";
 import { Box } from "@mui/material";
 
 import { Button } from "@atoms";
+import { PATHS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 
 interface Props {
-  onBackButton: () => void;
+  actionButtonText?: string;
+  actionButtonDataTestId?: string;
   onActionButton: () => void;
-  isLoading?: boolean;
+  isLoadingActionButton?: boolean;
+  disableActionButton?: boolean;
   backButtonText?: string;
-  actionButtonText?: string;
+  onBackButton?: () => void;
 }
 
 export const CenteredBoxBottomButtons = ({
+  actionButtonText,
+  actionButtonDataTestId,
+  backButtonText,
+  isLoadingActionButton,
+  disableActionButton,
   onBackButton,
   onActionButton,
-  isLoading,
-  backButtonText,
-  actionButtonText,
 }: Props) => {
   const { isMobile } = useScreenDimension();
+  const navigate = useNavigate();
   const { t } = useTranslation();
 
-  const renderBackButton = useMemo(
-    () => (
+  const navigateToDashboard = () => navigate(PATHS.dashboard);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: isMobile ? "column-reverse" : "row",
+        gap: isMobile ? 3 : 0,
+        justifyContent: "space-between",
+      }}
+    >
       <Button
         data-testid="back-button"
-        onClick={onBackButton}
+        onClick={onBackButton ?? navigateToDashboard}
         size="extraLarge"
         sx={{
           px: 6,
         }}
         variant="outlined"
       >
-        {backButtonText ?? t("cancel")}
+        {backButtonText ?? t("back")}
       </Button>
-    ),
-    [isMobile],
-  );
-
-  const renderActionButton = useMemo(
-    () => (
       <Button
-        data-testid="register-button"
-        isLoading={isLoading}
+        data-testid={actionButtonDataTestId ?? "continue-button"}
+        disabled={disableActionButton || isLoadingActionButton}
+        isLoading={isLoadingActionButton}
         onClick={onActionButton}
+        size="extraLarge"
         sx={{
           px: 6,
-          height: 48,
-          fontSize: 16,
         }}
         variant="contained"
       >
         {actionButtonText ?? t("continue")}
       </Button>
-    ),
-    [isLoading, isMobile],
-  );
-
-  return (
-    <Box
-      display="flex"
-      flexDirection={isMobile ? "column-reverse" : "row"}
-      justifyContent="space-around"
-      mt={6}
-    >
-      {renderBackButton}
-      <Box px={2} py={isMobile ? 1.5 : 0} />
-      {renderActionButton}
     </Box>
   );
 };

govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx

@@ -1,86 +1,70 @@
 import { FC, PropsWithChildren } from "react";
-import { Box, Link } from "@mui/material";
+import { Box } from "@mui/material";
 
-import { Background, Typography } from "@atoms";
-import { ICONS } from "@consts";
+import { Background } from "@atoms";
+import { PATHS } from "@consts";
 import { DashboardTopNav, Footer } from "@organisms";
-import { useScreenDimension } from "@hooks";
+import { useScreenDimension, useTranslation } from "@hooks";
 import { useNavigate } from "react-router-dom";
 import { theme } from "@/theme";
+import { LinkWithIcon } from "./LinkWithIcon";
 
 interface Props {
   pageTitle: string;
-  backButtonText: string;
-  backButtonPath: string;
-  isVotingPowerHidden?: boolean;
+  onClickBackToDashboard?: () => void;
+  showVotingPower?: boolean;
+  hideBox?: boolean;
 }
 export const CenteredBoxPageWrapper: FC<PropsWithChildren<Props>> = ({
   pageTitle,
-  backButtonText,
-  backButtonPath,
-  isVotingPowerHidden,
+  onClickBackToDashboard,
+  showVotingPower,
+  hideBox,
   children,
 }) => {
-  const { isMobile, screenWidth, pagePadding } = useScreenDimension();
+  const { isMobile } = useScreenDimension();
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const {
     palette: { boxShadow2 },
   } = theme;
 
   return (
     <Background isReverted>
       <Box display="flex" minHeight="100vh" flexDirection="column">
-        <DashboardTopNav
-          title={pageTitle}
-          isVotingPowerHidden={isVotingPowerHidden}
-        />
+        <DashboardTopNav title={pageTitle} hideVotingPower={!showVotingPower} />
         <Box
+          flex={1}
+          px={isMobile ? 2 : 5}
+          py={isMobile ? 3 : 1.5}
           display="flex"
-          justifyContent="center"
           flexDirection="column"
-          height={isMobile ? "100%" : "auto"}
+          gap={isMobile ? 0 : 1.5}
         >
-          <Link
-            data-testid="back-button"
-            sx={{
-              cursor: "pointer",
-              display: "flex",
-              textDecoration: "none",
-              my: 3,
-              marginLeft: isMobile ? 2 : "40px",
-            }}
-            onClick={() => navigate(backButtonPath)}
-          >
-            <img
-              src={ICONS.arrowLeftThinIcon}
-              alt="arrow"
-              style={{ marginRight: "4px" }}
-            />
-            <Typography
-              variant="body2"
-              color="primary"
-              sx={{
-                fontWeight: 400,
-                paddingTop: "1px",
-              }}
-            >
-              {backButtonText}
-            </Typography>
-          </Link>
-          <Box display="flex" justifyContent="center">
+          <LinkWithIcon
+            label={t("backToDashboard")}
+            onClick={
+              onClickBackToDashboard ?? (() => navigate(PATHS.dashboard))
+            }
+          />
+          {hideBox ? (
+            <Box flex={1}>{children}</Box>
+          ) : (
             <Box
-              width={screenWidth < 768 ? "auto" : "52vw"}
-              boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
-              px={pagePadding}
-              py={isMobile ? 3 : 8}
+              alignSelf="center"
               borderRadius="20px"
+              boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
+              mb={isMobile ? 2 : 1.5}
+              px={isMobile ? 2 : 18.75}
+              py={isMobile ? 6 : 8}
               height="auto"
+              maxWidth={isMobile ? "none" : 600}
+              display="flex"
+              flexDirection="column"
             >
-              <Box display="flex" flexDirection="column">
-                {children}
-              </Box>
+              {children}
             </Box>
-          </Box>
+          )}
         </Box>
         {/* FIXME: Footer should be on top of the layout.
         Should not be rerendered across the pages */}

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/ChooseGovernanceActionType.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { ActionRadio, Spacer, Typography } from "@atoms";
+import { CenteredBoxBottomButtons } from "@molecules";
 import { GovernanceActionTootlip } from "@consts";
 import {
   useCreateGovernanceActionForm,
@@ -8,8 +9,6 @@ import {
 } from "@hooks";
 import { GovernanceActionType } from "@/types/governanceAction";
 
-import { BgCard } from "../BgCard";
-
 type ChooseGovernanceActionTypeProps = {
   setStep: Dispatch<SetStateAction<number>>;
 };
@@ -59,18 +58,19 @@ export const ChooseGovernanceActionType = ({
     );
 
   return (
-    <BgCard
-      actionButtonLabel={t("continue")}
-      isActionButtonDisabled={isContinueButtonDisabled}
-      onClickActionButton={onClickContinue}
-      onClickBackButton={onClickBack}
-    >
+    <>
       <Typography sx={{ textAlign: "center" }} variant="headline4">
         {t("createGovernanceAction.chooseGATypeTitle")}
       </Typography>
       <Spacer y={isMobile ? 4.25 : 7.5} />
       {renderGovernanceActionTypes()}
       <Spacer y={isMobile ? 6 : 7.5} />
-    </BgCard>
+      <CenteredBoxBottomButtons
+        disableActionButton={isContinueButtonDisabled}
+        onActionButton={onClickContinue}
+        onBackButton={onClickBack}
+        backButtonText={t("cancel")}
+      />
+    </>
   );
 };