From 1f08fc952cd200686c40c501100f764dad469673 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Tue, 28 May 2024 14:30:11 -0700 Subject: [PATCH 1/6] Error Page set up, removed unused TestCongratulations import, and fixed Onclick null errors candidate page --- frontend/src/App.tsx | 4 +++- frontend/src/globals.css | 2 ++ frontend/src/pages/Candidates.tsx | 4 ++-- frontend/src/pages/RedirectTo404.tsx | 20 ++++++++++++++++++ frontend/src/pages/index.ts | 4 ++-- .../src/stylesheets/RedirectTo404.module.css | 21 +++++++++++++++++++ 6 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 frontend/src/pages/RedirectTo404.tsx create mode 100644 frontend/src/stylesheets/RedirectTo404.module.css diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e0b1eba..2edb10b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,6 +7,7 @@ import { Candidates, Login, PrescreeningForm, + RedirectTo404, ThankyouForApplying, } from "./pages/index.ts"; @@ -26,7 +27,8 @@ function App() {
}> - } /> + {/* } /> */} + } /> } /> } /> } /> diff --git a/frontend/src/globals.css b/frontend/src/globals.css index 72bbd71..efff333 100644 --- a/frontend/src/globals.css +++ b/frontend/src/globals.css @@ -19,6 +19,8 @@ --font-body: normal 400 1rem "Rubik", sans-serif; --font-nav: "Roboto", sans-serif; --font-title-medium: 700 1.75rem "Rubik"; + --font-error-num: 700 7.5rem "Rubik"; + --font-error-type: 700 4rem "Rubik"; } * { diff --git a/frontend/src/pages/Candidates.tsx b/frontend/src/pages/Candidates.tsx index 47b6d20..04592dc 100644 --- a/frontend/src/pages/Candidates.tsx +++ b/frontend/src/pages/Candidates.tsx @@ -59,7 +59,7 @@ export function Candidates() {

- +
@@ -109,7 +109,7 @@ export function Candidates() {
- +
diff --git a/frontend/src/pages/RedirectTo404.tsx b/frontend/src/pages/RedirectTo404.tsx new file mode 100644 index 0000000..5ca564f --- /dev/null +++ b/frontend/src/pages/RedirectTo404.tsx @@ -0,0 +1,20 @@ +import styles from "../stylesheets/RedirectTo404.module.css"; +import { Page } from "../components"; + +export function RedirectTo404() { + return ( + +
+

404

+

Page Not Found

+

+ Sorry, we couldn't find the page you're looking for, click{" "} + + here. + {" "} + Please ensure that the URL is correct and try again. +

+
+ + ); +} diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts index bb0d988..2a0d00e 100644 --- a/frontend/src/pages/index.ts +++ b/frontend/src/pages/index.ts @@ -2,15 +2,15 @@ import { Application } from "./Application.tsx"; import { Candidates } from "./Candidates.tsx"; import { Login } from "./Login.tsx"; import { PrescreeningForm } from "./PrescreeningForm.tsx"; -import { TestCongratulations } from "./TestCongratulations.tsx"; +import { RedirectTo404 } from "./RedirectTo404.tsx"; import { TestModals } from "./TestModals.tsx"; import { ThankyouForApplying } from "./ThankyouForApplying.tsx"; export { Application, Candidates, - TestCongratulations, ThankyouForApplying, PrescreeningForm, Login, + RedirectTo404, TestModals, }; diff --git a/frontend/src/stylesheets/RedirectTo404.module.css b/frontend/src/stylesheets/RedirectTo404.module.css new file mode 100644 index 0000000..62d958d --- /dev/null +++ b/frontend/src/stylesheets/RedirectTo404.module.css @@ -0,0 +1,21 @@ +.errorMessageContainer { + display: flex; +} + +.errorType { + color: var(--color-ccidc-red); + font: var(--font-error-num); +} + +.errorReason { + color: var(--color-error); + font: var(--font-error-type); +} + +.errorMessage { + color: var(--color-ccidc-red); +} + +.lightBlue { + color: var(--color-ccidc-blue); +} From 565d0fe841a1360d6dc81a598e7ac5e48ed4fbf1 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Tue, 28 May 2024 14:37:28 -0700 Subject: [PATCH 2/6] Title colors fixed and added to global css --- frontend/src/globals.css | 1 + frontend/src/stylesheets/RedirectTo404.module.css | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/globals.css b/frontend/src/globals.css index efff333..c2d4bdb 100644 --- a/frontend/src/globals.css +++ b/frontend/src/globals.css @@ -10,6 +10,7 @@ --color-accent: #b4b4b4; --color-error: #fc3030; --color-red-secondary: #ce2e21; + --color-red-tertiary: #782420; --color-shadow: #d8d8d8; --color-link: #2a61bb; --font-title: normal bold 2rem "Rubik", sans-serif; diff --git a/frontend/src/stylesheets/RedirectTo404.module.css b/frontend/src/stylesheets/RedirectTo404.module.css index 62d958d..10b17d6 100644 --- a/frontend/src/stylesheets/RedirectTo404.module.css +++ b/frontend/src/stylesheets/RedirectTo404.module.css @@ -3,17 +3,17 @@ } .errorType { - color: var(--color-ccidc-red); + color: var(--color-red-tertiary); font: var(--font-error-num); } .errorReason { - color: var(--color-error); + color: var(--color-ccidc-red); font: var(--font-error-type); } .errorMessage { - color: var(--color-ccidc-red); + color: var(--color-red-tertiary); } .lightBlue { From 8c1475a0a05d05497928ac8a1eba8fadc850742d Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Tue, 28 May 2024 15:21:08 -0700 Subject: [PATCH 3/6] Gray rectangles added to page --- frontend/src/pages/RedirectTo404.tsx | 6 ++ .../src/stylesheets/RedirectTo404.module.css | 56 ++++++++++++++++++- 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/RedirectTo404.tsx b/frontend/src/pages/RedirectTo404.tsx index 5ca564f..669f93f 100644 --- a/frontend/src/pages/RedirectTo404.tsx +++ b/frontend/src/pages/RedirectTo404.tsx @@ -12,9 +12,15 @@ export function RedirectTo404() { here. {" "} +
Please ensure that the URL is correct and try again.

+ +
+
+
+
); } diff --git a/frontend/src/stylesheets/RedirectTo404.module.css b/frontend/src/stylesheets/RedirectTo404.module.css index 10b17d6..2d528dc 100644 --- a/frontend/src/stylesheets/RedirectTo404.module.css +++ b/frontend/src/stylesheets/RedirectTo404.module.css @@ -1,21 +1,75 @@ .errorMessageContainer { display: flex; + flex-direction: column; + align-items: center; + gap: 1em; } .errorType { + margin-top: 1em; color: var(--color-red-tertiary); font: var(--font-error-num); } .errorReason { + margin-top: 0; color: var(--color-ccidc-red); font: var(--font-error-type); } .errorMessage { color: var(--color-red-tertiary); + text-align: center; } .lightBlue { - color: var(--color-ccidc-blue); + color: var(--color-link); +} + +.topLeftRec { + position: absolute; + width: 498.79px; + height: 21.61px; + top: 465px; + left: -80px; + gap: 0px; + opacity: 0px; + transform: rotate(51deg); + background-color: #909090; +} + +.bottomLeftRec { + position: absolute; + width: 498.79px; + height: 21.61px; + top: 850px; + left: -80px; + gap: 0px; + opacity: 0px; + transform: rotate(-51deg); + background-color: #909090; +} + +.topRightRec { + position: absolute; + width: 498.79px; + height: 21.61px; + top: 265px; + right: -85px; + gap: 0px; + opacity: 0px; + transform: rotate(-51.55deg); + background-color: #909090; +} + +.bottomRightRec { + position: absolute; + width: 490.86px; + height: 21.61px; + top: 645px; + right: -85px; + gap: 0px; + opacity: 0px; + transform: rotate(-130deg); + background-color: #909090; } From 7e6ee2e62f37f2dcebd8102452aeb675ef1bc885 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Mon, 3 Jun 2024 18:35:23 -0700 Subject: [PATCH 4/6] Route added + figma design update --- frontend/src/App.tsx | 1 + frontend/src/pages/RedirectTo404.tsx | 2 + .../src/stylesheets/RedirectTo404.module.css | 50 +++++++++---------- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2edb10b..cf769b8 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -36,6 +36,7 @@ function App() { } /> } /> } /> + } /> } /> diff --git a/frontend/src/pages/RedirectTo404.tsx b/frontend/src/pages/RedirectTo404.tsx index 669f93f..b5d9e6d 100644 --- a/frontend/src/pages/RedirectTo404.tsx +++ b/frontend/src/pages/RedirectTo404.tsx @@ -17,6 +17,8 @@ export function RedirectTo404() {

+ {/*
*/} +
diff --git a/frontend/src/stylesheets/RedirectTo404.module.css b/frontend/src/stylesheets/RedirectTo404.module.css index 2d528dc..940a21a 100644 --- a/frontend/src/stylesheets/RedirectTo404.module.css +++ b/frontend/src/stylesheets/RedirectTo404.module.css @@ -6,7 +6,7 @@ } .errorType { - margin-top: 1em; + margin-top: 1.5em; color: var(--color-red-tertiary); font: var(--font-error-num); } @@ -23,53 +23,53 @@ } .lightBlue { - color: var(--color-link); + color: var(--color-ccidc-blue); } .topLeftRec { position: absolute; - width: 498.79px; - height: 21.61px; + width: 600px; + height: 40px; top: 465px; - left: -80px; + left: -125px; gap: 0px; opacity: 0px; - transform: rotate(51deg); - background-color: #909090; + transform: rotate(50deg); + background-color: #b4b4b4; } .bottomLeftRec { position: absolute; - width: 498.79px; - height: 21.61px; - top: 850px; - left: -80px; + width: 500px; + height: 40px; + top: 848px; + left: -95px; gap: 0px; opacity: 0px; - transform: rotate(-51deg); - background-color: #909090; + transform: rotate(-40deg); + background-color: #b4b4b4; } .topRightRec { position: absolute; - width: 498.79px; - height: 21.61px; - top: 265px; - right: -85px; + width: 500px; + height: 40px; + top: 275px; + right: -71px; gap: 0px; opacity: 0px; - transform: rotate(-51.55deg); - background-color: #909090; + transform: rotate(-40deg); + background-color: #6c6c6c; } .bottomRightRec { position: absolute; - width: 490.86px; - height: 21.61px; - top: 645px; - right: -85px; + width: 600px; + height: 40px; + top: 646.5px; + right: -115px; gap: 0px; opacity: 0px; - transform: rotate(-130deg); - background-color: #909090; + transform: rotate(-135deg); + background-color: #6c6c6c; } From d0e09c66ef99825520afee7558a4a13758c0a085 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Mon, 3 Jun 2024 18:39:53 -0700 Subject: [PATCH 5/6] removed page from index element --- frontend/src/App.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cf769b8..2a91cc5 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -27,8 +27,7 @@ function App() {
}> - {/* } /> */} - } /> + } /> } /> } /> } /> From 1ee20571788b90241e10fd719a5df13a026696b5 Mon Sep 17 00:00:00 2001 From: Jared Rosas Date: Tue, 4 Jun 2024 14:46:15 -0700 Subject: [PATCH 6/6] lint fix + removed unneccesary div --- frontend/src/pages/RedirectTo404.tsx | 12 +++++------- frontend/src/stylesheets/RedirectTo404.module.css | 14 ++++++++++---- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/frontend/src/pages/RedirectTo404.tsx b/frontend/src/pages/RedirectTo404.tsx index b5d9e6d..1be9015 100644 --- a/frontend/src/pages/RedirectTo404.tsx +++ b/frontend/src/pages/RedirectTo404.tsx @@ -1,5 +1,5 @@ -import styles from "../stylesheets/RedirectTo404.module.css"; import { Page } from "../components"; +import styles from "../stylesheets/RedirectTo404.module.css"; export function RedirectTo404() { return ( @@ -8,17 +8,15 @@ export function RedirectTo404() {

404

Page Not Found

- Sorry, we couldn't find the page you're looking for, click{" "} - - here. - {" "} + Sorry, we couldn't find the page you're looking for, click{" "} + + here. +
Please ensure that the URL is correct and try again.

- {/*
*/} -
diff --git a/frontend/src/stylesheets/RedirectTo404.module.css b/frontend/src/stylesheets/RedirectTo404.module.css index 940a21a..163efa1 100644 --- a/frontend/src/stylesheets/RedirectTo404.module.css +++ b/frontend/src/stylesheets/RedirectTo404.module.css @@ -26,6 +26,14 @@ color: var(--color-ccidc-blue); } +.leftCorner { + width: 100%; +} + +.rightCorner { + width: 100%; +} + .topLeftRec { position: absolute; width: 600px; @@ -56,10 +64,9 @@ height: 40px; top: 275px; right: -71px; - gap: 0px; - opacity: 0px; transform: rotate(-40deg); background-color: #6c6c6c; + overflow: hidden; } .bottomRightRec { @@ -68,8 +75,7 @@ height: 40px; top: 646.5px; right: -115px; - gap: 0px; - opacity: 0px; transform: rotate(-135deg); background-color: #6c6c6c; + overflow: hidden; }