3222: Update pagination component design (#3223)

ijoel · web-flow · commit 332c545b91a2 · 2026-05-15T11:15:45.000-04:00
* Revise numbered pagination feature

* Update typography, spacing, and styles to match update

* Refactor and simplify page navigation logic in onPage function

* Sort imports and WizardFooter PropTypes

* Fix WizardFooter indentation

* Apply submit button styling to "ACTION" button
diff --git a/client/src/components/Button/NavButton.jsx b/client/src/components/Button/NavButton.jsx
@@ -41,6 +41,7 @@ const NavButton = ({
   navDirection,
   isVisible,
   isDisabled,
+  className,
   color
 }) => {
   const theme = useTheme();
@@ -51,7 +52,7 @@ const NavButton = ({
   return (
     <Button
       id={id}
-      className={clsx(classes.navButton, maybeDisabled, maybeHiddenVisibility)}
+      className={clsx(classes.navButton, maybeDisabled, maybeHiddenVisibility, className)}
       data-testid={id}
       color={color}
       onClick={onClick}
@@ -78,7 +79,8 @@ NavButton.propTypes = {
   navDirection: PropTypes.string.isRequired,
   isVisible: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
-  color: PropTypes.string
+  color: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default NavButton;
diff --git a/client/src/components/ProjectWizard/NumberedLink.jsx b/client/src/components/ProjectWizard/NumberedLink.jsx
@@ -6,14 +6,14 @@ import clsx from "clsx";
 const useStyles = createUseStyles(theme => ({
   link: {
     fontFamily: "Calibri",
-    fontWeight: 700,
-    letterSpacing: "0.05em",
-    fontSize: "20px",
-    color: theme.colors.secondary.linkBlue,
+    fontWeight: 600,
+    letterSpacing: "0.1em",
+    fontSize: "23px",
+    color: theme.colorLADOTBlack,
     textDecoration: "none",
     cursor: "pointer",
-    margin: "0.2em", // adding some margin for spacing like the button had
-    padding: "0.1em 0.3em",
+    margin: "0.2em 0.1em",
+    padding: "0.6em 0.8em",
     "&[aria-disabled='true'], &[disabled]": {
       color: theme.colorGray,
       cursor: "default",
@@ -22,9 +22,9 @@ const useStyles = createUseStyles(theme => ({
   },
   activeLink: {
     backgroundColor: theme.colorPrimary,
-    color: theme.colorBlack,
-    padding: "8px 12px",
-    textDecoration: "none",
+    fontWeight: 700,
+    fontSize: "25px",
+    color: theme.colorLADOTBlack,
     cursor: "default"
   }
 }));
diff --git a/client/src/components/ProjectWizard/TdmCalculationWizard.jsx b/client/src/components/ProjectWizard/TdmCalculationWizard.jsx
@@ -455,14 +455,16 @@ const TdmCalculationWizard = props => {
   };
 
   const onPageChange = pageNo => {
-    const { page, projectId } = params;
+    const MIN_PAGE = 0;
+    const MAX_PAGE = 5;
+    const { projectId } = params;
     const projectIdParam = projectId ? `/${projectId}` : "/0";
-    if (Number(pageNo) > Number(page)) {
-      if (handleValidate()) {
+
+    if ((typeof pageNo === 'number') &&
+        (pageNo > MIN_PAGE) &&
+        (pageNo <= MAX_PAGE) &&
+        handleValidate()) {
         navigate(`/calculation/${pageNo}${projectIdParam}`);
-      }
-    } else {
-      navigate(`/calculation/${pageNo}${projectIdParam}`);
     }
   };
 
diff --git a/client/src/components/ProjectWizard/WizardFooter.jsx b/client/src/components/ProjectWizard/WizardFooter.jsx
@@ -1,18 +1,19 @@
-import React, { useRef, useContext } from "react";
+import Popup from "reactjs-popup";
 import PropTypes from "prop-types";
-import NavButton from "../Button/NavButton";
 import { createUseStyles } from "react-jss";
-import Button from "../Button/Button";
 import { useReactToPrint } from "react-to-print";
-import { PdfPrint } from "../PdfPrint/PdfPrint";
+import { useRef, useContext } from "react";
+
+import Button from "../Button/Button";
+import CalculationsContext from "../../contexts/CalculationsContext";
+import NavButton from "../Button/NavButton";
 import NumberedLink from "./NumberedLink";
-import { formatDatetime } from "../../helpers/util";
-import UserContext from "../../contexts/UserContext";
-import Popup from "reactjs-popup";
 import ProjectContextMenu from "../Projects/ProjectContextMenu";
-import { useReplaceAriaAttribute } from "hooks/useReplaceAriaAttribute";
+import UserContext from "../../contexts/UserContext";
+import { PdfPrint } from "../PdfPrint/PdfPrint";
 import { formatCalculation } from "../../helpers/Calculations";
-import CalculationsContext from "../../contexts/CalculationsContext";
+import { formatDatetime } from "../../helpers/util";
+import { useReplaceAriaAttribute } from "../../hooks/useReplaceAriaAttribute";
 
 const useStyles = createUseStyles({
   allButtonsWrapper: {
@@ -46,14 +47,21 @@ const useStyles = createUseStyles({
   },
   navButtonGroup: {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+  },
+  navButton: {
+    margin: "0.5em",
+    padding: "0.3em 0.4em .05em"
+  },
+  numberedLinksGroup: {
+    display: "flex",
+    alignItems: "center",
+    margin: "0.1em 0 0"
+  },
+  callToActionButton: {
+    margin: "0.5em",
+    padding: "0.8em 1em",
   },
-  numberedNavButton: {
-    margin: "0.2em",
-    padding: "0.1em 0.3em",
-    minHeight: "min-content",
-    fontSize: "1.5rem"
-  }
 });
 
 const WizardFooter = ({
@@ -128,41 +136,44 @@ const WizardFooter = ({
                   id="leftNavArrow"
                   navDirection="previous"
                   color="colorPrimary"
+                  className={classes.navButton}
                   isVisible={
                     page !== 1 &&
-                    !project.dateSnapshotted &&
-                    (!shareView || isAdmin)
+                      !project.dateSnapshotted &&
+                      (!shareView || isAdmin)
                   }
                   isDisabled={
                     (shareView && !isAdmin) ||
-                    !!project.dateSnapshotted ||
-                    Number(page) === 1
+                      !!project.dateSnapshotted ||
+                      Number(page) === 1
                   }
                   onClick={() => {
                     onPageChange(Number(page) - 1);
                   }}
                 />
 
-                {showNumberedLinks &&
-                  Array.from({ length: 5 }, (_, i) => i + 1).map(p => (
-                    <NumberedLink
-                      key={`nav-page-${p}`}
-                      id={`nav-page-${p}`}
-                      className={classes.numberedNavButton}
-                      onClick={() => onPageChange(p)}
-                      isActive={p === Number(page)}
-                      disabled={
-                        (shareView && !isAdmin) ||
-                        (p === 4 && projectLevel === 0) ||
-                        (!project.dateSnapshotted &&
-                          p > Number(page) &&
-                          setDisabledForNextNavButton())
-                      }
-                      ariaLabel={`go to page ${p}`}
-                    >
-                      {p}
-                    </NumberedLink>
-                  ))}
+                {showNumberedLinks && (
+                  <div className={classes.numberedLinksGroup}>
+                    {Array.from({ length: 5 }, (_, i) => i + 1).map(p => (
+                      <NumberedLink
+                        key={`nav-page-${p}`}
+                        id={`nav-page-${p}`}
+                        onClick={() => onPageChange(p)}
+                        isActive={p === Number(page)}
+                        disabled={
+                          (shareView && !isAdmin) ||
+                            (p === 4 && projectLevel === 0) ||
+                            (!project.dateSnapshotted &&
+                             p > Number(page) &&
+                             setDisabledForNextNavButton())
+                        }
+                        ariaLabel={`go to page ${p}`}
+                      >
+                        {p}
+                      </NumberedLink>
+                    ))}
+                  </div>
+                )}
 
                 {(!shareView || isAdmin) && !project?.id ? (
                   <div className={classes.pageNumberCounter}>
@@ -174,6 +185,7 @@ const WizardFooter = ({
                   id="rightNavArrow"
                   navDirection="next"
                   color="colorPrimary"
+                  className={classes.navButton}
                   isVisible={page !== 5}
                   isDisabled={setDisabledForNextNavButton()}
                   onClick={() => {
@@ -190,7 +202,11 @@ const WizardFooter = ({
                   trigger={
                     // needs element wrapped around Button so reactjs-popup has something to anchor on
                     <div id={elementId}>
-                      <Button id="action" variant="tertiary">
+                      <Button
+                        id="action"
+                        variant="tertiary"
+                        className={classes.callToActionButton}
+                      >
                         ACTION
                       </Button>
                     </div>
@@ -232,6 +248,7 @@ const WizardFooter = ({
             <Button
               id="saveButton"
               variant="primary"
+              className={classes.callToActionButton}
               disabled={setDisabledSaveButton()}
               isDisplayed={setDisplaySaveButton()}
               onClick={onSave}
@@ -262,9 +279,9 @@ const WizardFooter = ({
             <strong>Status: </strong>
             {!formattedDateSnapshotted
               ? "Draft"
-              : project.shareCount
-                ? "Shared Snapshot"
-                : "Snapshot"}
+              : project.loginId === loggedInUserId
+                ? "Snapshot"
+                : "Shared Snapshot"}
           </div>
           {formattedDateSubmitted ? (
             <div>
@@ -292,35 +309,35 @@ const WizardFooter = ({
 
 WizardFooter.propTypes = {
   classes: PropTypes.any,
-  rules: PropTypes.any,
-  page: PropTypes.any,
-  onPageChange: PropTypes.any,
-  pageNumber: PropTypes.any,
-  isFinalPage: PropTypes.bool,
-  setDisabledForNextNavButton: PropTypes.any,
-  setDisabledSaveButton: PropTypes.any,
-  setDisplaySaveButton: PropTypes.any,
-  onSave: PropTypes.any,
-  submitModalOpen: PropTypes.any,
-  handleSubmitModalOpen: PropTypes.any,
-  handleSubmitModalClose: PropTypes.any,
-  targetNotReachedModalOpen: PropTypes.any,
-  showCopyAndEditSnapshot: PropTypes.func,
-  showSubmitModal: PropTypes.func,
   handleCsvModalOpen: PropTypes.func,
-  handleHideModalOpen: PropTypes.func,
+  handleDROModalOpenWithPreCheck: PropTypes.func,
   handleDeleteModalOpen: PropTypes.func,
+  handleHideModalOpen: PropTypes.func,
   handlePrintPdf: PropTypes.func,
-  handleSnapshotModalOpen: PropTypes.func,
   handleRenameSnapshotModalOpen: PropTypes.func,
   handleShareSnapshotModalOpen: PropTypes.func,
-  handleDROModalOpenWithPreCheck: PropTypes.func,
+  handleSnapshotModalOpen: PropTypes.func,
+  handleSubmitModalClose: PropTypes.any,
+  handleSubmitModalOpen: PropTypes.any,
   isDroCommitted: PropTypes.func,
+  isFinalPage: PropTypes.bool,
   isSubmittingSnapshot: PropTypes.object,
   onDownload: PropTypes.any,
+  onPageChange: PropTypes.any,
+  onSave: PropTypes.any,
+  page: PropTypes.any,
+  pageNumber: PropTypes.any,
   project: PropTypes.any,
+  rules: PropTypes.any,
   selectProject: PropTypes.any,
-  shareView: PropTypes.bool
+  setDisabledForNextNavButton: PropTypes.any,
+  setDisabledSaveButton: PropTypes.any,
+  setDisplaySaveButton: PropTypes.any,
+  shareView: PropTypes.bool,
+  showCopyAndEditSnapshot: PropTypes.func,
+  showSubmitModal: PropTypes.func,
+  submitModalOpen: PropTypes.any,
+  targetNotReachedModalOpen: PropTypes.any,
 };
 
 export default WizardFooter;
diff --git a/client/src/styles/theme.js b/client/src/styles/theme.js
@@ -4,6 +4,7 @@ export const jssTheme = {
   colorPrimaryDisabled: "#D3E29C", //green tint
   colorText: "#0F2940", //dark navy
   colorLADOT: "#002E6D", //navy
+  colorLADOTBlack: "#231F20", //Medium Black
   colorGray: "#808080",
   colorLightGray: "#A0A0A0",
   colorEarnedPoints: "rgb(255, 168, 4)", //orange
