From 5715417d4581a3e1fb2f517fe2eea1cba0a5d2b8 Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 18 Feb 2026 22:44:00 -0800 Subject: [PATCH 1/9] refactor(Frontend): Update CSS rbg values to use CSS variables --- frontend/src/styles/home-page.css | 18 +++++++++--------- .../specific-component/resume-template.css | 2 +- frontend/src/styles/styles.css | 6 +++++- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index ea11542..dd398a8 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -39,7 +39,7 @@ #how-it-works-method-section { display: inline; - color: skyblue; + color: var(--main-accent-color); } #how-it-works-title{ @@ -52,7 +52,7 @@ flex-direction:column; justify-content: center; align-items: center; - color: skyblue; + color: var(--main-accent-color); } #whole-box { @@ -64,7 +64,7 @@ width: 100%; max-width: 1200px; margin: 0 auto; - background-color: whitesmoke; + background-color: var(--tinted-bg-color); } .steps-box { @@ -78,18 +78,18 @@ border-radius: 15px; border: 3px; border-style:dashed; - border-color: skyblue; + border-color: var(--main-accent-color); text-align: left; - background-color: #dbdbdb; + background-color: var(--tinted-card-bg); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; will-change: transform; } .steps-box:hover { - transform: translateY(-10px); /* Lifts the box up */ - background-color: #eef8ff; /* Shifts to a very light blue on hover */ - box-shadow: 0 10px 20px rgb(0 0 0 / 15%); /* Adds a soft shadow */ - cursor: pointer; /* Shows the user it's interactive */ + transform: translateY(-10px); + background-color: var(--tinted-card-bg-hover); + box-shadow: 0 10px 20px var(--tinted-card-shadowcolor-hover); + cursor: pointer; } /* Reviews Area */ diff --git a/frontend/src/styles/specific-component/resume-template.css b/frontend/src/styles/specific-component/resume-template.css index 871b9f1..dfa302a 100644 --- a/frontend/src/styles/specific-component/resume-template.css +++ b/frontend/src/styles/specific-component/resume-template.css @@ -12,7 +12,7 @@ min-height: 11in; padding: 0.7in 0.75in; background: var(--true-bg-color); - box-shadow: 0 0 10px rgb(0 0 0 / 15%); + box-shadow: 0 0 10px var(--tinted-card-shadowcolor-hover); font-family: "Times New Roman", Times, serif; font-size: 11pt; line-height: 1.25; diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 11e8eca..20798c6 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -3,10 +3,14 @@ /* Default Light Mode Also sets html, body, and root defaults & standardized stylings */ :root { + --true-bg-color: white; --tinted-bg-color: whitesmoke; --text-color: black; --card-bg: white; - --true-bg-color: white; + --card-bg-hover: whitesmoke; + --tinted-card-bg: lightgray; + --tinted-card-bg-hover: lightgray; + --tinted-card-shadowcolor-hover: rgb(0 0 0 / 15%); --main-accent-color: skyblue; --main-accent-color-activte: rgb(125 196 225); --box-border-color: lightgray; From 75236dfe37c7cb76f2fb82255e0f376073bb2368 Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 18 Feb 2026 22:52:51 -0800 Subject: [PATCH 2/9] refactor(frontend): Seperate the home-page and resume-template css files --- frontend/src/styles/form-page.css | 34 +++++++++++++++++- .../specific-component/resume-template.css | 35 ++----------------- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index 6aee37f..573ee1a 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -32,6 +32,13 @@ color: var(--text-color); } +/* Line to break up sub-sections */ +.resume-hr-between-sections { + border: none; + border-top: 2px solid skyblue; + margin: 1.5rem 0; +} + /* Reusable card */ .card { display: flex; @@ -88,6 +95,28 @@ textarea:focus { box-shadow: 0 0 0 10px var(--input-box-shadow-color); } +/* Buttons that add a new section */ +.add-section-form-button { + display: flex; + justify-content: center; + align-self: center; + text-align: center; + margin-top: 1.5rem; + padding: 1rem; + width: 35%; + font-size: 1.5rem; + border: none; + border-radius: 10px; + cursor: pointer; + background-color: var(--main-accent-color); + color: var(--text-color); +} + + .add-section-form-button:active { + transform: scale(0.95); + background-color: var(--main-accent-color-activte); + } + /* Submit button */ button[type="submit"] { margin-top: 2.5rem; @@ -104,4 +133,7 @@ button[type="submit"] { button[type="submit"]:active { transform: scale(0.97); background-color: var(--main-accent-color-activte); -} \ No newline at end of file +} + + + diff --git a/frontend/src/styles/specific-component/resume-template.css b/frontend/src/styles/specific-component/resume-template.css index dfa302a..3536c79 100644 --- a/frontend/src/styles/specific-component/resume-template.css +++ b/frontend/src/styles/specific-component/resume-template.css @@ -11,12 +11,12 @@ width: 8.5in; min-height: 11in; padding: 0.7in 0.75in; - background: var(--true-bg-color); - box-shadow: 0 0 10px var(--tinted-card-shadowcolor-hover); + background: white; + box-shadow: 0 0 10px rgb(0 0 0 / 15%); font-family: "Times New Roman", Times, serif; font-size: 11pt; line-height: 1.25; - color: var(--text-color); + color: black; } @@ -75,35 +75,6 @@ section { margin-top: 1px; } -/* Line to break up sub-sections */ -.resume-hr-between-sections { - border: none; - border-top: 2px solid skyblue; - margin: 1.5rem 0; -} - -/* Buttons that add a new section */ -.add-section-form-button { - display: flex; - justify-content: center; - align-self: center; - text-align: center; - margin-top: 1.5rem; - padding: 1rem; - width: 35%; - font-size: 1.5rem; - border: none; - border-radius: 10px; - cursor: pointer; - background-color: skyblue; - color: black; -} - - .add-section-form-button:active { - transform: scale(0.95); - background-color: var(--main-accent-color-activte); - } - /* Italics for positions / majors */ .row.sub em { font-style: italic; From 232f459fefe5a62d9e98e5228023adf0befee955 Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 18 Feb 2026 23:34:19 -0800 Subject: [PATCH 3/9] refactor(Frontend): Update NavBar to be better aligned --- frontend/src/components/NavBar.jsx | 12 ++++-- frontend/src/styles/styles.css | 69 ++++++++++++++++++++---------- 2 files changed, 55 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index 59fa6ae..c4175f8 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -51,10 +51,16 @@ function NavBar() { -
- - +
+
+ + +
+
+ +
+ ); } diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 20798c6..6d22ee6 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -32,12 +32,25 @@ Also sets html, body, and root defaults & standardized stylings */ background-color: var(--tinted-bg-color); } -/* Dark Mode(WIP) +/* Dark Mode(WIP) */ [data-theme="dark"] { - --tinted-bg-color: red; - --text-color: red; - --card-bg: red; -} */ + --true-bg-color: #121212; + --tinted-bg-color: #1e1e1e; + --text-color: #ffffff; + --card-bg: #1f1f1f; + --card-bg-hover: #2a2a2a; + --tinted-card-bg: #2a2a2a; + --tinted-card-bg-hover: #333; + --tinted-card-shadowcolor-hover: rgb(0 0 0 / 40%); + --main-accent-color: #4ea8ff; + --main-accent-color-activte: #3c8ed6; + --box-border-color: #333; + --review-area-main-color: #2a2a2a; + --input-bg-color: #2a2a2a; + --input-border-color: #444; + --input-focus-border-color: #4ea8ff; + --input-box-shadow-color: rgb(78 168 255 / 35%); +} * { @@ -55,37 +68,30 @@ html, body, #root { /* Navigation bar area */ nav { - display: flex; - flex-direction: row; - justify-content: space-around; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; height: 5rem; - margin: 0; - padding: 0; + padding: 0 2rem; background-color: var(--tinted-bg-color); - color: black; - border-bottom: solid 2px skyblue; + border-bottom: solid 2px var(--main-accent-color); } /* Navigation bar sub areas */ #nav-bar h2 { - font-size: 3rem; - background-color: var(--tinted-bg-color); + justify-self: start; + font-size: 2rem; } #nav-bar-links { display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: center; - width: 48rem; - list-style-type: none; + gap: 2.5rem; + list-style: none; margin: 0; padding: 0; - gap: 40px; - font-size: 1.5rem; - background-color: var(--tinted-bg-color); + justify-self: center; + font-size: 1.3rem; } #nav-bar-links li a { @@ -98,6 +104,13 @@ nav { border-bottom: 3px solid var(--main-accent-color); } + #log-in-sign-up-lightdark-toggle { + display: flex; + align-items: center; + gap: 2rem; + justify-self: end; + } + #log-in-sign-up { font-size: 1.25rem; width: 12rem; @@ -113,7 +126,7 @@ nav { #log-in-sign-up button { all: unset; width: 80%; - height: 60%; + height: 80%; border-radius: 4px; cursor: pointer; text-align: center; @@ -125,6 +138,16 @@ nav { background-color: var(--main-accent-color-activte); } + #light-dark-toggle { + all: unset; + width: 80%; + height: 60%; + border-radius: 4px; + cursor: pointer; + text-align: center; + background-color: var(--main-accent-color); + } + /* The Method Accent Color */ .method-word { color: var(--main-accent-color); From d30920a0854ead107c094843b21b03b26d42c99f Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 18 Feb 2026 23:58:19 -0800 Subject: [PATCH 4/9] refactor(Frontend): Update NavBar buttons to be bigger and algined --- frontend/src/styles/styles.css | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 6d22ee6..19b1d80 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -112,25 +112,22 @@ nav { } #log-in-sign-up { - font-size: 1.25rem; - width: 12rem; - height: 100%; display: flex; - justify-content: space-around; align-items: center; - flex-direction: row; - gap: 8px; - background-color: var(--tinted-bg-color); + gap: 1rem; + font-size: 1.1rem; } #log-in-sign-up button { all: unset; - width: 80%; - height: 80%; - border-radius: 4px; + padding: 0.6rem 1.4rem; /* controls size */ + font-size: 1rem; + border-radius: 6px; /* small rounding = rectangle */ cursor: pointer; text-align: center; background-color: var(--main-accent-color); + color: var(--text-color); + display: inline-block; } #log-in-sign-up button:active { @@ -138,14 +135,16 @@ nav { background-color: var(--main-accent-color-activte); } + #light-dark-toggle { all: unset; - width: 80%; - height: 60%; - border-radius: 4px; + padding: 0.6rem 1.4rem; + font-size: 1rem; + border-radius: 6px; cursor: pointer; - text-align: center; background-color: var(--main-accent-color); + color: var(--text-color); + display: inline-block; } /* The Method Accent Color */ From c8a8d997e14574f26a77ff04fae9fdbcfd32434d Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 19 Feb 2026 00:11:53 -0800 Subject: [PATCH 5/9] refactor(Frontend): Center the NavBar elements --- frontend/src/components/NavBar.jsx | 4 ++-- frontend/src/styles/styles.css | 15 +++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index c4175f8..79a4065 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -56,8 +56,8 @@ function NavBar() {
-
- +
+
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 19b1d80..7e75605 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -82,6 +82,7 @@ nav { #nav-bar h2 { justify-self: start; font-size: 2rem; + margin: 0; } #nav-bar-links { @@ -120,9 +121,9 @@ nav { #log-in-sign-up button { all: unset; - padding: 0.6rem 1.4rem; /* controls size */ + padding: 0.6rem 2rem; font-size: 1rem; - border-radius: 6px; /* small rounding = rectangle */ + border-radius: 6px; cursor: pointer; text-align: center; background-color: var(--main-accent-color); @@ -135,10 +136,16 @@ nav { background-color: var(--main-accent-color-activte); } - #light-dark-toggle { + display: flex; + align-items: center; + gap: 1rem; + font-size: 1.1rem; + } + + #light-dark-toggle button { all: unset; - padding: 0.6rem 1.4rem; + padding: 0.6rem 1.2rem; font-size: 1rem; border-radius: 6px; cursor: pointer; From f6cd5213b348b0ee0b5fa2437956cce9f0189999 Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 19 Feb 2026 00:42:13 -0800 Subject: [PATCH 6/9] feat/refactor(Frontend): Add light/dark theme toggle & organize jsx This adds a light/dark theme toggle to the application, allowing users to switch between themes. The NavBar component is now included in the App.jsx file, ensuring it is displayed across all pages. Additionally, the JSX structure of the pages has been organized for better readability and maintainability. --- frontend/src/App.jsx | 19 +++++++++++++++++++ frontend/src/components/Footer.jsx | 4 ++-- frontend/src/components/Form.jsx | 4 ++-- frontend/src/components/NavBar.jsx | 8 +++++--- frontend/src/components/Reviews.jsx | 18 +++++++++--------- frontend/src/pages/AboutPage.jsx | 1 - frontend/src/pages/ContactPage.jsx | 1 - frontend/src/pages/DashboardPage.jsx | 1 - frontend/src/pages/FormPage.jsx | 1 - frontend/src/pages/HomePage.jsx | 1 - frontend/src/styles/styles.css | 2 +- 11 files changed, 38 insertions(+), 22 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 0087295..37b2228 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,4 +1,7 @@ import { Routes, Route } from 'react-router-dom' +import { useState, useEffect } from 'react'; + +import NavBar from './components/NavBar'; import HomePage from './pages/HomePage'; import FormPage from './pages/FormPage'; @@ -17,8 +20,24 @@ import './styles/specific-component/resume-template.css' // Defines what Page Component appears for each of the 5 webpages // based on the current path function App() { + const [theme, setTheme] = useState(() => { + return localStorage.getItem("theme") || "light"; + }); + + // Apply theme to + useEffect(() => { + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); + }, [theme]); + + const toggleTheme = () => { + setTheme(prev => prev === "light" ? "dark" : "light"); + }; + return (
+ + } /> } /> diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index 14ffab0..31eddc1 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -3,7 +3,7 @@ function Footer() {
) diff --git a/frontend/src/components/Form.jsx b/frontend/src/components/Form.jsx index b621270..5f3c29b 100644 --- a/frontend/src/components/Form.jsx +++ b/frontend/src/components/Form.jsx @@ -347,7 +347,7 @@ function Form() { {resume.experience.map((exp, index) => (
-

Experience #{index + 1}

+

Experience #{index + 1}

-
+
))} diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index 79a4065..09503fe 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -1,10 +1,10 @@ import { NavLink } from 'react-router-dom' -function NavBar() { +function NavBar({ toggleTheme, theme }) { return (
- +
diff --git a/frontend/src/components/Reviews.jsx b/frontend/src/components/Reviews.jsx index 3b7b954..3549a18 100644 --- a/frontend/src/components/Reviews.jsx +++ b/frontend/src/components/Reviews.jsx @@ -56,38 +56,38 @@ function Reviews() {
-

+

"I love this website so much! The Method helped me land a SWE intern position at my dream company!"

-

-Sean S.

-

SWE Intern at XYZ

+

-Sean S.

+

SWE Intern at XYZ

-

+

"I just got into FANNG, I am so glad that The Method exists. It has truly been an amazing tool for my job search."

-

-Lien J.

-

20x Engineer at Google

+

-Lien J.

+

20x Engineer at Google

-

+

"One of the best job prep websites out there. I cant believe this is free."

-

-Ved P.

-

Founder of tech startup

+

-Ved P.

+

Founder of tech startup

diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index 0ae5f84..c82befa 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -3,7 +3,6 @@ import NavBar from "../components/NavBar"; function AboutPage() { return (
-
); } diff --git a/frontend/src/pages/ContactPage.jsx b/frontend/src/pages/ContactPage.jsx index eb48e29..6f3c654 100644 --- a/frontend/src/pages/ContactPage.jsx +++ b/frontend/src/pages/ContactPage.jsx @@ -3,7 +3,6 @@ import NavBar from "../components/NavBar"; function ContactPage() { return (
-
); } diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx index 26741b3..43af1b9 100644 --- a/frontend/src/pages/DashboardPage.jsx +++ b/frontend/src/pages/DashboardPage.jsx @@ -4,7 +4,6 @@ import FileUpload from "../components/FileUpload"; function DashboardPage() { return (
-
); diff --git a/frontend/src/pages/FormPage.jsx b/frontend/src/pages/FormPage.jsx index df472f7..afa9362 100644 --- a/frontend/src/pages/FormPage.jsx +++ b/frontend/src/pages/FormPage.jsx @@ -4,7 +4,6 @@ import Form from "../components/Form"; function FormPage() { return (
-
); diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index b458995..1e12c3a 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -7,7 +7,6 @@ import HowItWorks from "../components/HowItWorks"; function HomePage() { return (
- diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 7e75605..5e4d7d1 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -97,7 +97,7 @@ nav { #nav-bar-links li a { text-decoration: none; - color: black; + color: var(--text-color); } #nav-bar-links li a.active-link { From ee92e2dcd57f273538889574cc3ebd357ecf0791 Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 19 Feb 2026 00:53:31 -0800 Subject: [PATCH 7/9] refactor(Frontend): Adjust light mode colors and add comments The comments break up the CSS varaibles into sections so it is more clear what each variable is for. --- frontend/src/components/Reviews.jsx | 2 +- frontend/src/styles/home-page.css | 4 +- frontend/src/styles/styles.css | 68 ++++++++++++++++++++--------- 3 files changed, 50 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/Reviews.jsx b/frontend/src/components/Reviews.jsx index 3549a18..db31fea 100644 --- a/frontend/src/components/Reviews.jsx +++ b/frontend/src/components/Reviews.jsx @@ -23,7 +23,7 @@ function Star({ fillPercent = 100, size = 40 }) { {/* Filled star */} diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index dd398a8..e0af139 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -52,7 +52,7 @@ flex-direction:column; justify-content: center; align-items: center; - color: var(--main-accent-color); + color: var(--text-color); } #whole-box { @@ -77,7 +77,7 @@ padding: 30px; border-radius: 15px; border: 3px; - border-style:dashed; + border-style: solid; border-color: var(--main-accent-color); text-align: left; background-color: var(--tinted-card-bg); diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 5e4d7d1..002b54f 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -1,25 +1,37 @@ -/* website colors(only put colors that are broad/apart of the theme here) */ - -/* Default Light Mode -Also sets html, body, and root defaults & standardized stylings */ +/* Light Mode & Dark Mode colors variables. + Also sets html, body, and root defaults & standardized stylings. */ :root { - --true-bg-color: white; - --tinted-bg-color: whitesmoke; - --text-color: black; - --card-bg: white; - --card-bg-hover: whitesmoke; - --tinted-card-bg: lightgray; - --tinted-card-bg-hover: lightgray; - --tinted-card-shadowcolor-hover: rgb(0 0 0 / 15%); - --main-accent-color: skyblue; - --main-accent-color-activte: rgb(125 196 225); - --box-border-color: lightgray; - --review-area-main-color: rgb(222 222 222); - --input-bg-color: lightgray; - --input-border-color: #ccc; - --input-focus-border-color: skyblue; - --input-box-shadow-color: rgb(135 206 235 / 35%); + /* Backgrounds */ + --true-bg-color: #ffffff; + --tinted-bg-color: #f7f8fa; + + /* Text */ + --text-color: #1e1e1e; + + /* Cards */ + --card-bg: #ffffff; + --card-bg-hover: #f0f3f7; + --tinted-card-bg: #f4f6f8; + --tinted-card-bg-hover: #e8ebf0; + --tinted-card-shadowcolor-hover: rgba(0, 0, 0, 0.1); + + /* Accent colors */ + --main-accent-color: #4aa5ff; + --main-accent-color-activte: #3390e6; + + /* Borders */ + --box-border-color: #d1d5db; + + /* Review/secondary areas */ + --review-area-main-color: #e2e8f0; + + /* Inputs */ + --input-bg-color: #f2f4f7; + --input-border-color: #cbd5e1; + --input-focus-border-color: #4aa5ff; + --input-box-shadow-color: rgba(74, 165, 255, 0.25); + /* Styling */ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; @@ -34,29 +46,43 @@ Also sets html, body, and root defaults & standardized stylings */ /* Dark Mode(WIP) */ [data-theme="dark"] { + /* Backgrounds */ --true-bg-color: #121212; --tinted-bg-color: #1e1e1e; + + /* Text */ --text-color: #ffffff; + + /* Cards */ --card-bg: #1f1f1f; --card-bg-hover: #2a2a2a; --tinted-card-bg: #2a2a2a; --tinted-card-bg-hover: #333; --tinted-card-shadowcolor-hover: rgb(0 0 0 / 40%); + + /* Accent colors */ --main-accent-color: #4ea8ff; --main-accent-color-activte: #3c8ed6; + + /* Borders */ --box-border-color: #333; + + /* Review/secondary areas */ --review-area-main-color: #2a2a2a; + + /* Inputs */ --input-bg-color: #2a2a2a; --input-border-color: #444; --input-focus-border-color: #4ea8ff; --input-box-shadow-color: rgb(78 168 255 / 35%); } - +/* Global stylings */ * { box-sizing: border-box; } +/* More global stylings */ html, body, #root { min-width: 100%; min-height: 100%; From 5d0747c0a5bdbe3e8240e77b42668c4f53dec98b Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 19 Feb 2026 01:05:48 -0800 Subject: [PATCH 8/9] refactor(Frontend): Add more CSS selectors & update CSS variable name This adds more CSS selectors to home-page.css. It also updates the CSS varaible name that is tied to tinted backgrounds for the sections on the home page. --- frontend/src/components/HowItWorks.jsx | 2 +- frontend/src/styles/home-page.css | 6 +++++- frontend/src/styles/styles.css | 5 ++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/HowItWorks.jsx b/frontend/src/components/HowItWorks.jsx index a93f950..70110c2 100644 --- a/frontend/src/components/HowItWorks.jsx +++ b/frontend/src/components/HowItWorks.jsx @@ -1,6 +1,6 @@ function HowItWorks() { return ( -
+

How The Method Works

diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index e0af139..b5f21b4 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -37,6 +37,10 @@ background-color: var(--main-accent-color-activte); } +#how-it-works { + background-color: var(--tinted-bg-color); +} + #how-it-works-method-section { display: inline; color: var(--main-accent-color); @@ -99,7 +103,7 @@ justify-content: center; align-items: center; height: 48rem; - background-color: var(--review-area-main-color); + background-color: var(--super-tinted-area-main-color); } #review-header { diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 002b54f..80483cf 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -14,6 +14,8 @@ --tinted-card-bg: #f4f6f8; --tinted-card-bg-hover: #e8ebf0; --tinted-card-shadowcolor-hover: rgba(0, 0, 0, 0.1); + --super-tinted-area-main-color: #e2e8f0; + /* Accent colors */ --main-accent-color: #4aa5ff; @@ -22,9 +24,6 @@ /* Borders */ --box-border-color: #d1d5db; - /* Review/secondary areas */ - --review-area-main-color: #e2e8f0; - /* Inputs */ --input-bg-color: #f2f4f7; --input-border-color: #cbd5e1; From 6d4e5e88da790c6c5777e1d7aa333eb5b3de501d Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 19 Feb 2026 01:17:01 -0800 Subject: [PATCH 9/9] fix(Frotend): Update CSS so it passes stylelint --- frontend/src/styles/styles.css | 44 +++++++++++++++++----------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 80483cf..c820158 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -2,18 +2,18 @@ Also sets html, body, and root defaults & standardized stylings. */ :root { /* Backgrounds */ - --true-bg-color: #ffffff; + --true-bg-color: #fff; --tinted-bg-color: #f7f8fa; /* Text */ --text-color: #1e1e1e; /* Cards */ - --card-bg: #ffffff; + --card-bg: #fff; --card-bg-hover: #f0f3f7; --tinted-card-bg: #f4f6f8; --tinted-card-bg-hover: #e8ebf0; - --tinted-card-shadowcolor-hover: rgba(0, 0, 0, 0.1); + --tinted-card-shadowcolor-hover: rgb(0 0 0 / 10%); --super-tinted-area-main-color: #e2e8f0; @@ -28,7 +28,7 @@ --input-bg-color: #f2f4f7; --input-border-color: #cbd5e1; --input-focus-border-color: #4aa5ff; - --input-box-shadow-color: rgba(74, 165, 255, 0.25); + --input-box-shadow-color: rgb(74 165 255 / 25%); /* Styling */ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; @@ -50,7 +50,7 @@ --tinted-bg-color: #1e1e1e; /* Text */ - --text-color: #ffffff; + --text-color: #fff; /* Cards */ --card-bg: #1f1f1f; @@ -144,23 +144,6 @@ nav { font-size: 1.1rem; } - #log-in-sign-up button { - all: unset; - padding: 0.6rem 2rem; - font-size: 1rem; - border-radius: 6px; - cursor: pointer; - text-align: center; - background-color: var(--main-accent-color); - color: var(--text-color); - display: inline-block; - } - - #log-in-sign-up button:active { - transform: scale(0.95); - background-color: var(--main-accent-color-activte); - } - #light-dark-toggle { display: flex; align-items: center; @@ -179,6 +162,23 @@ nav { display: inline-block; } + #log-in-sign-up button { + all: unset; + padding: 0.6rem 2rem; + font-size: 1rem; + border-radius: 6px; + cursor: pointer; + text-align: center; + background-color: var(--main-accent-color); + color: var(--text-color); + display: inline-block; + } + + #log-in-sign-up button:active { + transform: scale(0.95); + background-color: var(--main-accent-color-activte); + } + /* The Method Accent Color */ .method-word { color: var(--main-accent-color);