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/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/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index 59fa6ae..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..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 */} @@ -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/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/home-page.css b/frontend/src/styles/home-page.css index ea11542..b5f21b4 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -37,9 +37,13 @@ background-color: var(--main-accent-color-activte); } +#how-it-works { + background-color: var(--tinted-bg-color); +} + #how-it-works-method-section { display: inline; - color: skyblue; + color: var(--main-accent-color); } #how-it-works-title{ @@ -52,7 +56,7 @@ flex-direction:column; justify-content: center; align-items: center; - color: skyblue; + color: var(--text-color); } #whole-box { @@ -64,7 +68,7 @@ width: 100%; max-width: 1200px; margin: 0 auto; - background-color: whitesmoke; + background-color: var(--tinted-bg-color); } .steps-box { @@ -77,19 +81,19 @@ padding: 30px; border-radius: 15px; border: 3px; - border-style:dashed; - border-color: skyblue; + border-style: solid; + 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 */ @@ -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/specific-component/resume-template.css b/frontend/src/styles/specific-component/resume-template.css index 871b9f1..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); + 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; diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 11e8eca..c820158 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -1,21 +1,36 @@ -/* 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 { - --tinted-bg-color: whitesmoke; - --text-color: black; - --card-bg: white; - --true-bg-color: white; - --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: #fff; + --tinted-bg-color: #f7f8fa; + + /* Text */ + --text-color: #1e1e1e; + + /* Cards */ + --card-bg: #fff; + --card-bg-hover: #f0f3f7; + --tinted-card-bg: #f4f6f8; + --tinted-card-bg-hover: #e8ebf0; + --tinted-card-shadowcolor-hover: rgb(0 0 0 / 10%); + --super-tinted-area-main-color: #e2e8f0; + + + /* Accent colors */ + --main-accent-color: #4aa5ff; + --main-accent-color-activte: #3390e6; + /* Borders */ + --box-border-color: #d1d5db; + + /* Inputs */ + --input-bg-color: #f2f4f7; + --input-border-color: #cbd5e1; + --input-focus-border-color: #4aa5ff; + --input-box-shadow-color: rgb(74 165 255 / 25%); + + /* Styling */ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; @@ -28,18 +43,45 @@ 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; -} */ + /* Backgrounds */ + --true-bg-color: #121212; + --tinted-bg-color: #1e1e1e; + + /* Text */ + --text-color: #fff; + + /* 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%; @@ -51,42 +93,36 @@ 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; + margin: 0; } #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 { text-decoration: none; - color: black; + color: var(--text-color); } #nav-bar-links li a.active-link { @@ -94,26 +130,48 @@ 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; - 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; + } + + #light-dark-toggle { + display: flex; + align-items: center; + gap: 1rem; + font-size: 1.1rem; + } + + #light-dark-toggle button { + all: unset; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 6px; + cursor: pointer; + background-color: var(--main-accent-color); + color: var(--text-color); + display: inline-block; } #log-in-sign-up button { all: unset; - width: 80%; - height: 60%; - border-radius: 4px; + 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 {