diff --git a/frontend/src/assets/timelinePointCompleted.svg b/frontend/src/assets/timelinePointCompleted.svg index 0f7f6ff..01f9544 100644 --- a/frontend/src/assets/timelinePointCompleted.svg +++ b/frontend/src/assets/timelinePointCompleted.svg @@ -1,4 +1,11 @@ - - - + + + + + + + + + + diff --git a/frontend/src/assets/timelinePointInProgress.svg b/frontend/src/assets/timelinePointInProgress.svg index e3de0d9..a6211da 100644 --- a/frontend/src/assets/timelinePointInProgress.svg +++ b/frontend/src/assets/timelinePointInProgress.svg @@ -1,4 +1,11 @@ - - - + + + + + + + + + + diff --git a/frontend/src/assets/timelinePointUncompleted.svg b/frontend/src/assets/timelinePointUncompleted.svg index e3c062b..b17c421 100644 --- a/frontend/src/assets/timelinePointUncompleted.svg +++ b/frontend/src/assets/timelinePointUncompleted.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/components/PathwayTimeline.module.css b/frontend/src/components/PathwayTimeline.module.css index 079e11c..e7d04d2 100644 --- a/frontend/src/components/PathwayTimeline.module.css +++ b/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; } } diff --git a/frontend/src/components/PathwayTimeline.tsx b/frontend/src/components/PathwayTimeline.tsx index 7f635f5..e260730 100644 --- a/frontend/src/components/PathwayTimeline.tsx +++ b/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,7 +39,7 @@ 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; @@ -47,7 +47,7 @@ export function PathwayTimeline(props: PathwayProps) {

Path {path} Application

- 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.

@@ -65,9 +65,6 @@ export function PathwayTimeline(props: PathwayProps) { 3} inProgress={progress === 3}> Additional Information - 4} inProgress={progress === 4}> - Payment Information -
diff --git a/frontend/src/pages/Application.tsx b/frontend/src/pages/Application.tsx index 707fba5..1f64c99 100644 --- a/frontend/src/pages/Application.tsx +++ b/frontend/src/pages/Application.tsx @@ -20,7 +20,7 @@ export type ApplicationProps = { }; export const Application: React.FC = ({ 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 = ({ 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); } };