update timeline to remove payment spot

frontend/src/components/PathwayTimeline.module.css

@@ -1,12 +1,8 @@
-:root {
-  --timeline-width: 830px;
-}
-
 .pathwayContainer {
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  padding: 2rem;
+  padding: 2rem 10rem;
   box-shadow: 0px 4px 4px 0px #00000040;
   background-color: white;
 }
@@ -28,34 +24,37 @@
 .timelineContainer {
   display: flex;
   justify-content: center;
-  margin-left: 10em;
-  margin-right: 10em;
+  padding: 2rem;
 }
 
 .timeline {
   display: flex;
   position: relative;
   justify-content: space-between;
-  width: var(--timeline-width);
-  min-width: var(--timeline-width);
-  overflow: hidden;
+  width: 100%;
 }
+
 .timelinePoint {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   z-index: 5;
+  width: 1px;
 }
 .timelinePointIcon {
   display: flex;
   justify-content: center;
-  width: 30px;
-  aspect-ratio: 1/1;
+  width: 32px;
+  height: 32px;
+  overflow: visible;
 }
-.timelinePointIcon img.uncompleted {
-  width: 20px;
+
+.timelinePointIcon img {
+  width: 32px;
+  height: 32px;
 }
+
 .timelinePointDescription {
   text-align: center;
   max-width: 9rem;
@@ -73,31 +72,19 @@
   position: absolute;
   margin: 0;
   padding: 0;
-  width: 700px;
-  top: 14px;
-  left: 64px;
+  width: 100%;
+  top: 15px;
   border: solid 2px var(--color-ccidc-red);
 }
 
-@media screen and (max-width: 1000px) {
-  :root {
-    --timeline-width: 100%;
-  }
-
-  .timelineContainer {
-    justify-content: flex-start;
-    margin-left: 0;
-    margin-right: 0;
-    overflow-x: auto;
-  }
-
-  .timeline {
-    justify-content: flex-start;
-    width: auto;
-    min-width: auto;
+@media screen and (max-width: 1300px) {
+  .pathwayContainer {
+    padding: 2rem 5rem;
   }
+}
 
-  .timelineLine {
-    width: 525px;
+@media screen and (max-width: 950px) {
+  .pathwayContainer {
+    padding: 2rem 2.5rem;
   }
 }

frontend/src/components/PathwayTimeline.tsx

@@ -9,7 +9,7 @@ import styles from "./PathwayTimeline.module.css";
 type TimelinePointProps = {
   completed: boolean;
   inProgress: boolean;
-  children: string;
+  children: React.ReactNode;
 };
 function TimelinePoint(props: TimelinePointProps) {
   const { completed, inProgress, children } = props;
@@ -39,15 +39,15 @@ function TimelinePoint(props: TimelinePointProps) {
   );
 }
 
-type PathwayProps = { path: 1 | 2 | 3 | 4; progress: 0 | 1 | 2 | 3 | 4 | 5 };
+type PathwayProps = { path: 1 | 2 | 3 | 4; progress: 0 | 1 | 2 | 3 | 4 };
 export function PathwayTimeline(props: PathwayProps) {
   const { path, progress } = props;
 
   return (
     <div className={styles.pathwayContainer}>
       <h2 className={styles.timelineHeader}>Path {path} Application</h2>
       <p className={styles.timelineDescription}>
-        You must complete all 5 steps in order for your application to be reviewed and to qualify
+        You must complete all 4 steps in order for your application to be reviewed and to qualify
         for examination.
       </p>
 
@@ -65,9 +65,6 @@ export function PathwayTimeline(props: PathwayProps) {
           <TimelinePoint completed={progress > 3} inProgress={progress === 3}>
             Additional Information
           </TimelinePoint>
-          <TimelinePoint completed={progress > 4} inProgress={progress === 4}>
-            Payment Information
-          </TimelinePoint>
           <hr className={styles.timelineLine} />
         </div>
       </div>

frontend/src/pages/Application.tsx

@@ -20,7 +20,7 @@ export type ApplicationProps = {
 };
 
 export const Application: React.FC<ApplicationProps> = ({ path }: ApplicationProps) => {
-  const [pageNum, setPageNum] = useState<0 | 1 | 2 | 3 | 4 | 5>(0);
+  const [pageNum, setPageNum] = useState<0 | 1 | 2 | 3 | 4>(0);
   const { isLoggedIn, isLoading } = useContext(AuthContext);
   const navigate = useNavigate();
 
@@ -34,23 +34,19 @@ export const Application: React.FC<ApplicationProps> = ({ path }: ApplicationPro
   const [confirmSubmissionModalOpen, setConfirmSubmissionModalOpen] = useState(false);
 
   const next = () => {
-    if (pageNum < 5) {
-      setPageNum((newPageNum) => (newPageNum + 1) as 0 | 1 | 2 | 3 | 4 | 5);
+    if (pageNum < 4) {
+      setPageNum((newPageNum) => (newPageNum + 1) as 0 | 1 | 2 | 3 | 4);
       window.scrollTo({ top: 0, behavior: "instant" });
     }
 
-    if (pageNum === 5) {
-      setConfirmSubmissionModalOpen(true);
-    }
-
-    if (pageNum === 5) {
+    if (pageNum === 4) {
       setConfirmSubmissionModalOpen(true);
     }
   };
 
   const back = () => {
     if (pageNum > 0) {
-      setPageNum((newPageNum) => (newPageNum - 1) as 0 | 1 | 2 | 3 | 4 | 5);
+      setPageNum((newPageNum) => (newPageNum - 1) as 0 | 1 | 2 | 3 | 4);
     }
   };