From ff958051e4e5d05aed4407f3386427f2f90ac2bd Mon Sep 17 00:00:00 2001 From: Newton Chung Date: Tue, 28 Apr 2026 14:36:39 -0700 Subject: [PATCH 1/5] Updated React Dependency Versions This stops a 'Conflicting Peer Dependency' error from occurring when you run npm install while react is currently below 18.3.1 --- package-lock.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2deb6d09..18625c56d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,9 +14,9 @@ "json-server": "0.17.1", "next": "^15.5.12", "next-auth": "4.24.5", - "react": "^18.2.0", + "react": "^18.3.1", "react-data-table-component": "7.5.3", - "react-dom": "^18.2.0", + "react-dom": "^18.3.1", "react-multi-select-component": "4.3.4", "react-table": "^7.8.0", "react-tabs": "4.3.0", diff --git a/package.json b/package.json index b475a58b8..a1637107d 100644 --- a/package.json +++ b/package.json @@ -37,9 +37,9 @@ "json-server": "0.17.1", "next": "^15.5.12", "next-auth": "4.24.5", - "react": "^18.2.0", + "react": "^18.3.1", "react-data-table-component": "7.5.3", - "react-dom": "^18.2.0", + "react-dom": "^18.3.1", "react-multi-select-component": "4.3.4", "react-table": "^7.8.0", "react-tabs": "4.3.0", From b6c3a3f87145ede4db6c4ffe7687b69c5e4f417c Mon Sep 17 00:00:00 2001 From: Newton Ly Chung Date: Sat, 13 Jun 2026 12:21:09 -0700 Subject: [PATCH 2/5] style: align globals.css with main freeCodeCamp platform --- styles/globals.css | 37 ++++++++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/styles/globals.css b/styles/globals.css index e8e93627b..50de5dd87 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -3,36 +3,49 @@ @tailwind utilities; :root { - /* Colors */ - /* Light Gray */ + /* Colors */ + /* Light Gray */ --fcc-gray-00: #ffffff; --fcc-gray-05: #f5f6f7; --fcc-gray-10: #dfdfe2; --fcc-gray-15: #d0d0d5; - /* Dark Gray */ - --fcc-gray-80: #2a2a40; + --fcc-gray-45: #858591; + /* Dark Gray */ --fcc-gray-75: #3b3b4f; + --fcc-gray-80: #2a2a40; --fcc-gray-85: #1b1b32; --fcc-gray-90: #0a0a23; - /* Primary Colors */ + /* Semantic alias (matches --theme-color on main fCC platform) */ + --theme-color: #0a0a23; + + /* Primary Colors */ --fcc-primary-purple: #dbb8ff; - --fcc-primary-yellow: #f1be32; + --fcc-primary-yellow: #ffbf00; --fcc-primary-blue: #99c9ff; --fcc-primary-lightGreen: #acd157; - /* Secondary Colors */ + /* Secondary / Dark Colors */ --fcc-secondary-darkPurple: #5a01a7; --fcc-secondary-darkYellow: #4d3800; --fcc-secondary-darkBlue: #002ead; --fcc-secondary-darkGreen: #00471b; + + /* Mid Colors */ + --fcc-blue-mid: #198eee; + --fcc-purple-mid: #9400d3; + + /* Red */ + --fcc-red-light: #ffadad; + --fcc-red-dark: #850000; } html, body { padding: 0; margin: 0; - font-family: 'Roboto Mono', monospace; + font-family: 'Lato', sans-serif; + font-size: 18px; } a { @@ -44,9 +57,15 @@ a { box-sizing: border-box; } +.btn { + border-radius: 0; + border: 3px solid var(--fcc-gray-90); + font-size: 18px; +} + .toast-message { background: var(--fcc-gray-90); color: var(--fcc-gray-00); font-size: 20px; - --toastify-font-family: 'Roboto Mono', monospace; + --toastify-font-family: 'Lato', sans-serif; } From 704401407e1ec8f0bbd290b0dace4f62399c750a Mon Sep 17 00:00:00 2001 From: Newton Ly Chung Date: Sat, 13 Jun 2026 12:21:44 -0700 Subject: [PATCH 3/5] style: align tailwind color tokens with main freeCodeCamp platform --- tailwind.config.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 0ef18f55a..9f07a798e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,6 +29,7 @@ module.exports = { 0o5: '#f5f6f7', 10: '#dfdfe2', 15: '#d0d0d5', + 45: '#858591', // DARK GRAYs 75: '#3b3b4f', 80: '#2a2a40', @@ -38,7 +39,7 @@ module.exports = { primary: { purple: '#dbb8ff', - yellow: '#f1be32', + yellow: '#ffbf00', blue: '#99c9ff', lightGreen: '#acd157' }, @@ -48,6 +49,16 @@ module.exports = { darkYellow: '#4d3800', darkBlue: '#002ead', darkGreen: '#00471b' + }, + + mid: { + blue: '#198eee', + purple: '#9400d3' + }, + + red: { + light: '#ffadad', + dark: '#850000' } }, ...colors From 761e1070dec8f22b3edff312dfc0268f83a6a4bb Mon Sep 17 00:00:00 2001 From: Newton Chung Date: Sun, 14 Jun 2026 18:28:12 -0700 Subject: [PATCH 4/5] Synchronized Classroom CSS with FCC Proper Created a navButton class for navigation button instances Added responsive design to make web app more mobile-friendly --- components/modal.js | 2 +- components/navbar.js | 2 +- pages/admin/index.js | 4 +- pages/classes/index.js | 4 +- pages/dashboard/[id].js | 4 +- pages/dashboard/v2/[id].js | 4 +- .../v2/details/[id]/[studentEmail].js | 6 +-- pages/index.js | 10 ++--- styles/Home.module.css | 1 + styles/globals.css | 43 +++---------------- 10 files changed, 24 insertions(+), 56 deletions(-) diff --git a/components/modal.js b/components/modal.js index 97238a3af..de8c12021 100644 --- a/components/modal.js +++ b/components/modal.js @@ -71,7 +71,7 @@ export default function Modal({
Create Class diff --git a/components/navbar.js b/components/navbar.js index 9d4c44adb..0f4cea554 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -6,7 +6,7 @@ import AuthButton from '../components/authButton'; export default function Navbar({ children }) { return (
-
+
-
+
Classes
-
+
Menu
diff --git a/pages/classes/index.js b/pages/classes/index.js index 598f38d68..88bf2c996 100644 --- a/pages/classes/index.js +++ b/pages/classes/index.js @@ -116,10 +116,10 @@ export default function Classes({ {userSession && ( <> -
+
Classes
-
+
Menu
diff --git a/pages/dashboard/[id].js b/pages/dashboard/[id].js index 95e003192..87f5e4678 100644 --- a/pages/dashboard/[id].js +++ b/pages/dashboard/[id].js @@ -91,10 +91,10 @@ export default function Home({ {userSession && ( <> -
+
Classes
-
+
Menu
diff --git a/pages/dashboard/v2/[id].js b/pages/dashboard/v2/[id].js index 0de21d81b..3d52eb04e 100644 --- a/pages/dashboard/v2/[id].js +++ b/pages/dashboard/v2/[id].js @@ -123,10 +123,10 @@ export default function Home({ {userSession && ( <> -
+
Classes
-
+
Menu
diff --git a/pages/dashboard/v2/details/[id]/[studentEmail].js b/pages/dashboard/v2/details/[id]/[studentEmail].js index 3ff38d353..6f737aa58 100644 --- a/pages/dashboard/v2/details/[id]/[studentEmail].js +++ b/pages/dashboard/v2/details/[id]/[studentEmail].js @@ -113,13 +113,13 @@ export default function StudentDetails({ {userSession && ( <> -
+
<
-
+
Classes
-
+
Menu
diff --git a/pages/index.js b/pages/index.js index 20d336074..21e64e1c6 100644 --- a/pages/index.js +++ b/pages/index.js @@ -13,22 +13,22 @@ export default function Home() { -
+
Classes
-
+
Menu
-

+

Welcome to FreeCodeCamp Classroom Mode

-
+

A self-hosted solution to help teachers plan and manage diff --git a/styles/Home.module.css b/styles/Home.module.css index 69dd3d1db..281bb08f9 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -131,4 +131,5 @@ display: flex; align-items: center; justify-content: center; + margin-top: 2rem; } diff --git a/styles/globals.css b/styles/globals.css index 50de5dd87..abb6289c7 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -3,41 +3,8 @@ @tailwind utilities; :root { - /* Colors */ - /* Light Gray */ --fcc-gray-00: #ffffff; - --fcc-gray-05: #f5f6f7; - --fcc-gray-10: #dfdfe2; - --fcc-gray-15: #d0d0d5; - --fcc-gray-45: #858591; - /* Dark Gray */ - --fcc-gray-75: #3b3b4f; - --fcc-gray-80: #2a2a40; - --fcc-gray-85: #1b1b32; --fcc-gray-90: #0a0a23; - - /* Semantic alias (matches --theme-color on main fCC platform) */ - --theme-color: #0a0a23; - - /* Primary Colors */ - --fcc-primary-purple: #dbb8ff; - --fcc-primary-yellow: #ffbf00; - --fcc-primary-blue: #99c9ff; - --fcc-primary-lightGreen: #acd157; - - /* Secondary / Dark Colors */ - --fcc-secondary-darkPurple: #5a01a7; - --fcc-secondary-darkYellow: #4d3800; - --fcc-secondary-darkBlue: #002ead; - --fcc-secondary-darkGreen: #00471b; - - /* Mid Colors */ - --fcc-blue-mid: #198eee; - --fcc-purple-mid: #9400d3; - - /* Red */ - --fcc-red-light: #ffadad; - --fcc-red-dark: #850000; } html, @@ -45,7 +12,7 @@ body { padding: 0; margin: 0; font-family: 'Lato', sans-serif; - font-size: 18px; + font-size: clamp(18px, 1.5vw, 21.0625px); } a { @@ -57,10 +24,10 @@ a { box-sizing: border-box; } -.btn { - border-radius: 0; - border: 3px solid var(--fcc-gray-90); - font-size: 18px; +.navButton { + border: 1px solid; + padding-left: 1rem; + padding-right: 1rem; } .toast-message { From 3c21a1ebc914b0800d89d7108bdba9ae80145b70 Mon Sep 17 00:00:00 2001 From: Newton Chung Date: Tue, 16 Jun 2026 14:28:50 -0700 Subject: [PATCH 5/5] Updated Test and Snapshots --- __tests__/components/__snapshots__/error.test.jsx.snap | 2 +- __tests__/components/__snapshots__/modal.test.jsx.snap | 4 ++-- __tests__/components/__snapshots__/navbar.test.jsx.snap | 2 +- __tests__/components/modal.test.jsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/__tests__/components/__snapshots__/error.test.jsx.snap b/__tests__/components/__snapshots__/error.test.jsx.snap index e804bff57..9c62f9ae0 100644 --- a/__tests__/components/__snapshots__/error.test.jsx.snap +++ b/__tests__/components/__snapshots__/error.test.jsx.snap @@ -6,7 +6,7 @@ exports[`ErrorComponet displays error cause and error message properly 1`] = ` className="h-[38px]" >
Create Class @@ -31,7 +31,7 @@ exports[`Modal Component renders whole form after header clicked 1`] = ` className="flex justify-center" >
Create Class diff --git a/__tests__/components/__snapshots__/navbar.test.jsx.snap b/__tests__/components/__snapshots__/navbar.test.jsx.snap index c583d7f59..cc17d97d0 100644 --- a/__tests__/components/__snapshots__/navbar.test.jsx.snap +++ b/__tests__/components/__snapshots__/navbar.test.jsx.snap @@ -5,7 +5,7 @@ exports[`Navbar rendering correctly renders correctly 1`] = ` className="h-[38px]" >
{ it('renders header correctly', () => {