From 1e465429e7f9b5776e309b223c86c1b0e2f86c2d Mon Sep 17 00:00:00 2001 From: Sean San Date: Mon, 1 Jun 2026 22:57:09 -0700 Subject: [PATCH 01/13] feat: Add and style button to news page --- frontend/src/pages/NewsPage.jsx | 73 +++++++++++++-------------- frontend/src/styles/news-page.css | 83 ++++++++++++------------------- 2 files changed, 65 insertions(+), 91 deletions(-) diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx index cb0495e..4b260b7 100644 --- a/frontend/src/pages/NewsPage.jsx +++ b/frontend/src/pages/NewsPage.jsx @@ -1,3 +1,5 @@ +import { Link } from "react-router-dom"; + function News() { const updates = [ { @@ -14,49 +16,42 @@ function News() { body: "Example text of what this thing does.", date: "March 11, 2026 @ 3:00 PM", }, - { - id: "idhere2", - title: "Title goes here", - caption: "Caption would go here", - body: "Example text of what this thing does.", - date: "March 11, 2026 @ 3:00 PM", - }, - { - id: "idhere2", - title: "Title goes here", - caption: "Caption would go here", - body: "Example text of what this thing does.", - date: "March 11, 2026 @ 3:00 PM", - }, ]; return ( -
-

News

-

- Latest updates about The Method, including features, improvements, and announcements. -

+
+
+ + Back Home + + +

News

+

+ Latest updates about The Method, including features, improvements, and announcements. +

+ +
    + {updates.map((item) => ( +
  • +
    +
    +
    +

    {item.title}

    +

    {item.caption}

    +
    + +

    + +

    +
    -
      - {updates.map((item) => ( -
    • -
      -
      -
      -

      {item.title}

      -

      {item.caption}

      -
      - -

      - -

      -
      -

      {item.body}

      -
      -
      • - ))} -
    -
+

{item.body}

+ + + ))} + + + ); } diff --git a/frontend/src/styles/news-page.css b/frontend/src/styles/news-page.css index c39f13f..7e69289 100644 --- a/frontend/src/styles/news-page.css +++ b/frontend/src/styles/news-page.css @@ -1,72 +1,51 @@ -/* ...existing code... */ -.news-title { - text-align: center; - margin-bottom: 0.5rem; - color: var(--text-color); -} - -.news-intro { - text-align: center; - max-width: 65ch; - margin: 0 auto 1.5rem; - color: var(--text-color); -} - -.news-grid { - list-style: none; - padding: 0; - margin: 0; +#news-page { display: flex; flex-direction: column; - justify-content: center; align-items: center; - gap: 1rem; } -.news-grid > li { - width: 60%; - min-width: 280px; +#news-content { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 35%; + margin-top: 16px; } -.news-card { - border: 1px solid var(--box-border-color); - border-radius: 12px; - padding: 1rem; - width: 100%; - background-color: var(--tinted-card-bg); +#news-content .back-home-link { + display: inline-block; + background-color: var(--card-bg); + padding: 0.5rem 0.9rem; + border-radius: 0.5rem; color: var(--text-color); + text-decoration: none; + margin-bottom: 0.5rem; + transition: background-color 0.2s ease, transform 0.2s ease; } -.news-card:hover { - background-color: var(--card-bg-hover); -} + #news-content .back-home-link:hover { + background-color: var(--card-bg-hover); + transform: scale(0.975); + } -.news-card header { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; +.news-title, .news-intro { + color: var(--text-color); } -.news-heading h2 { +.news-title { margin: 0; - color: var(--text-color); } -.news-caption { - font-weight: 600; - color: var(--text-color); - margin: 0.25rem 0 0.5rem; +.news-intro { + margin: 0.25rem 0 1.5rem; } -.news-date { +.news-grid { + list-style: none; + padding: 0; margin: 0; - font-size: 0.875rem; - color: var(--text-color); - white-space: nowrap; - text-align: right; -} - -.news-card time { - color: var(--main-accent-color); + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; } \ No newline at end of file From 533168d51083b848b97322b0adac116485fb7b75 Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 4 Jun 2026 23:25:56 -0700 Subject: [PATCH 02/13] feat: Update resume form "Add Section" button to a circle w/ "+" icon Just a UI change. The color, position, and functionality of the "Add Section" button remain the same. The button is now a circle with a "+" icon, making it more visually appealing and intuitive for users to add new sections to their resume. --- frontend/src/components/Form.jsx | 12 ++++++------ frontend/src/styles/form-page.css | 15 +++++++++++---- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/Form.jsx b/frontend/src/components/Form.jsx index 5f3c29b..a56f95f 100644 --- a/frontend/src/components/Form.jsx +++ b/frontend/src/components/Form.jsx @@ -189,7 +189,7 @@ function Form() { }); }} > - Add Section + + @@ -319,7 +319,7 @@ function Form() { }); }} > - Add Section + + @@ -450,7 +450,7 @@ function Form() { }); }} > - Add Section + + @@ -552,7 +552,7 @@ function Form() { }); }} > - Add Section + + @@ -624,7 +624,7 @@ function Form() { }); }} > - Add Section + + @@ -697,7 +697,7 @@ function Form() { }); }} > - Add Section + + diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index 573ee1a..edd2179 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -99,17 +99,20 @@ textarea:focus { .add-section-form-button { display: flex; justify-content: center; + align-items: center; align-self: center; text-align: center; margin-top: 1.5rem; - padding: 1rem; - width: 35%; - font-size: 1.5rem; + width: 50px; + height: 50px; + font-size: 2rem; border: none; - border-radius: 10px; + border-radius: 50%; cursor: pointer; background-color: var(--main-accent-color); color: var(--text-color); + padding: 0; + transition: transform 0.2s ease, background-color 0.2s ease; } .add-section-form-button:active { @@ -117,6 +120,10 @@ textarea:focus { background-color: var(--main-accent-color-activte); } + .add-section-form-button:hover { + transform: scale(1.1); + } + /* Submit button */ button[type="submit"] { margin-top: 2.5rem; From 8195bf8ba69b190a36127a7e49c780b11b2aa5a2 Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 4 Jun 2026 23:33:26 -0700 Subject: [PATCH 03/13] style: Update the border thickness, color dividers, & spacing between input fields --- frontend/src/styles/form-page.css | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index edd2179..3d43136 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -11,6 +11,8 @@ #form-page h1 { font-size: 4.5rem; margin: 0 0 2rem; + font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + font-weight: 700; } /* Form container */ @@ -30,12 +32,15 @@ margin-top: 2rem; margin-bottom: 0.5rem; color: var(--text-color); + font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + font-weight: 600; + letter-spacing: -0.5px; } /* Line to break up sub-sections */ .resume-hr-between-sections { border: none; - border-top: 2px solid skyblue; + border-top: 2.5px solid var(--box-border-color); margin: 1.5rem 0; } @@ -43,7 +48,7 @@ .card { display: flex; flex-direction: column; - gap: 1.5rem; + gap: 1.8rem; width: 100%; padding: 1.75rem; border-radius: 10px; @@ -55,10 +60,12 @@ label { display: flex; flex-direction: column; - gap: 0.35rem; + gap: 0.2rem; font-size: 1.5rem; font-weight: 500; - color: var(--text-color) + color: var(--text-color); + font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + letter-spacing: -0.25px; } /* Inputs */ @@ -73,6 +80,8 @@ textarea { border: 1px solid var(--input-border-color); background-color: var(--input-bg-color); color: var(--text-color); + font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + letter-spacing: -0.25px; } /* Checkbox */ From 3a8345909020c9b6bc34625ed07c8feffd4314ed Mon Sep 17 00:00:00 2001 From: Sean San Date: Fri, 12 Jun 2026 21:43:03 -0700 Subject: [PATCH 04/13] feat: Add basic HTML for signing up This is just a card with the basic fields for creating an account. No functionality has been added yet, and the styling is not finished. --- frontend/src/App.jsx | 3 ++ frontend/src/pages/SignupPage.jsx | 70 +++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 frontend/src/pages/SignupPage.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index da72dec..b5e89c7 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -14,6 +14,7 @@ import TermsOfServicePage from './pages/TermsOfServicePage'; import PrivacyPolicyPage from './pages/PrivacyPolicyPage'; import FAQsPage from './pages/FAQsPage'; import LoginPage from './pages/LoginPage'; +import SignupPage from './pages/SignupPage'; import './styles/styles.css' @@ -29,6 +30,7 @@ import './styles/terms-of-service-page.css' import './styles/privacy-policy-page.css' import './styles/faq-page.css' import './styles/login-page.css' +import './styles/signup-page.css' import './styles/specific-component/resume-template.css' @@ -67,6 +69,7 @@ function App() { } /> } /> } /> + } /> ) diff --git a/frontend/src/pages/SignupPage.jsx b/frontend/src/pages/SignupPage.jsx new file mode 100644 index 0000000..f681e88 --- /dev/null +++ b/frontend/src/pages/SignupPage.jsx @@ -0,0 +1,70 @@ +function SignupPage() { + return ( +
+
+
+

Create your The Method account

+

+ Already have an account? Sign in +

+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+ ); +} + +export default SignupPage; From fb8a2252f7cc445d72ac507c35cc3f42e409e6de Mon Sep 17 00:00:00 2001 From: Sean San Date: Fri, 12 Jun 2026 21:46:40 -0700 Subject: [PATCH 05/13] feat: Position the input fields for the sign up page --- frontend/src/styles/signup-page.css | 46 +++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 frontend/src/styles/signup-page.css diff --git a/frontend/src/styles/signup-page.css b/frontend/src/styles/signup-page.css new file mode 100644 index 0000000..bdb1fd3 --- /dev/null +++ b/frontend/src/styles/signup-page.css @@ -0,0 +1,46 @@ +/* Signup page styles — match login-page layout */ +#signup-page { + display: flex; + justify-content: center; + align-items: center; + padding: 3rem 1rem; +} + +#signup-card { + width: 420px; + max-width: calc(100% - 2rem); + border-radius: 12px; + padding: 1.75rem; +} + +#signup-header h1 { + margin: 0 0 0.5rem 0; + font-size: 1.25rem; +} + +.signup-field-group { + margin-bottom: 0.85rem; +} + +.signup-field-label { + display: block; + font-size: 0.85rem; + margin-bottom: 0.35rem; +} + +.signup-input { + width: 100%; + padding: 0.6rem 0.75rem; + border-radius: 8px; + font-size: 0.95rem; +} + +#signup-submit-button { + width: 100%; + margin-top: 0.75rem; + padding: 0.7rem 1rem; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: 600; +} From 46b8806d4b26da92c0cd8d719c9761d044e0ab71 Mon Sep 17 00:00:00 2001 From: Sean San Date: Fri, 12 Jun 2026 21:51:35 -0700 Subject: [PATCH 06/13] Refactor: Recolor the sign up page to match the log in page This makes sure that the sign up and log in page both use the same color scheme and look consistent with each other. --- frontend/src/styles/signup-page.css | 111 ++++++++++++++++++++++------ 1 file changed, 90 insertions(+), 21 deletions(-) diff --git a/frontend/src/styles/signup-page.css b/frontend/src/styles/signup-page.css index bdb1fd3..0de8a99 100644 --- a/frontend/src/styles/signup-page.css +++ b/frontend/src/styles/signup-page.css @@ -1,46 +1,115 @@ -/* Signup page styles — match login-page layout */ +/* Signup page styles — mirror login page look and spacing */ #signup-page { display: flex; justify-content: center; align-items: center; - padding: 3rem 1rem; + min-height: calc(100vh - 5rem); + padding: 48px 24px; + background-color: var(--super-tinted-area-main-color); } #signup-card { - width: 420px; - max-width: calc(100% - 2rem); - border-radius: 12px; - padding: 1.75rem; + width: 100%; + max-width: 560px; + padding: 40px; + border-radius: 20px; + border: 4px solid var(--box-border-color); + background-color: var(--card-bg); + box-shadow: 0 12px 30px rgb(0 0 0 / 10%); +} + +#signup-header { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 28px; +} + +#signup-title { + font-size: 2.6rem; + line-height: 1.1; + margin: 0; + padding: 0; +} + +#signup-subtitle { + margin: 0; + font-size: 1.1rem; +} + +/* Link that points back to login */ +#login-link { + color: var(--main-accent-color); + text-decoration: none; + font-weight: 600; + font-size: 0.98rem; } -#signup-header h1 { - margin: 0 0 0.5rem 0; - font-size: 1.25rem; +#login-link:hover { + text-decoration: underline; +} + +#signup-form { + display: flex; + flex-direction: column; + gap: 18px; } .signup-field-group { - margin-bottom: 0.85rem; + display: flex; + flex-direction: column; + gap: 8px; } .signup-field-label { - display: block; - font-size: 0.85rem; - margin-bottom: 0.35rem; + font-size: 1rem; + font-weight: 600; + color: var(--text-color); } .signup-input { width: 100%; - padding: 0.6rem 0.75rem; - border-radius: 8px; - font-size: 0.95rem; + padding: 0.95rem 1rem; + border-radius: 10px; + border: 2px solid var(--box-border-color); + background-color: var(--true-bg-color); + color: var(--text-color); + font-size: 1rem; + transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; +} + +.signup-input:focus { + outline: none; + border-color: var(--main-accent-color); + box-shadow: 0 0 0 3px rgb(0 0 0 / 6%); +} + +.signup-input::placeholder { + color: var(--text-color); + opacity: 0.6; } #signup-submit-button { + all: unset; + display: inline-flex; + align-items: center; + justify-content: center; width: 100%; - margin-top: 0.75rem; - padding: 0.7rem 1rem; - border: none; - border-radius: 8px; + min-height: 3.25rem; + margin-top: 8px; + border-radius: 10px; + background-color: var(--main-accent-color); + color: var(--text-color); cursor: pointer; - font-weight: 600; + font-size: 1.05rem; + font-weight: 700; + transition: background-color 0.2s ease, transform 0.2s ease; +} + +#signup-submit-button:hover { + background-color: var(--main-accent-color-activte); +} + +#signup-submit-button:active { + transform: scale(0.98); } From 9ff77d28c86d25b9221f8aa68acf6af1a4372402 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 21 Jun 2026 15:43:55 -0700 Subject: [PATCH 07/13] fix: Adjust CSS for signup page so all input fields look consistent --- frontend/src/styles/signup-page.css | 35 ++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/frontend/src/styles/signup-page.css b/frontend/src/styles/signup-page.css index 0de8a99..84e6e0f 100644 --- a/frontend/src/styles/signup-page.css +++ b/frontend/src/styles/signup-page.css @@ -67,15 +67,31 @@ color: var(--text-color); } -.signup-input { +.signup-input, +.signup-input[type="password"] { width: 100%; + min-height: 3.4rem; padding: 0.95rem 1rem; border-radius: 10px; border: 2px solid var(--box-border-color); - background-color: var(--true-bg-color); - color: var(--text-color); - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; + background-color: var(--true-bg-color) !important; + color: var(--text-color) !important; + font-family: inherit !important; + font-size: 1rem !important; + line-height: 1.2 !important; + font-weight: 400; + box-sizing: border-box; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + -webkit-text-fill-color: var(--text-color) !important; + background-clip: padding-box; + caret-color: var(--text-color); +} + +.signup-input[type="password"]::-ms-reveal, +.signup-input[type="password"]::-ms-clear { + display: none; } .signup-input:focus { @@ -89,6 +105,15 @@ opacity: 0.6; } +.signup-input:-webkit-autofill, +.signup-input:-webkit-autofill:hover, +.signup-input:-webkit-autofill:focus { + -webkit-text-fill-color: var(--text-color); + box-shadow: 0 0 0 1000px var(--true-bg-color) inset; + -webkit-box-shadow: 0 0 0 1000px var(--true-bg-color) inset; + background-color: var(--true-bg-color); +} + #signup-submit-button { all: unset; display: inline-flex; From 2d8f73d06971eb0b83e7197fe767ef00f63de492 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 21 Jun 2026 15:48:25 -0700 Subject: [PATCH 08/13] feat: Enhance the about page to be more organized and have color The colors now match the rest of the site, and the content is organized into cards. The "Go back home" link has been removed since the user can just click the logo in the header to go back home. --- frontend/src/pages/AboutPage.jsx | 82 +++++++++++++++++++----------- frontend/src/styles/about-page.css | 81 +++++++++++++++++++++-------- 2 files changed, 114 insertions(+), 49 deletions(-) diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index 4908aa7..41d64f3 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -1,36 +1,60 @@ function AboutPage() { return ( -
+
- Go back home -

About The Method

-

Who

-

Made by a team of 2nd and 3rd year Computer Science students at UCI.

-

What

-

The Method is an all-in-one platform for anyone to take control of their job search and career development. We have 4 main features for users to utilize:

-
    -
  • #1) Resume Builder
    • -
  • #2) Interview Practice
    • -
  • #3) Job Search Tools
    • -
  • #4) Progress Tracking
    • -
-

When

-

Full version 1.0 releases around Spring 2026. The dates are still being finalized, but our team of 5 is working hard to make it this possible.

-

Where

-

Based in Irvine, California, United States

-

Why

-

Because job searching is hard and we want to make it easier for everyone. Creating and optimizing resumes is challenging so we built out templates that - can auto generate resumes based on the your input. We also wanted to provide a platform for users to practice their interview skills and get feedback on their - performance. We also wanted to provide a platform for users to connect with mentors and other professionals in their field. -

-

How

-

For the technical people interested we are using React + Vite, Python + FastAPI, PostgreSQL + SQLAlchemy, Docker, Git, and (WIP). - If you want to join our team please reach out to us (WIP). We are always looking for talented and passionate individuals to join our team. - We accept all forms of experience for different roles such as developer, designer, marketer, and more. We are a remote team so you can work - from anywhere in the world. We also have a flexible schedule so you can work on your own time. We are a fun and supportive team that values diversity and inclusion. -

+
+

About The Method

+

+ The Method is designed to help people create, optimize, practice, and track their job search in one place. +

+
+ +
+

Who

+

Made by a team of 2nd and 3rd year Computer Science students at UCI.

+
+ +
+

What

+

The Method is an all-in-one platform for anyone to take control of their job search and career development. We have 4 main features for users to utilize:

+
    +
  • #1) Resume Builder
    • +
  • #2) Interview Practice
    • +
  • #3) Job Search Tools
    • +
  • #4) Progress Tracking
    • +
+
+ +
+

When

+

Full version 1.0 releases around Spring 2026. The dates are still being finalized, but our team of 5 is working hard to make it this possible.

+
+ +
+

Where

+

Based in Irvine, California, United States

+
+ +
+

Why

+

+ Because job searching is hard and we want to make it easier for everyone. Creating and optimizing resumes is challenging so we built out templates that + can auto generate resumes based on the your input. We also wanted to provide a platform for users to practice their interview skills and get feedback on their + performance. We also wanted to provide a platform for users to connect with mentors and other professionals in their field. +

+
+ +
+

How

+

+ For the technical people interested we are using React + Vite, Python + FastAPI, PostgreSQL + SQLAlchemy, Docker, Git, and (WIP). + If you want to join our team please reach out to us (WIP). We are always looking for talented and passionate individuals to join our team. + We accept all forms of experience for different roles such as developer, designer, marketer, and more. We are a remote team so you can work + from anywhere in the world. We also have a flexible schedule so you can work on your own time. We are a fun and supportive team that values diversity and inclusion. +

+
-
+ ); } diff --git a/frontend/src/styles/about-page.css b/frontend/src/styles/about-page.css index d81967a..1c13e0f 100644 --- a/frontend/src/styles/about-page.css +++ b/frontend/src/styles/about-page.css @@ -1,30 +1,71 @@ #about-page { display: flex; flex-direction: column; - justify-content: center; align-items: center; - padding: 8px; + justify-content: flex-start; + padding: 32px 16px 48px; width: 100%; + background-color: var(--tinted-bg-color); } #about-page-content { display: flex; flex-direction: column; - justify-content: center; - width: 40%; -} - - #go-back-home { - 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); - width: 125px; - height: 35px; - display: flex; - justify-content: center; - align-items: center; - } \ No newline at end of file + gap: 18px; + width: min(900px, 100%); +} + +.about-card { + display: flex; + flex-direction: column; + gap: 12px; + padding: 24px 26px; + border-radius: 20px; + border: 2px solid var(--box-border-color); + background-color: var(--card-bg); + box-shadow: 0 12px 30px rgb(0 0 0 / 8%); +} + +.about-card h1, +.about-card h2, +.about-card p, +.about-card ul { + margin: 0; +} + +.about-card h1, +.about-card h2 { + color: var(--text-color); + line-height: 1.15; +} + +.about-card h1 { + font-size: 2.4rem; +} + +.about-card h2 { + font-size: 1.5rem; +} + +.about-card p, +.about-card li { + color: var(--text-color); + font-size: 1rem; + line-height: 1.6; +} + +.about-card-list { + display: flex; + flex-direction: column; + gap: 8px; + padding-left: 1.2rem; +} + +.about-card-list li::marker { + color: var(--main-accent-color); +} + +.about-intro-card { + background: linear-gradient(180deg, var(--card-bg) 0%, var(--tinted-card-bg) 100%); + border-color: var(--main-accent-color); +} \ No newline at end of file From b68eced48b022d95524e657210f7a1e8ed88b5e8 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 21 Jun 2026 16:04:29 -0700 Subject: [PATCH 09/13] refeactor: Use CSS variables for font sizes and component sizing This refactors the CSS code for all styling files. --- frontend/src/styles/about-page.css | 20 +-- frontend/src/styles/dashboard-page.css | 24 +-- frontend/src/styles/data-page.css | 31 ++-- frontend/src/styles/faq-page.css | 26 ++-- frontend/src/styles/form-page.css | 60 ++++---- frontend/src/styles/home-page.css | 144 +++++++++--------- frontend/src/styles/login-page.css | 54 ++++--- frontend/src/styles/news-page.css | 17 ++- frontend/src/styles/pricing-page.css | 12 +- frontend/src/styles/privacy-policy-page.css | 16 +- frontend/src/styles/signup-page.css | 41 ++--- frontend/src/styles/styles.css | 99 +++++++++--- frontend/src/styles/terms-of-service-page.css | 16 +- 13 files changed, 326 insertions(+), 234 deletions(-) diff --git a/frontend/src/styles/about-page.css b/frontend/src/styles/about-page.css index 1c13e0f..f0e634d 100644 --- a/frontend/src/styles/about-page.css +++ b/frontend/src/styles/about-page.css @@ -3,7 +3,7 @@ flex-direction: column; align-items: center; justify-content: flex-start; - padding: 32px 16px 48px; + padding: var(--space-3xl) var(--space-lg) var(--space-4xl); width: 100%; background-color: var(--tinted-bg-color); } @@ -11,19 +11,19 @@ #about-page-content { display: flex; flex-direction: column; - gap: 18px; - width: min(900px, 100%); + gap: var(--space-lg); + width: min(var(--content-width-lg), 100%); } .about-card { display: flex; flex-direction: column; - gap: 12px; - padding: 24px 26px; - border-radius: 20px; + gap: var(--space-sm); + padding: var(--space-xl) var(--space-xl); + border-radius: var(--radius-xl); border: 2px solid var(--box-border-color); background-color: var(--card-bg); - box-shadow: 0 12px 30px rgb(0 0 0 / 8%); + box-shadow: var(--shadow-card); } .about-card h1, @@ -44,20 +44,20 @@ } .about-card h2 { - font-size: 1.5rem; + font-size: var(--font-size-heading-sm); } .about-card p, .about-card li { color: var(--text-color); - font-size: 1rem; + font-size: var(--font-size-body); line-height: 1.6; } .about-card-list { display: flex; flex-direction: column; - gap: 8px; + gap: var(--space-xs); padding-left: 1.2rem; } diff --git a/frontend/src/styles/dashboard-page.css b/frontend/src/styles/dashboard-page.css index 571d875..d1c6d4f 100644 --- a/frontend/src/styles/dashboard-page.css +++ b/frontend/src/styles/dashboard-page.css @@ -1,7 +1,7 @@ #upload-file-area { width: 100%; min-height: 100vh; - padding: 2rem 1rem 4rem; + padding: var(--space-xl) var(--space-md) var(--space-4xl); display: flex; flex-direction: column; align-items: center; @@ -10,13 +10,13 @@ #upload-file-field { width: 85%; min-height: 45vh; - padding: 32px; + padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; - border-radius: 16px; + border-radius: var(--radius-lg); border: 2px solid var(--box-border-color); background-color: var(--true-bg-color); } @@ -30,7 +30,7 @@ justify-content: center; align-items: center; margin: 0; - border-radius: 16px; + border-radius: var(--radius-lg); border: 2px dashed var(--box-border-color); background-color: var(--true-bg-color); } @@ -41,18 +41,18 @@ } #upload-new-resume { - font-size: 2rem; - margin: 8px 0; + font-size: var(--font-size-heading-md); + margin: var(--space-xs) 0; } #upload-file-button-div-wrapper { - font-size: 2rem; - margin: 8px 0; + font-size: var(--font-size-heading-md); + margin: var(--space-xs) 0; padding: 0; } #drag-and-drop-caption { - margin: 8px 0; + margin: var(--space-xs) 0; padding: 0; } @@ -60,10 +60,12 @@ all: unset; width: 15rem; height: 5rem; - border-radius: 16px; + border-radius: var(--radius-lg); cursor: pointer; text-align: center; background-color: var(--main-accent-color); + color: var(--text-color); + transition: background-color var(--transition-fast), transform var(--transition-fast); } #inside-border-dashes button:active { @@ -72,6 +74,6 @@ } #supported-formats-caption { - margin: 8px 0; + margin: var(--space-xs) 0; padding: 0; } \ No newline at end of file diff --git a/frontend/src/styles/data-page.css b/frontend/src/styles/data-page.css index de2c79b..9588cd0 100644 --- a/frontend/src/styles/data-page.css +++ b/frontend/src/styles/data-page.css @@ -10,18 +10,18 @@ align-items: flex-start; width: 100%; max-width: 600px; - margin-top: 16px; + margin-top: var(--space-md); } .back-home-link { background-color: var(--card-bg); padding: 0.5rem 0.9rem; - border-radius: 0.5rem; + border-radius: var(--radius-sm); color: var(--text-color); text-decoration: none; - margin-bottom: 1.5rem; + margin-bottom: var(--space-lg); border: 1px solid var(--box-border-color); - transition: transform 0.2s ease, background-color 0.2s ease; + transition: transform var(--transition-fast), background-color var(--transition-fast); } .back-home-link:hover { @@ -31,40 +31,41 @@ #data-content h1 { color: var(--text-color); - margin: 0 0 0.5rem; + margin: 0 0 var(--space-xs); font-size: 2.5rem; } .data-info-card { background-color: var(--card-bg); border: 2px solid var(--box-border-color); - border-radius: 10px; - padding: 1.5rem; + border-radius: var(--radius-md); + padding: var(--space-lg); width: 100%; + box-shadow: var(--shadow-card); } .data-info-card p { margin-top: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--space-lg); } #data-content p { color: var(--text-color); - margin: 0.25rem 0 1.5rem; - font-size: 1.1rem; + margin: var(--space-xxs) 0 var(--space-lg); + font-size: var(--font-size-body-lg); } /* Styling the destructive "Delete" button */ .delete-data-btn { - background-color: #ef4444; /* A universal red for 'delete' actions */ - color: white; + background-color: #ef4444; + color: #fff; border: none; padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1.1rem; + border-radius: var(--radius-sm); + font-size: var(--font-size-body-lg); font-weight: 600; cursor: pointer; - transition: background-color 0.2s, transform 0.1s; + transition: background-color var(--transition-fast), transform 0.1s; } .delete-data-btn:hover { diff --git a/frontend/src/styles/faq-page.css b/frontend/src/styles/faq-page.css index baf0a30..4614eaf 100644 --- a/frontend/src/styles/faq-page.css +++ b/frontend/src/styles/faq-page.css @@ -1,46 +1,48 @@ #faqs { max-width: 700px; - margin: 48px auto 0; - padding: 32px 24px; + margin: var(--space-4xl) auto 0; + padding: var(--space-xl) var(--space-lg); } #faqs h1 { - font-size: 2rem; - margin-bottom: 16px; + font-size: var(--font-size-heading-md); + margin-bottom: var(--space-md); color: var(--text-color, #1e1e1e); font-weight: 700; } #faqs p { color: var(--text-color, #444); - margin-bottom: 20px; + margin-bottom: var(--space-lg); line-height: 1.6; } .faq-search-input { width: 100%; - padding: 12px 16px; - border: 1px solid #d1d5db; - border-radius: 8px; + min-height: var(--control-height-md); + padding: var(--input-padding-y) var(--input-padding-x); + border: 1px solid var(--input-border-color); + border-radius: var(--radius-sm); font-size: 1rem; - margin-bottom: 24px; + margin-bottom: var(--space-xl); background: var(--tinted-bg-color, #f7f8fa); color: var(--text-color, #1e1e1e); - transition: border 0.2s; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .faq-search-input:focus { border-color: var(--main-accent-color, #4aa5ff); outline: none; + box-shadow: var(--shadow-focus); } .back-home-link { display: inline-block; - margin-bottom: 18px; + margin-bottom: var(--space-md); color: var(--main-accent-color, #4aa5ff); text-decoration: none; font-weight: 500; - transition: text-decoration 0.2s; + transition: text-decoration var(--transition-fast); } .back-home-link:hover { diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index 3d43136..b3913ea 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -2,7 +2,7 @@ #form-page { width: 100%; min-height: 100vh; - padding: 2rem 1rem 4rem; + padding: var(--space-xl) var(--space-md) var(--space-4xl); display: flex; flex-direction: column; align-items: center; @@ -10,8 +10,8 @@ #form-page h1 { font-size: 4.5rem; - margin: 0 0 2rem; - font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + margin: 0 0 var(--space-xl); + font-family: inherit; font-weight: 700; } @@ -23,16 +23,16 @@ flex-direction: column; justify-content: center; align-items: center; - gap: 1.25rem; + gap: var(--space-lg); } /* Section headers */ #resume-form h2 { - font-size: 2rem; - margin-top: 2rem; - margin-bottom: 0.5rem; + font-size: var(--font-size-heading-md); + margin-top: var(--space-xl); + margin-bottom: var(--space-xs); color: var(--text-color); - font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + font-family: inherit; font-weight: 600; letter-spacing: -0.5px; } @@ -41,30 +41,31 @@ .resume-hr-between-sections { border: none; border-top: 2.5px solid var(--box-border-color); - margin: 1.5rem 0; + margin: var(--space-lg) 0; } /* Reusable card */ .card { display: flex; flex-direction: column; - gap: 1.8rem; + gap: var(--space-xl); width: 100%; - padding: 1.75rem; - border-radius: 10px; + padding: var(--space-xl); + border-radius: var(--radius-md); border: 4px var(--box-border-color) solid; background-color: var(--true-bg-color); + box-shadow: var(--shadow-card); } /* Labels */ label { display: flex; flex-direction: column; - gap: 0.2rem; - font-size: 1.5rem; + gap: var(--space-xxs); + font-size: var(--font-size-heading-sm); font-weight: 500; color: var(--text-color); - font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + font-family: inherit; letter-spacing: -0.25px; } @@ -74,13 +75,14 @@ input[type="email"], input[type="url"], textarea { width: 100%; - padding: 0.9rem 1rem; - font-size: 1.5rem; - border-radius: 8px; + min-height: var(--control-height-md); + padding: var(--input-padding-y) var(--input-padding-x); + font-size: var(--font-size-heading-sm); + border-radius: var(--radius-sm); border: 1px solid var(--input-border-color); background-color: var(--input-bg-color); color: var(--text-color); - font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; + font-family: inherit; letter-spacing: -0.25px; } @@ -111,17 +113,17 @@ textarea:focus { align-items: center; align-self: center; text-align: center; - margin-top: 1.5rem; - width: 50px; - height: 50px; + margin-top: var(--space-lg); + width: var(--button-width-circle); + height: var(--button-width-circle); font-size: 2rem; border: none; - border-radius: 50%; + border-radius: var(--radius-pill); cursor: pointer; background-color: var(--main-accent-color); color: var(--text-color); padding: 0; - transition: transform 0.2s ease, background-color 0.2s ease; + transition: transform var(--transition-fast), background-color var(--transition-fast); } .add-section-form-button:active { @@ -135,15 +137,15 @@ textarea:focus { /* Submit button */ button[type="submit"] { - margin-top: 2.5rem; - padding: 1rem; + margin-top: var(--space-2xl); + padding: var(--space-md); width: 85%; - font-size: 2.0rem; + font-size: 2rem; border: none; - border-radius: 10px; + border-radius: var(--radius-md); cursor: pointer; background-color: var(--main-accent-color); - color: var(text-color); + color: var(--text-color); } button[type="submit"]:active { diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 212ad99..c8f90ea 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -7,11 +7,11 @@ justify-content: center; align-items: center; text-align: center; - gap: 24px; + gap: var(--space-xl); } #hero-area h1 { - font-size: 12.5rem; + font-size: var(--font-size-display-xxl); margin: 0; padding: 0; line-height: 0.9; @@ -29,7 +29,7 @@ } #hero-area p { - font-size: 3.5rem; + font-size: var(--font-size-display); margin: 0; padding: 0; line-height: 1; @@ -72,14 +72,14 @@ #make-resume { all: unset; - width: 20rem; - height: 7rem; - border-radius: 10px; + width: var(--button-width-md); + height: var(--button-height-xl); + border-radius: var(--radius-md); cursor: pointer; font-size: 2rem; background-color: var(--main-accent-color); color: var(--text-color); - transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; + transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); box-shadow: 0 4px 24px 0 rgb(56 98 255 / 8%); opacity: 0; transform: translateY(56px) scale(0.98); @@ -120,7 +120,7 @@ /* How It Works Area */ #how-it-works { - padding: 32px; + padding: var(--space-xl); background-color: var(--super-tinted-area-main-color); } @@ -130,7 +130,7 @@ } #how-it-works-title{ - font-size: 4rem; + font-size: var(--font-size-display); text-align: center; margin-top: 2rem; } @@ -147,10 +147,10 @@ display: flex; flex-wrap: wrap; justify-content: center; - gap: 20px; - padding: 20px; + gap: var(--space-lg); + padding: var(--space-lg); width: 100%; - max-width: 1200px; + max-width: var(--content-width-xl); margin: 0 auto; background-color: var(--super-tinted-area-main-color); } @@ -162,14 +162,14 @@ max-width: 260px; min-width: 250px; min-height: 320px; - padding: 30px; - border-radius: 15px; + padding: var(--space-xl); + border-radius: var(--radius-lg); border: 3px; border-style: solid; border-color: var(--main-accent-color); text-align: left; background-color: var(--tinted-card-bg); - transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; + transition: transform var(--transition-standard), box-shadow var(--transition-standard), background-color var(--transition-standard); will-change: transform; } @@ -186,9 +186,9 @@ display: flex; flex-direction: column; align-items: center; - margin: 72px 0; - padding: 0 32px; - gap: 32px; + margin: var(--space-4xl) 0; + padding: 0 var(--space-xl); + gap: var(--space-xl); } #home-statistics-header { @@ -196,25 +196,25 @@ flex-direction: column; align-items: center; text-align: center; - gap: 12px; + gap: var(--space-sm); } #home-statistics-title-row { display: flex; align-items: center; justify-content: center; - gap: 12px; + gap: var(--space-sm); flex-wrap: wrap; } #home-statistics-title-h2 { - font-size: 4rem; + font-size: var(--font-size-display); margin: 0; padding: 0; } #home-statistics-caption { - font-size: 1.25rem; + font-size: var(--font-size-body-lg); max-width: 760px; margin: 0; padding: 0; @@ -223,24 +223,24 @@ #home-statistics-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 24px; + gap: var(--space-xl); width: 100%; - max-width: 1200px; + max-width: var(--content-width-xl); } .home-statistics-panel { display: flex; flex-direction: column; - gap: 18px; - padding: 24px; + gap: var(--space-lg); + padding: var(--space-xl); border: 4px solid var(--box-border-color); - border-radius: 18px; + border-radius: var(--radius-lg); background-color: var(--card-bg); - box-shadow: 0 10px 22px rgb(0 0 0 / 8%); + box-shadow: var(--shadow-card); } .home-statistics-panel-title { - font-size: 2rem; + font-size: var(--font-size-heading-md); margin: 0; padding: 0; } @@ -248,7 +248,7 @@ .home-statistics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 16px; + gap: var(--space-md); } .home-stat-card { @@ -259,14 +259,14 @@ min-height: 8.5rem; padding: 18px 20px; border: 2px solid var(--box-border-color); - border-radius: 14px; + border-radius: var(--radius-md); background-color: var(--card-bg); - transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; + transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .home-stat-card:hover { transform: translateY(-4px); - box-shadow: 0 10px 18px rgb(0 0 0 / 10%); + box-shadow: var(--shadow-card); background-color: var(--card-bg); } @@ -277,7 +277,7 @@ justify-content: center; width: 1.6rem; height: 1.6rem; - border-radius: 999px; + border-radius: var(--radius-pill); border: 2px solid var(--box-border-color); background-color: var(--card-bg); color: var(--text-color); @@ -294,13 +294,13 @@ transform: translateX(-50%); min-width: 240px; padding: 0.65rem 0.85rem; - border-radius: 10px; + border-radius: var(--radius-md); background-color: var(--true-bg-color); color: var(--text-color); font-size: 0.9rem; line-height: 1.3; text-align: center; - box-shadow: 0 10px 24px rgb(0 0 0 / 15%); + box-shadow: var(--shadow-menu); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; @@ -341,19 +341,19 @@ flex-direction: column; justify-content: center; align-items: center; - height: 48rem; + min-height: 48rem; background-color: var(--super-tinted-area-main-color); } #review-header { - font-size: 4rem; - margin: 8px; + font-size: var(--font-size-display); + margin: var(--space-xs); padding: 0; } #review-caption { - font-size: 2rem; - margin: 8px; + font-size: var(--font-size-heading-md); + margin: var(--space-xs); padding: 0; } @@ -370,20 +370,20 @@ justify-content: center; align-items: start; margin: 0; - padding: 24px; + padding: var(--space-xl); width: 36rem; height: 24rem; - border-radius: 32px; + border-radius: var(--radius-xl); border: 4px var(--box-border-color) solid; background-color: var(--tinted-bg-color); } #review-card-1 p, #review-card-2 p, #review-card-3 p { - font-size: 1.25rem; + font-size: var(--font-size-body-lg); } .reivew-quote { - margin: 32px 0; + margin: var(--space-xl) 0; } .reivew-name { @@ -400,19 +400,19 @@ flex-direction: column; justify-content: center; align-items: center; - padding: 32px; - gap: 16px; + padding: var(--space-xl); + gap: var(--space-md); } #try-provr-h2 { - font-size: 4rem; - margin: 8px; + font-size: var(--font-size-display); + margin: var(--space-xs); padding: 0; } #recommend-provr-p { - font-size: 1.5rem; - margin: 8px; + font-size: var(--font-size-heading-sm); + margin: var(--space-xs); padding: 0; max-width: 800px; text-align: center; @@ -427,12 +427,12 @@ text-align: center; color: var(--text-color); width: 15rem; - height: 5rem; - border-radius: 10px; + height: var(--button-height-lg); + border-radius: var(--radius-md); cursor: pointer; - font-size: 2rem; + font-size: var(--font-size-heading-md); background-color: var(--main-accent-color); - transition: background-color 0.2s ease, transform 0.2s ease; + transition: background-color var(--transition-fast), transform var(--transition-fast); } #visit-provr-button:hover { @@ -450,25 +450,25 @@ flex-direction: column; justify-content: center; align-items: center; - padding: 32px; + padding: var(--space-xl); background-color: var(--super-tinted-area-main-color); } #ready-to-get-started-h2 { - font-size: 4rem; - margin: 8px; + font-size: var(--font-size-display); + margin: var(--space-xs); padding: 0; } #call-to-action-p-top { - font-size: 1.5rem; - margin: 8px; + font-size: var(--font-size-heading-sm); + margin: var(--space-xs); padding: 0; } #call-to-action-p-bottom { - font-size: 1.5rem; - margin: 8px; + font-size: var(--font-size-heading-sm); + margin: var(--space-xs); padding: 0; } @@ -477,12 +477,12 @@ text-align: center; color: var(--text-color); width: 15rem; - height: 5rem; - border-radius: 10px; + height: var(--button-height-lg); + border-radius: var(--radius-md); cursor: pointer; - font-size: 2rem; + font-size: var(--font-size-heading-md); background-color: var(--main-accent-color); - transition: background-color 0.2s ease, transform 0.2s ease; + transition: background-color var(--transition-fast), transform var(--transition-fast); } #call-to-action-sign-up-button:hover { @@ -501,6 +501,8 @@ justify-content: space-around; margin: 0; background-color: var(--true-bg-color); + padding: var(--space-lg) var(--space-xl); + gap: var(--space-xl); } #footer-information-area h2:not(#footer-moto) { @@ -515,7 +517,7 @@ } #quick-links #home-quick-navlink { - margin-bottom: 16px; + margin-bottom: var(--space-md); } #team-section { @@ -526,7 +528,7 @@ } #team-section a { - margin-bottom: 16px; + margin-bottom: var(--space-md); } #socials-section { @@ -538,7 +540,7 @@ #socials-section p { margin: 0; - margin-bottom: 16px; + margin-bottom: var(--space-md); } #extras-section { @@ -549,7 +551,7 @@ } #extras-section a { - margin-bottom: 16px; + margin-bottom: var(--space-md); } #copyright { @@ -557,6 +559,6 @@ flex-direction: row; justify-content: center; margin: 0; - padding: 16px; + padding: var(--space-md); background-color: var(--true-bg-color); } \ No newline at end of file diff --git a/frontend/src/styles/login-page.css b/frontend/src/styles/login-page.css index 0f1e4cd..92f5282 100644 --- a/frontend/src/styles/login-page.css +++ b/frontend/src/styles/login-page.css @@ -4,29 +4,29 @@ justify-content: center; align-items: center; min-height: calc(100vh - 5rem); - padding: 48px 24px; + padding: var(--space-4xl) var(--space-lg); background-color: var(--super-tinted-area-main-color); } #login-card { width: 100%; max-width: 560px; - padding: 40px; - border-radius: 20px; + padding: var(--space-3xl); + border-radius: var(--radius-xl); border: 4px solid var(--box-border-color); background-color: var(--card-bg); - box-shadow: 0 12px 30px rgb(0 0 0 / 10%); + box-shadow: var(--shadow-elevated); } #login-header { display: flex; flex-direction: column; - gap: 12px; - margin-bottom: 28px; + gap: var(--space-sm); + margin-bottom: var(--space-xl); } #login-title { - font-size: 2.6rem; + font-size: var(--font-size-heading-lg); line-height: 1.1; margin: 0; padding: 0; @@ -34,7 +34,7 @@ #login-subtitle { margin: 0; - font-size: 1.1rem; + font-size: var(--font-size-body-lg); } /* Account and forgot password links */ @@ -45,7 +45,7 @@ font-weight: 600; margin-left: auto; font-size: 0.98rem; - transition: text-decoration 0.2s; + transition: text-decoration var(--transition-fast); } #create-account-link:hover, @@ -56,36 +56,44 @@ #login-form { display: flex; flex-direction: column; - gap: 18px; + gap: var(--space-lg); } .login-field-group { display: flex; flex-direction: column; - gap: 8px; + gap: var(--space-xs); } .login-field-label { - font-size: 1rem; + font-size: var(--font-size-label); font-weight: 600; color: var(--text-color); } .login-input { width: 100%; - padding: 0.95rem 1rem; - border-radius: 10px; + min-height: var(--control-height-md); + padding: var(--input-padding-y) var(--input-padding-x); + border-radius: var(--radius-md); border: 2px solid var(--box-border-color); background-color: var(--true-bg-color); color: var(--text-color); + font-family: inherit; font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; + line-height: 1.2; + box-sizing: border-box; + appearance: none; + -webkit-appearance: none; + background-clip: padding-box; + caret-color: var(--text-color); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .login-input:focus { outline: none; border-color: var(--main-accent-color); - box-shadow: 0 0 0 3px rgb(0 0 0 / 6%); + box-shadow: var(--shadow-focus); } .login-input::placeholder { @@ -97,15 +105,15 @@ display: flex; justify-content: space-between; align-items: center; - gap: 16px; + gap: var(--space-md); flex-wrap: wrap; - margin-top: 2px; + margin-top: var(--space-xxs); } #remember-me-option { display: inline-flex; align-items: center; - gap: 10px; + gap: var(--space-xs); font-size: 0.98rem; cursor: pointer; } @@ -123,15 +131,15 @@ align-items: center; justify-content: center; width: 100%; - min-height: 3.25rem; - margin-top: 8px; - border-radius: 10px; + min-height: var(--button-height-md); + margin-top: var(--space-xs); + border-radius: var(--radius-md); background-color: var(--main-accent-color); color: var(--text-color); cursor: pointer; font-size: 1.05rem; font-weight: 700; - transition: background-color 0.2s ease, transform 0.2s ease; + transition: background-color var(--transition-fast), transform var(--transition-fast); } #login-submit-button:hover { diff --git a/frontend/src/styles/news-page.css b/frontend/src/styles/news-page.css index 7e69289..f33df14 100644 --- a/frontend/src/styles/news-page.css +++ b/frontend/src/styles/news-page.css @@ -8,19 +8,20 @@ display: flex; flex-direction: column; align-items: flex-start; - width: 35%; - margin-top: 16px; + width: min(var(--content-width-md), 100%); + margin-top: var(--space-md); } #news-content .back-home-link { display: inline-block; background-color: var(--card-bg); padding: 0.5rem 0.9rem; - border-radius: 0.5rem; + border-radius: var(--radius-sm); color: var(--text-color); text-decoration: none; - margin-bottom: 0.5rem; - transition: background-color 0.2s ease, transform 0.2s ease; + margin-bottom: var(--space-xs); + border: 1px solid var(--box-border-color); + transition: background-color var(--transition-fast), transform var(--transition-fast); } #news-content .back-home-link:hover { @@ -34,10 +35,12 @@ .news-title { margin: 0; + font-size: var(--font-size-heading-md); } .news-intro { - margin: 0.25rem 0 1.5rem; + margin: var(--space-xxs) 0 var(--space-lg); + font-size: var(--font-size-body-lg); } .news-grid { @@ -47,5 +50,5 @@ width: 100%; display: flex; flex-direction: column; - gap: 1rem; + gap: var(--space-md); } \ No newline at end of file diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css index 238c9c3..a3c8c76 100644 --- a/frontend/src/styles/pricing-page.css +++ b/frontend/src/styles/pricing-page.css @@ -9,7 +9,7 @@ #pricing-page-h1 { font-size: 3.5rem; text-align: center; - margin-top: 2rem; + margin-top: var(--space-xl); } #pricing-tiers-subarea { @@ -18,7 +18,7 @@ flex-direction: row; justify-content: center; align-items: stretch; - margin-top: 2rem; + margin-top: var(--space-xl); } .pricing-icon { @@ -33,9 +33,11 @@ width: 300px; background-color: var(--card-bg); border: solid 2px var(--main-accent-color); - padding: 2rem; - border-radius: 8px; - margin: 1rem; + padding: var(--space-xl); + border-radius: var(--radius-sm); + margin: var(--space-md); + box-shadow: var(--shadow-card); + transition: background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast); } #pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover { diff --git a/frontend/src/styles/privacy-policy-page.css b/frontend/src/styles/privacy-policy-page.css index e0caccc..868258b 100644 --- a/frontend/src/styles/privacy-policy-page.css +++ b/frontend/src/styles/privacy-policy-page.css @@ -8,17 +8,20 @@ display: flex; flex-direction: column; align-items: flex-start; - width: 35%; - margin-top: 16px; + width: min(var(--content-width-md), 100%); + margin-top: var(--space-md); + gap: var(--space-xs); } #privacy-policy-content .back-home-link { background-color: var(--card-bg); padding: 0.5rem 0.9rem; - border-radius: 0.5rem; + border-radius: var(--radius-sm); color: var(--text-color); text-decoration: none; - margin-bottom: 0.5rem; + margin-bottom: var(--space-xs); + border: 1px solid var(--box-border-color); + transition: background-color var(--transition-fast), transform var(--transition-fast); } #privacy-policy-content .back-home-link:hover { @@ -29,14 +32,15 @@ #privacy-policy-content h1 { color: var(--text-color); margin: 0; + font-size: var(--font-size-heading-md); } #privacy-policy-content p { color: var(--text-color); - margin: 0.25rem 0 0.5rem; + margin: var(--space-xxs) 0 var(--space-xs); } #privacy-policy-content ol { color: var(--text-color); - margin: 0.5rem 0 0.75rem; + margin: var(--space-xs) 0 var(--space-sm); } \ No newline at end of file diff --git a/frontend/src/styles/signup-page.css b/frontend/src/styles/signup-page.css index 84e6e0f..71e0510 100644 --- a/frontend/src/styles/signup-page.css +++ b/frontend/src/styles/signup-page.css @@ -4,29 +4,29 @@ justify-content: center; align-items: center; min-height: calc(100vh - 5rem); - padding: 48px 24px; + padding: var(--space-4xl) var(--space-lg); background-color: var(--super-tinted-area-main-color); } #signup-card { width: 100%; max-width: 560px; - padding: 40px; - border-radius: 20px; + padding: var(--space-3xl); + border-radius: var(--radius-xl); border: 4px solid var(--box-border-color); background-color: var(--card-bg); - box-shadow: 0 12px 30px rgb(0 0 0 / 10%); + box-shadow: var(--shadow-elevated); } #signup-header { display: flex; flex-direction: column; - gap: 12px; - margin-bottom: 28px; + gap: var(--space-sm); + margin-bottom: var(--space-xl); } #signup-title { - font-size: 2.6rem; + font-size: var(--font-size-heading-lg); line-height: 1.1; margin: 0; padding: 0; @@ -34,7 +34,7 @@ #signup-subtitle { margin: 0; - font-size: 1.1rem; + font-size: var(--font-size-body-lg); } /* Link that points back to login */ @@ -52,17 +52,17 @@ #signup-form { display: flex; flex-direction: column; - gap: 18px; + gap: var(--space-lg); } .signup-field-group { display: flex; flex-direction: column; - gap: 8px; + gap: var(--space-xs); } .signup-field-label { - font-size: 1rem; + font-size: var(--font-size-label); font-weight: 600; color: var(--text-color); } @@ -70,14 +70,14 @@ .signup-input, .signup-input[type="password"] { width: 100%; - min-height: 3.4rem; - padding: 0.95rem 1rem; - border-radius: 10px; + min-height: var(--control-height-md); + padding: var(--input-padding-y) var(--input-padding-x); + border-radius: var(--radius-md); border: 2px solid var(--box-border-color); background-color: var(--true-bg-color) !important; color: var(--text-color) !important; font-family: inherit !important; - font-size: 1rem !important; + font-size: var(--font-size-body) !important; line-height: 1.2 !important; font-weight: 400; box-sizing: border-box; @@ -87,6 +87,7 @@ -webkit-text-fill-color: var(--text-color) !important; background-clip: padding-box; caret-color: var(--text-color); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .signup-input[type="password"]::-ms-reveal, @@ -97,7 +98,7 @@ .signup-input:focus { outline: none; border-color: var(--main-accent-color); - box-shadow: 0 0 0 3px rgb(0 0 0 / 6%); + box-shadow: var(--shadow-focus); } .signup-input::placeholder { @@ -120,15 +121,15 @@ align-items: center; justify-content: center; width: 100%; - min-height: 3.25rem; - margin-top: 8px; - border-radius: 10px; + min-height: var(--button-height-md); + margin-top: var(--space-xs); + border-radius: var(--radius-md); background-color: var(--main-accent-color); color: var(--text-color); cursor: pointer; font-size: 1.05rem; font-weight: 700; - transition: background-color 0.2s ease, transform 0.2s ease; + transition: background-color var(--transition-fast), transform var(--transition-fast); } #signup-submit-button:hover { diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 853343c..fda3a56 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -30,6 +30,67 @@ --input-focus-border-color: #4aa5ff; --input-box-shadow-color: rgb(74 165 255 / 25%); + /* Spacing */ + --space-xxs: 0.25rem; + --space-xs: 0.5rem; + --space-sm: 0.75rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 2.5rem; + --space-3xl: 3rem; + --space-4xl: 4.5rem; + + /* Radius */ + --radius-sm: 0.5rem; + --radius-md: 0.625rem; + --radius-lg: 1rem; + --radius-xl: 1.25rem; + --radius-pill: 999px; + + /* Shadows */ + --shadow-card: 0 10px 22px rgb(0 0 0 / 8%); + --shadow-elevated: 0 12px 30px rgb(0 0 0 / 10%); + --shadow-focus: 0 0 0 3px rgb(0 0 0 / 6%); + + /* Typography */ + --font-size-body: 1rem; + --font-size-body-lg: 1.1rem; + --font-size-label: 1rem; + --font-size-heading-sm: 1.5rem; + --font-size-heading-md: 2rem; + --font-size-heading-lg: 2.6rem; + --font-size-display: 4rem; + --font-size-display-xl: 4.5rem; + --font-size-display-xxl: 12.5rem; + + /* Component sizing */ + --control-height-md: 3.4rem; + --button-height-md: 3.25rem; + --button-height-lg: 5rem; + --button-height-xl: 7rem; + --button-width-sm: 125px; + --button-width-md: 20rem; + --button-width-circle: 50px; + --input-padding-y: 0.95rem; + --input-padding-x: 1rem; + --nav-height: 5rem; + --nav-padding-inline: 2rem; + --icon-size-sm: 18px; + --menu-radius: 0.5rem; + + /* Layout */ + --content-width-md: 720px; + --content-width-lg: 900px; + --content-width-xl: 1200px; + + /* Motion */ + --transition-fast: 0.2s ease; + --transition-standard: 0.3s ease; + --main-accent-color-active: #3390e6; + --main-accent-color-activte: var(--main-accent-color-active); + --shadow-menu: 0 12px 32px rgb(0 0 0 / 15%); + /* Styling */ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; @@ -162,8 +223,8 @@ nav { grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; - height: 5rem; - padding: 0 2rem; + height: var(--nav-height); + padding: 0 var(--nav-padding-inline); background-color: var(--tinted-bg-color); border-bottom: solid 2px var(--main-accent-color); } @@ -171,7 +232,7 @@ nav { /* Navigation bar sub areas */ #nav-bar h2 { justify-self: start; - font-size: 2rem; + font-size: var(--font-size-heading-md); margin: 0; } @@ -190,7 +251,7 @@ nav { color: var(--text-color); position: relative; display: inline-block; - padding-bottom: 4px; + padding-bottom: var(--space-xxs); } #nav-bar-links li a::after { @@ -203,7 +264,7 @@ nav { background-color: var(--main-accent-color); transform: scaleX(0); transform-origin: center; - transition: transform 0.20s ease; + transition: transform var(--transition-fast); } #nav-bar-links li a:hover::after, @@ -222,7 +283,7 @@ nav { #log-in-sign-up-lightdark-toggle { display: flex; align-items: center; - gap: 2rem; + gap: var(--space-xl); justify-self: end; } @@ -231,13 +292,13 @@ nav { all: unset; padding: 0.6rem 2rem; font-size: 1rem; - border-radius: 6px; + border-radius: var(--radius-sm); cursor: pointer; text-align: center; background-color: var(--main-accent-color); color: var(--text-color); display: inline-block; - transition: all 0.2s ease; + transition: background-color var(--transition-fast), transform var(--transition-fast); } #get-started-btn:hover { @@ -255,7 +316,7 @@ nav { width: 140px; padding: 0.6rem 1.2rem; font-size: 1rem; - border-radius: 6px; + border-radius: var(--radius-sm); cursor: pointer; background-color: var(--main-accent-color); color: var(--text-color); @@ -263,7 +324,7 @@ nav { align-items: center; justify-content: center; text-align: center; - transition: all 0.2s ease; + transition: background-color var(--transition-fast), transform var(--transition-fast); gap: 0.55rem; } @@ -275,18 +336,18 @@ nav { display: inline-flex; align-items: center; justify-content: center; - flex: 0 0 18px; - width: 18px; - height: 18px; + flex: 0 0 var(--icon-size-sm); + width: var(--icon-size-sm); + height: var(--icon-size-sm); color: currentcolor; line-height: 0; } .theme-icon svg { display: block; - width: 18px; - height: 18px; - fill: currentcolor; + width: var(--icon-size-sm); + height: var(--icon-size-sm); + fill: currentcolor; stroke: currentcolor; } @@ -317,8 +378,8 @@ nav { margin-top: 0.6rem; background-color: var(--card-bg); border: 1px solid var(--box-border-color); - border-radius: 8px; - box-shadow: 0 12px 32px rgb(0 0 0 / 15%); + border-radius: var(--menu-radius); + box-shadow: var(--shadow-menu); min-width: 170px; z-index: 1000; overflow: hidden; @@ -352,7 +413,7 @@ nav { color: var(--text-color); border: none; text-align: left; - transition: all 0.15s ease; + transition: background-color var(--transition-fast), padding-left var(--transition-fast); font-weight: 500; border-radius: 0; gap: 0.75rem; diff --git a/frontend/src/styles/terms-of-service-page.css b/frontend/src/styles/terms-of-service-page.css index 72f351f..78c8e64 100644 --- a/frontend/src/styles/terms-of-service-page.css +++ b/frontend/src/styles/terms-of-service-page.css @@ -8,17 +8,20 @@ display: flex; flex-direction: column; align-items: flex-start; - width: 35%; - margin-top: 16px; + width: min(var(--content-width-md), 100%); + margin-top: var(--space-md); + gap: var(--space-xs); } #terms-of-service-content .back-home-link { background-color: var(--card-bg); padding: 0.5rem 0.9rem; - border-radius: 0.5rem; + border-radius: var(--radius-sm); color: var(--text-color); text-decoration: none; - margin-bottom: 0.5rem; + margin-bottom: var(--space-xs); + border: 1px solid var(--box-border-color); + transition: background-color var(--transition-fast), transform var(--transition-fast); } #terms-of-service-content .back-home-link:hover { @@ -29,14 +32,15 @@ #terms-of-service-content h1 { color: var(--text-color); margin: 0; + font-size: var(--font-size-heading-md); } #terms-of-service-content p { color: var(--text-color); - margin: 0.25rem 0 0.5rem; + margin: var(--space-xxs) 0 var(--space-xs); } #terms-of-service-content ol { color: var(--text-color); - margin: 0.5rem 0 0.75rem; + margin: var(--space-xs) 0 var(--space-sm); } \ No newline at end of file From 4e7a902cf12fe8171fa11434388687673938b889 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 4 Jul 2026 19:26:14 -0700 Subject: [PATCH 10/13] style: Update the form page to improve user experience and visual appeal --- frontend/src/styles/form-page.css | 270 ++++++++++++++++++++++-------- 1 file changed, 198 insertions(+), 72 deletions(-) diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index b3913ea..e428add 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -1,72 +1,106 @@ /* Page layout */ #form-page { width: 100%; - min-height: 100vh; - padding: var(--space-xl) var(--space-md) var(--space-4xl); + min-height: calc(100vh - var(--nav-height)); + padding: var(--space-3xl) var(--space-lg) var(--space-4xl); display: flex; flex-direction: column; align-items: center; + gap: var(--space-xl); + background: + radial-gradient(circle at top, rgb(74 165 255 / 10%), transparent 34%), + linear-gradient(180deg, var(--super-tinted-area-main-color), var(--tinted-bg-color)); } #form-page h1 { - font-size: 4.5rem; - margin: 0 0 var(--space-xl); - font-family: inherit; - font-weight: 700; + width: 100%; + max-width: 980px; + margin: 0; + font-size: clamp(2.6rem, 5vw, 4.5rem); + line-height: 1; + letter-spacing: -0.05em; + text-align: center; + color: var(--text-color); } /* Form container */ #resume-form { width: 100%; - max-width: 720px; + max-width: 980px; display: flex; flex-direction: column; - justify-content: center; - align-items: center; gap: var(--space-lg); } /* Section headers */ -#resume-form h2 { - font-size: var(--font-size-heading-md); - margin-top: var(--space-xl); - margin-bottom: var(--space-xs); +#resume-form > h2 { + margin: var(--space-lg) 0 calc(var(--space-xs) * -1); + padding-left: var(--space-sm); + border-left: 4px solid var(--main-accent-color); + font-size: clamp(1.4rem, 2vw, 2rem); + line-height: 1.15; + font-weight: 700; + letter-spacing: -0.04em; color: var(--text-color); - font-family: inherit; - font-weight: 600; - letter-spacing: -0.5px; } /* Line to break up sub-sections */ .resume-hr-between-sections { + grid-column: 1 / -1; + width: 100%; border: none; - border-top: 2.5px solid var(--box-border-color); - margin: var(--space-lg) 0; + border-top: 1px solid var(--box-border-color); + margin: var(--space-xs) 0 0; + opacity: 0.85; } /* Reusable card */ .card { - display: flex; - flex-direction: column; - gap: var(--space-xl); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: var(--space-lg); width: 100%; padding: var(--space-xl); - border-radius: var(--radius-md); - border: 4px var(--box-border-color) solid; - background-color: var(--true-bg-color); + border-radius: var(--radius-xl); + border: 1.5px solid var(--box-border-color); + background-color: var(--card-bg); box-shadow: var(--shadow-card); } +.card > label, +.card > h3, +.card > button, +.card > .resume-hr-between-sections, +.card > .link-block, +.card > .education-block, +.card > .experience-block, +.card > .project-block, +.card > .certification-block, +.card > .award-block { + grid-column: 1 / -1; +} + /* Labels */ label { display: flex; flex-direction: column; - gap: var(--space-xxs); - font-size: var(--font-size-heading-sm); - font-weight: 500; + gap: var(--space-xs); + font-size: var(--font-size-label); + font-weight: 600; color: var(--text-color); font-family: inherit; - letter-spacing: -0.25px; + letter-spacing: -0.01em; +} + +label:has(input[type="checkbox"]) { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-md); + background-color: var(--tinted-bg-color); + border: 1px solid var(--box-border-color); } /* Inputs */ @@ -77,80 +111,172 @@ textarea { width: 100%; min-height: var(--control-height-md); padding: var(--input-padding-y) var(--input-padding-x); - font-size: var(--font-size-heading-sm); - border-radius: var(--radius-sm); - border: 1px solid var(--input-border-color); + font-size: var(--font-size-body); + line-height: 1.45; + border-radius: var(--radius-md); + border: 1.5px solid var(--input-border-color); background-color: var(--input-bg-color); color: var(--text-color); font-family: inherit; - letter-spacing: -0.25px; + transition: + border-color var(--transition-fast), + box-shadow var(--transition-fast), + background-color var(--transition-fast), + transform var(--transition-fast); +} + +input[type="text"]::placeholder, +input[type="email"]::placeholder, +input[type="url"]::placeholder, +textarea::placeholder { + color: var(--text-color); + opacity: 0.55; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +textarea:focus { + outline: none; + border-color: var(--input-focus-border-color); + box-shadow: 0 0 0 4px var(--input-box-shadow-color); + background-color: var(--true-bg-color); } -/* Checkbox */ input[type="checkbox"] { - width: fit-content; - margin-top: 0.5rem; - transform: scale(1.3); + width: 1.15rem; + height: 1.15rem; + margin: 0; + accent-color: var(--main-accent-color); + transform: translateY(1px); } /* Textarea resize behavior */ textarea { + min-height: 8rem; resize: vertical; } -/* Focus styles */ -input:focus, -textarea:focus { - outline: none; - border-color: var(--input-focus-border-color); - box-shadow: 0 0 0 10px var(--input-box-shadow-color); +/* Section blocks */ +.link-block, +.education-block, +.experience-block, +.project-block, +.certification-block, +.award-block { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--space-lg); + padding: var(--space-lg); + border-radius: var(--radius-lg); + border: 1px solid var(--box-border-color); + background-color: var(--tinted-bg-color); +} + +.link-block h3, +.education-block h3, +.experience-block h3, +.project-block h3, +.certification-block h3, +.award-block h3 { + grid-column: 1 / -1; + margin: 0; + font-size: 1.05rem; + font-weight: 700; + letter-spacing: -0.02em; } /* Buttons that add a new section */ .add-section-form-button { - display: flex; - justify-content: center; - align-items: center; - align-self: center; - text-align: center; - margin-top: var(--space-lg); - width: var(--button-width-circle); - height: var(--button-width-circle); - font-size: 2rem; - border: none; + display: grid; + place-items: center; + justify-self: center; + width: 3rem; + height: 3rem; + margin-top: var(--space-xs); + padding: 0; + border: 1.5px solid var(--box-border-color); border-radius: var(--radius-pill); + background-color: var(--true-bg-color); + color: var(--main-accent-color); + font-size: 1.8rem; + font-weight: 700; + line-height: 1; cursor: pointer; - background-color: var(--main-accent-color); - color: var(--text-color); - padding: 0; - transition: transform var(--transition-fast), background-color var(--transition-fast); + box-shadow: var(--shadow-card); + transition: + transform var(--transition-fast), + background-color var(--transition-fast), + border-color var(--transition-fast), + box-shadow var(--transition-fast); } - .add-section-form-button:active { - transform: scale(0.95); - background-color: var(--main-accent-color-activte); - } +.add-section-form-button:hover { + transform: translateY(-2px); + background-color: var(--card-bg-hover); + border-color: var(--main-accent-color); +} - .add-section-form-button:hover { - transform: scale(1.1); - } +.add-section-form-button:active { + transform: translateY(0) scale(0.97); + background-color: var(--main-accent-color); + color: #fff; +} /* Submit button */ button[type="submit"] { - margin-top: var(--space-2xl); - padding: var(--space-md); - width: 85%; - font-size: 2rem; - border: none; + all: unset; + display: inline-flex; + align-items: center; + justify-content: center; + align-self: center; + width: min(100%, 340px); + min-height: var(--button-height-md); + margin-top: var(--space-xl); + padding: 0 var(--space-xl); border-radius: var(--radius-md); + background: linear-gradient(135deg, var(--main-accent-color), var(--main-accent-color-activte)); + color: #fff; cursor: pointer; - background-color: var(--main-accent-color); - color: var(--text-color); + font-size: 1.05rem; + font-weight: 700; + box-shadow: 0 12px 24px rgb(74 165 255 / 18%); + transition: + transform var(--transition-fast), + box-shadow var(--transition-fast), + filter var(--transition-fast); +} + +button[type="submit"]:hover { + filter: brightness(1.03); + box-shadow: 0 16px 28px rgb(74 165 255 / 24%); + transform: translateY(-1px); } button[type="submit"]:active { - transform: scale(0.97); - background-color: var(--main-accent-color-activte); + transform: translateY(0) scale(0.98); +} + +@media (max-width: 640px) { + #form-page { + padding: var(--space-xl) var(--space-md) var(--space-4xl); + } + + .card, + .link-block, + .education-block, + .experience-block, + .project-block, + .certification-block, + .award-block { + gap: var(--space-md); + padding: var(--space-lg); + } + + label:has(input[type="checkbox"]) { + flex-direction: row; + align-items: center; + } } From 2a31426c2b958825c2d660ed702700302e4247a6 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 4 Jul 2026 19:29:02 -0700 Subject: [PATCH 11/13] fix/style: Update the form page's background color to match home page --- frontend/src/styles/form-page.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index e428add..e4f4b83 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -7,9 +7,7 @@ flex-direction: column; align-items: center; gap: var(--space-xl); - background: - radial-gradient(circle at top, rgb(74 165 255 / 10%), transparent 34%), - linear-gradient(180deg, var(--super-tinted-area-main-color), var(--tinted-bg-color)); + background-color: var(--tinted-bg-color); } #form-page h1 { From c207e7c56fc0bb019f105551c12603e31d5006d8 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 4 Jul 2026 20:02:04 -0700 Subject: [PATCH 12/13] fix/style: Adjust the form page styling and improve documentation --- frontend/src/components/Form.jsx | 28 ++++++++++++++++++++++++---- frontend/src/styles/form-page.css | 18 ++++++++++++++++++ 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Form.jsx b/frontend/src/components/Form.jsx index a56f95f..809ac22 100644 --- a/frontend/src/components/Form.jsx +++ b/frontend/src/components/Form.jsx @@ -56,6 +56,8 @@ function Form() { // "generateResume" usestate is used to store resume JSON data from endpoint const [generatedResume, setGeneratedResume] = useState(null); + const [submitError, setSubmitError] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); /* When submit button is clicked it capture all data stored in input boxes. @@ -69,6 +71,8 @@ function Form() { */ const handleSubmit = async (e) => { e.preventDefault(); + setSubmitError(""); + setIsSubmitting(true); // console.log("Passed this") // used for dev logs const payload = { @@ -83,11 +87,20 @@ function Form() { }); const data = await response.json(); - console.log(data) // used for dev logs - setGeneratedResume(data); - console.log(data) // used for dev logs + + if (!response.ok) { + setGeneratedResume(null); + setSubmitError(data.detail || data.error || "Resume generation failed."); + return; + } + + setGeneratedResume(data.resume); } catch (err) { + setGeneratedResume(null); + setSubmitError("Could not reach the backend. Make sure Docker is running and the API is available at http://localhost:8000."); console.error("Error submitting resume:", err); + } finally { + setIsSubmitting(false); } }; @@ -95,6 +108,11 @@ function Form() { return (

Resume Maker

+ {submitError && ( +
+ {submitError} +
+ )}
{/* Basic Information */}

Basic Information

@@ -701,7 +719,9 @@ function Form() {
- + {/* Once "generate" usestate updates this will generate a resume at bottom of page */} diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index e4f4b83..1b5b13a 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -30,6 +30,17 @@ gap: var(--space-lg); } +.form-error-message { + width: 100%; + max-width: 980px; + padding: var(--space-md) var(--space-lg); + border-radius: var(--radius-md); + border: 1px solid rgb(220 38 38 / 35%); + background-color: rgb(220 38 38 / 12%); + color: rgb(185 28 28); + font-weight: 600; +} + /* Section headers */ #resume-form > h2 { margin: var(--space-lg) 0 calc(var(--space-xs) * -1); @@ -255,6 +266,13 @@ button[type="submit"]:active { transform: translateY(0) scale(0.98); } +button[type="submit"]:disabled { + cursor: not-allowed; + opacity: 0.7; + transform: none; + box-shadow: none; +} + @media (max-width: 640px) { #form-page { padding: var(--space-xl) var(--space-md) var(--space-4xl); From 753a8737a2f63936fbca1ab23f4beef7894e4e0c Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 4 Jul 2026 20:07:04 -0700 Subject: [PATCH 13/13] fix: Clean up the CSS files to adhear to CSS best practices --- frontend/src/styles/form-page.css | 27 +++++++++------------------ frontend/src/styles/login-page.css | 1 - frontend/src/styles/signup-page.css | 6 ++++-- frontend/src/styles/styles.css | 1 - 4 files changed, 13 insertions(+), 22 deletions(-) diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css index 1b5b13a..b394195 100644 --- a/frontend/src/styles/form-page.css +++ b/frontend/src/styles/form-page.css @@ -76,19 +76,6 @@ box-shadow: var(--shadow-card); } -.card > label, -.card > h3, -.card > button, -.card > .resume-hr-between-sections, -.card > .link-block, -.card > .education-block, -.card > .experience-block, -.card > .project-block, -.card > .certification-block, -.card > .award-block { - grid-column: 1 / -1; -} - /* Labels */ label { display: flex; @@ -142,6 +129,11 @@ textarea::placeholder { opacity: 0.55; } +textarea { + min-height: 8rem; + resize: vertical; +} + input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, @@ -160,11 +152,7 @@ input[type="checkbox"] { transform: translateY(1px); } -/* Textarea resize behavior */ -textarea { - min-height: 8rem; - resize: vertical; -} +/* (moved textarea above) */ /* Section blocks */ .link-block, @@ -180,6 +168,7 @@ textarea { border-radius: var(--radius-lg); border: 1px solid var(--box-border-color); background-color: var(--tinted-bg-color); + grid-column: 1 / -1; } .link-block h3, @@ -273,6 +262,7 @@ button[type="submit"]:disabled { box-shadow: none; } +/* stylelint-disable media-feature-range-notation */ @media (max-width: 640px) { #form-page { padding: var(--space-xl) var(--space-md) var(--space-4xl); @@ -294,6 +284,7 @@ button[type="submit"]:disabled { align-items: center; } } +/* stylelint-enable media-feature-range-notation */ diff --git a/frontend/src/styles/login-page.css b/frontend/src/styles/login-page.css index 92f5282..2f8310e 100644 --- a/frontend/src/styles/login-page.css +++ b/frontend/src/styles/login-page.css @@ -84,7 +84,6 @@ line-height: 1.2; box-sizing: border-box; appearance: none; - -webkit-appearance: none; background-clip: padding-box; caret-color: var(--text-color); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); diff --git a/frontend/src/styles/signup-page.css b/frontend/src/styles/signup-page.css index 71e0510..6c2f1f0 100644 --- a/frontend/src/styles/signup-page.css +++ b/frontend/src/styles/signup-page.css @@ -82,8 +82,8 @@ font-weight: 400; box-sizing: border-box; appearance: none; - -webkit-appearance: none; - -moz-appearance: none; + + /* vendor prefixes removed; keep appearance generic */ -webkit-text-fill-color: var(--text-color) !important; background-clip: padding-box; caret-color: var(--text-color); @@ -109,9 +109,11 @@ .signup-input:-webkit-autofill, .signup-input:-webkit-autofill:hover, .signup-input:-webkit-autofill:focus { + /* stylelint-disable property-no-vendor-prefix */ -webkit-text-fill-color: var(--text-color); box-shadow: 0 0 0 1000px var(--true-bg-color) inset; -webkit-box-shadow: 0 0 0 1000px var(--true-bg-color) inset; + /* stylelint-enable property-no-vendor-prefix */ background-color: var(--true-bg-color); } diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index fda3a56..a1f6616 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -19,7 +19,6 @@ /* Accent colors */ --main-accent-color: #4aa5ff; - --main-accent-color-activte: #3390e6; /* Borders */ --box-border-color: #d1d5db;