Minor refactor

IntersectMBO · Feb 28, 2024 · 2012b87 · 2012b87
1 parent c1a1d85
commit 2012b87
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 31 deletions.
diff --git a/...components/molecules/BottomBoxButtons.tsx → ...ts/molecules/CenteredBoxBottomButtons.tsx b/...components/molecules/BottomBoxButtons.tsx → ...ts/molecules/CenteredBoxBottomButtons.tsx
@@ -5,19 +5,19 @@ import { Button, LoadingButton } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
 
 interface Props {
-  leftButtonAction: () => void;
-  rightButtonAction: () => void;
-  rightButtonIsLoading?: boolean;
-  leftButtonText?: string;
-  rightButtonText?: string;
+  onBackButton: () => void;
+  onActionButton: () => void;
+  isLoading?: boolean;
+  backButtonText?: string;
+  actionButtonText?: string;
 }
 
-export const BottomBoxButtons = ({
-  leftButtonAction,
-  rightButtonAction,
-  rightButtonIsLoading,
-  leftButtonText,
-  rightButtonText,
+export const CenteredBoxBottomButtons = ({
+  onBackButton,
+  onActionButton,
+  isLoading,
+  backButtonText,
+  actionButtonText,
 }: Props) => {
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
@@ -26,25 +26,25 @@ export const BottomBoxButtons = ({
     return (
       <Button
         data-testid={"back-button"}
-        onClick={leftButtonAction}
+        onClick={onBackButton}
         size="extraLarge"
         sx={{
           px: 6,
           width: isMobile ? "100%" : "auto",
         }}
         variant="outlined"
       >
-        {leftButtonText ?? t("cancel")}
+        {backButtonText ?? t("cancel")}
       </Button>
     );
   }, [isMobile]);
 
-  const renderRegisterButton = useMemo(() => {
+  const renderActionButton = useMemo(() => {
     return (
       <LoadingButton
         data-testid={"register-button"}
-        isLoading={rightButtonIsLoading}
-        onClick={rightButtonAction}
+        isLoading={isLoading}
+        onClick={onActionButton}
         sx={{
           borderRadius: 50,
           textTransform: "none",
@@ -55,10 +55,10 @@ export const BottomBoxButtons = ({
         }}
         variant="contained"
       >
-        {rightButtonText ?? t("continue")}
+        {actionButtonText ?? t("continue")}
       </LoadingButton>
     );
-  }, [rightButtonIsLoading, isMobile]);
+  }, [isLoading, isMobile]);
 
   return (
     <Box
@@ -67,9 +67,9 @@ export const BottomBoxButtons = ({
       justifyContent="space-around"
       mt={6}
     >
-      {isMobile ? renderRegisterButton : renderBackButton}
+      {isMobile ? renderActionButton : renderBackButton}
       <Box px={2} py={isMobile ? 1.5 : 0} />
-      {isMobile ? renderBackButton : renderRegisterButton}
+      {isMobile ? renderBackButton : renderActionButton}
     </Box>
   );
 };
diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts
@@ -1,5 +1,5 @@
 export * from "./ActionCard";
-export * from "./BottomBoxButtons";
+export * from "./CenteredBoxBottomButtons";
 export * from "./CenteredBoxPageWrapper";
 export * from "./DashboardActionCard";
 export * from "./DataActionsBar";

diff --git a/govtool/frontend/src/components/organisms/RegisterAsSoleVoterBox.tsx b/govtool/frontend/src/components/organisms/RegisterAsSoleVoterBox.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import { PATHS } from "@consts";
 import { RegisterAsSoleVoterBoxContent } from "@organisms";
-import { BottomBoxButtons } from "@molecules";
+import { CenteredBoxBottomButtons } from "@molecules";
 import { useCardano, useModal } from "@context";
 
 export const RegisterAsSoleVoterBox = () => {
@@ -66,10 +66,10 @@ export const RegisterAsSoleVoterBox = () => {
   return (
     <>
       <RegisterAsSoleVoterBoxContent />
-      <BottomBoxButtons
-        leftButtonAction={() => navigate(PATHS.dashboard)}
-        rightButtonAction={onRegister}
-        rightButtonIsLoading={isLoading}
+      <CenteredBoxBottomButtons
+        onBackButton={() => navigate(PATHS.dashboard)}
+        onActionButton={onRegister}
+        isLoading={isLoading}
       />
     </>
   );

diff --git a/govtool/frontend/src/components/organisms/RetireAsSoleVoterBox.tsx b/govtool/frontend/src/components/organisms/RetireAsSoleVoterBox.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { PATHS } from "@consts";
-import { BottomBoxButtons } from "@molecules";
+import { CenteredBoxBottomButtons } from "@molecules";
 import { useCardano, useModal } from "@context";
 import { RetireAsSoleVoterBoxContent } from "@organisms";
 
@@ -76,10 +76,10 @@ export const RetireAsSoleVoterBox = () => {
   return (
     <>
       <RetireAsSoleVoterBoxContent />
-      <BottomBoxButtons
-        leftButtonAction={() => navigate(PATHS.dashboard)}
-        rightButtonAction={onRetire}
-        rightButtonIsLoading={isLoading}
+      <CenteredBoxBottomButtons
+        onBackButton={() => navigate(PATHS.dashboard)}
+        onActionButton={onRetire}
+        isLoading={isLoading}
       />
     </>
   );

diff --git a/govtool/frontend/src/components/organisms/RetireAsSoleVoterBoxContent.tsx b/govtool/frontend/src/components/organisms/RetireAsSoleVoterBoxContent.tsx
@@ -23,6 +23,7 @@ export const RetireAsSoleVoterBoxContent = () => {
           mt: isMobile ? 4 : 10,
           textAlign: "center",
           whiteSpace: "pre-line",
+          textDecoration: "underline",
         }}
         variant="body1"
       >