From f3a9b157e9c3db49570b936b5cf9cde6498e2b39 Mon Sep 17 00:00:00 2001 From: Sean San Date: Tue, 24 Feb 2026 01:45:57 -0800 Subject: [PATCH 01/19] fix(Frontend): Fix styling page to make each pricing box the same size Originally the size of each box was uneven and it was not alligned properly. This was because some boxes had more cotent than others. --- frontend/src/pages/PricingPage.jsx | 2 +- frontend/src/styles/pricing-page.css | 25 +++++++++++++------------ 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/PricingPage.jsx b/frontend/src/pages/PricingPage.jsx index 0b996a7..9aa2532 100644 --- a/frontend/src/pages/PricingPage.jsx +++ b/frontend/src/pages/PricingPage.jsx @@ -34,7 +34,7 @@ function PricingPage() {

Premium

All features for professionals

-

$6.99/month

+

$5.49/month

  • Everything in free plan +
    • diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css index 5241b77..a41a292 100644 --- a/frontend/src/styles/pricing-page.css +++ b/frontend/src/styles/pricing-page.css @@ -4,7 +4,7 @@ flex-direction: column; justify-content: center; align-items: center; - padding: 2rem; + align-items: stretch; } #pricing-page-h1 { @@ -14,23 +14,24 @@ } #pricing-tiers-subarea { - width: 50%; + width: 100%; display: flex; flex-direction: row; - justify-content: space-between; - align-items: center; + justify-content: center; + align-items: stretch; margin-top: 2rem; } #pricing-free-tier, #pricing-student-tier, #pricing-premium-tier { - width: 300px; - height: 100%; - background-color: var(--card-bg); - border: solid 2px var(--main-accent-color); - padding: 2rem; - border-radius: 8px; - margin: 1rem; - } + display: flex; + flex-direction: column; + width: 300px; + background-color: var(--card-bg); + border: solid 2px var(--main-accent-color); + padding: 2rem; + border-radius: 8px; + margin: 1rem; +} #pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover { background-color: var(--main-accent-color); From 809ecfdce7583413d369a6985ecd4f314b7899cf Mon Sep 17 00:00:00 2001 From: Sean San Date: Tue, 24 Feb 2026 02:08:43 -0800 Subject: [PATCH 02/19] feat(Frontend): Add svg icons for pricing & vite-plugin-svgr Adds 3 new svg icons for the pricing page and installs vite-plugin-svgr to allow importing svg files as React components. This allows for better styling of the icons and thus a more visually appealing pricing page. This updates the package.json and package-lock.json files to include the new dependency, and also updates the vite.config.js file to include the new plugin. --- frontend/package-lock.json | 393 ++++++++++++++++++++++++- frontend/package.json | 3 +- frontend/src/assets/pricingFree.svg | 1 + frontend/src/assets/pricingPremium.svg | 1 + frontend/src/assets/pricingStudent.svg | 1 + frontend/src/pages/PricingPage.jsx | 7 + frontend/vite.config.js | 8 +- 7 files changed, 410 insertions(+), 4 deletions(-) create mode 100644 frontend/src/assets/pricingFree.svg create mode 100644 frontend/src/assets/pricingPremium.svg create mode 100644 frontend/src/assets/pricingStudent.svg diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 59585c1..9ec60b7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,7 +23,8 @@ "globals": "^16.5.0", "stylelint": "^17.3.0", "stylelint-config-standard": "^40.0.0", - "vite": "^7.2.4" + "vite": "^7.2.4", + "vite-plugin-svgr": "^4.5.0" } }, "node_modules/@babel/code-frame": { @@ -1280,6 +1281,29 @@ "dev": true, "license": "MIT" }, + "node_modules/@rollup/pluginutils": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz", + "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.57.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.0.tgz", @@ -1643,6 +1667,258 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "license": "MIT", + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/core/node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "license": "MIT", + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1941,6 +2217,19 @@ "node": ">=6" } }, + "node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001766", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz", @@ -2144,6 +2433,17 @@ "dev": true, "license": "MIT" }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.279", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.279.tgz", @@ -2158,6 +2458,19 @@ "dev": true, "license": "MIT" }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", @@ -2418,6 +2731,13 @@ "node": ">=4.0" } }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true, + "license": "MIT" + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -3088,6 +3408,16 @@ "dev": true, "license": "MIT" }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -3212,6 +3542,17 @@ "dev": true, "license": "MIT" }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "license": "MIT", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-releases": { "version": "2.0.27", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz", @@ -3331,6 +3672,16 @@ "node": ">=8" } }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -3745,6 +4096,17 @@ "url": "https://github.com/chalk/slice-ansi?sponsor=1" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "license": "MIT", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -4012,6 +4374,13 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true, + "license": "MIT" + }, "node_modules/svg-tags": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", @@ -4127,6 +4496,13 @@ "node": ">=8.0" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "dev": true, + "license": "0BSD" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -4277,6 +4653,21 @@ } } }, + "node_modules/vite-plugin-svgr": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.5.0.tgz", + "integrity": "sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/pluginutils": "^5.2.0", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0" + }, + "peerDependencies": { + "vite": ">=2.6.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index a71d2bc..3697225 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "globals": "^16.5.0", "stylelint": "^17.3.0", "stylelint-config-standard": "^40.0.0", - "vite": "^7.2.4" + "vite": "^7.2.4", + "vite-plugin-svgr": "^4.5.0" } } diff --git a/frontend/src/assets/pricingFree.svg b/frontend/src/assets/pricingFree.svg new file mode 100644 index 0000000..d32a9ac --- /dev/null +++ b/frontend/src/assets/pricingFree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/pricingPremium.svg b/frontend/src/assets/pricingPremium.svg new file mode 100644 index 0000000..b2bb1fa --- /dev/null +++ b/frontend/src/assets/pricingPremium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/pricingStudent.svg b/frontend/src/assets/pricingStudent.svg new file mode 100644 index 0000000..582fa9f --- /dev/null +++ b/frontend/src/assets/pricingStudent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/pages/PricingPage.jsx b/frontend/src/pages/PricingPage.jsx index 9aa2532..fca0385 100644 --- a/frontend/src/pages/PricingPage.jsx +++ b/frontend/src/pages/PricingPage.jsx @@ -1,9 +1,14 @@ +import FreeIcon from "../assets/pricingFree.svg?react"; +import StudentIcon from "../assets/pricingStudent.svg?react"; +import PremiumIcon from "../assets/pricingPremium.svg?react"; + function PricingPage() { return (

    Pricing Page

    +

    Free

    Basic features for everyone

    $0/month

    @@ -18,6 +23,7 @@ function PricingPage() {
    +

    Student

    Discounted pricing for students

    $2.49/month

    @@ -32,6 +38,7 @@ function PricingPage() {
    +

    Premium

    All features for professionals

    $5.49/month

    diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 8b0f57b..1955f3c 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -1,7 +1,11 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import svgr from 'vite-plugin-svgr' // Allows importing SVGs as React components(Gives better styling) // https://vite.dev/config/ export default defineConfig({ - plugins: [react()], -}) + plugins: [ + react(), + svgr() + ], +}) \ No newline at end of file From 58b3620347b3a5dca60de5a61d7697a3bff436d7 Mon Sep 17 00:00:00 2001 From: Sean San Date: Tue, 24 Feb 2026 02:17:14 -0800 Subject: [PATCH 03/19] feat(Frontend): Update pricing page icons and styles to match theme Now the icons change color based on the theme that is selected. --- frontend/src/pages/PricingPage.jsx | 4 ++-- frontend/src/styles/pricing-page.css | 10 ++++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/PricingPage.jsx b/frontend/src/pages/PricingPage.jsx index fca0385..a052e90 100644 --- a/frontend/src/pages/PricingPage.jsx +++ b/frontend/src/pages/PricingPage.jsx @@ -10,7 +10,7 @@ function PricingPage() {

    Free

    -

    Basic features for everyone

    +

    Essential features for all users

    $0/month

      @@ -25,7 +25,7 @@ function PricingPage() {

      Student

      -

      Discounted pricing for students

      +

      Discounts for students

      $2.49/month

        diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css index a41a292..1e09f57 100644 --- a/frontend/src/styles/pricing-page.css +++ b/frontend/src/styles/pricing-page.css @@ -22,6 +22,12 @@ margin-top: 2rem; } + .pricing-icon { + width: 3rem; + height: 3rem; + fill: var(--main-accent-color); + } + #pricing-free-tier, #pricing-student-tier, #pricing-premium-tier { display: flex; flex-direction: column; @@ -31,10 +37,10 @@ padding: 2rem; border-radius: 8px; margin: 1rem; -} + } #pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover { - background-color: var(--main-accent-color); + background-color: var(--main-accent-color-activte); color: var(--tinted-bg-color); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; From c0abdfafceea42b06093c0273fec321ac2ca045b Mon Sep 17 00:00:00 2001 From: Sean San Date: Tue, 24 Feb 2026 02:38:18 -0800 Subject: [PATCH 04/19] feat(Frontend): Build out the about page's content No styling yet, just the basic content and structure. Will add better styling and coloring in a future commit. --- frontend/src/pages/AboutPage.jsx | 29 ++++++++++++++++++++++++++++- frontend/src/styles/about-page.css | 7 ++++++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index 48db944..07387d2 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -1,6 +1,33 @@ function AboutPage() { return ( -
        +
        + Go back home +

        About The Method

        + +

        Who

        +

        Made by a team of UCI students

        + +

        What

        +

        The Method is an all-in-one platform for anyone to take control of their job search and career development.

        + +

        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. Create/optimizing 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 8b13789..db928e1 100644 --- a/frontend/src/styles/about-page.css +++ b/frontend/src/styles/about-page.css @@ -1 +1,6 @@ - +#about-page { + display: flex; + flex-direction: column; + align-items: center; + padding: 8px; +} \ No newline at end of file From c56a29951401a9fd48dfca0a50660f02441b1821 Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 25 Feb 2026 14:46:15 -0800 Subject: [PATCH 05/19] feat/fix(Frontend): Style about area content and fix spelling errors The about area is now nicely formated and left alligned. Small grammar errors in the Why section were fixed as well. This also adds some content to the What section --- frontend/src/pages/AboutPage.jsx | 56 ++++++++++++++++-------------- frontend/src/styles/about-page.css | 9 +++++ 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index 07387d2..a5d9944 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -1,33 +1,35 @@ function AboutPage() { return (
        - Go back home -

        About The Method

        - -

        Who

        -

        Made by a team of UCI students

        - -

        What

        -

        The Method is an all-in-one platform for anyone to take control of their job search and career development.

        - -

        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. Create/optimizing 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. -

        +
        + 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. +

        +
        ); } diff --git a/frontend/src/styles/about-page.css b/frontend/src/styles/about-page.css index db928e1..9fe22f4 100644 --- a/frontend/src/styles/about-page.css +++ b/frontend/src/styles/about-page.css @@ -1,6 +1,15 @@ #about-page { display: flex; flex-direction: column; + justify-content: center; align-items: center; padding: 8px; + width: 100%; +} + +#about-page-content { + display: flex; + flex-direction: column; + justify-content: center; + width: 40%; } \ No newline at end of file From f70fe46298700071ab11bab55c32a30f33f0037d Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 25 Feb 2026 17:33:43 -0800 Subject: [PATCH 06/19] feat(Frontend): Update teams section in footer with links to LinkedIn Each team member's name in the footer now links to their LinkedIn profile, allowing users to easily connect with the team. Additionally, the layout of the team section has been adjusted for better alignment spacing. This is because unlike

        tags, tags are inline elements and do not take up the full width of the container. The CSS has been updated to ensure that the team section is formatted correctly. --- frontend/src/components/Footer.jsx | 14 +++++++------- frontend/src/styles/home-page.css | 11 +++++++++++ 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index 52511cd..b90b37f 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -14,13 +14,13 @@ function Footer() {

        About

        Contact

        -
        +

        Socials/Contacts

        @@ -33,7 +33,7 @@ function Footer() {

        Extras

        Pricing

        -

        About

        +

        Footer

        Terms of Service

        Privacy Policy

        FAQs

        diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 8b9f670..e4e91ad 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -398,6 +398,17 @@ background-color: var(--true-bg-color); } +#team-section { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + + #team-section a { + margin-bottom: 16px; + } + #copyright { display: flex; flex-direction: row; From 71370c893bfe21827629540e11c8bbe6cf5c7693 Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 25 Feb 2026 17:51:04 -0800 Subject: [PATCH 07/19] feat(Frontend): Link up the quick links section in the footer area This adds links to the quicklinks section in the footer area. The links are Home, Form, Dashboard, About, and Pricing. --- frontend/src/components/Footer.jsx | 43 +++++++++++++++++++++++++----- frontend/src/styles/home-page.css | 11 ++++++++ 2 files changed, 48 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index b90b37f..a978710 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -1,3 +1,5 @@ +import { NavLink } from 'react-router-dom' + function Footer() { return (
        @@ -6,13 +8,42 @@ function Footer() {

        The Method's Moto

        Make Every Task Happen, Own Destiny

        -
        +

        The Team

        diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index e4e91ad..ef70231 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -398,6 +398,17 @@ background-color: var(--true-bg-color); } +#quick-links { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + + #quick-links #home-quick-navlink { + margin-bottom: 16px; + } + #team-section { display: flex; flex-direction: column; From adf082c45946619cfcdfc20a2a13689fd04b8931 Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 25 Feb 2026 18:10:22 -0800 Subject: [PATCH 08/19] fix/refacotr(Frontend): Add new jsx component pages & fix footer links This fixes fixes the link names in the Extras section of the footer. It also adds them as jsx components in the frontend/src/pages directory just so they are ready for the future. --- frontend/src/components/Footer.jsx | 4 ++-- frontend/src/pages/{FAQs.jsx => DataPage.jsx} | 0 frontend/src/pages/FAQsPage.jsx | 0 frontend/src/pages/NewsUpdatePage.jsx | 0 4 files changed, 2 insertions(+), 2 deletions(-) rename frontend/src/pages/{FAQs.jsx => DataPage.jsx} (100%) create mode 100644 frontend/src/pages/FAQsPage.jsx create mode 100644 frontend/src/pages/NewsUpdatePage.jsx diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index a978710..996a15d 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -63,8 +63,8 @@ function Footer() {

        Extras

        -

        Pricing

        -

        Footer

        +

        News

        +

        Data

        Terms of Service

        Privacy Policy

        FAQs

        diff --git a/frontend/src/pages/FAQs.jsx b/frontend/src/pages/DataPage.jsx similarity index 100% rename from frontend/src/pages/FAQs.jsx rename to frontend/src/pages/DataPage.jsx diff --git a/frontend/src/pages/FAQsPage.jsx b/frontend/src/pages/FAQsPage.jsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/pages/NewsUpdatePage.jsx b/frontend/src/pages/NewsUpdatePage.jsx new file mode 100644 index 0000000..e69de29 From 28e708fdd6e0904cbe777ba80737061e41f8061e Mon Sep 17 00:00:00 2001 From: Sean San Date: Tue, 3 Mar 2026 23:53:26 -0800 Subject: [PATCH 09/19] feat: Update theme toggle to a popup menu Now the user can click on the button to open a popup menu with options to switch between light, cream, and dark themes. --- frontend/src/components/NavBar.jsx | 42 +++++++++++++++++++++---- frontend/src/styles/styles.css | 49 ++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index c5f9633..a2bb9a4 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -1,7 +1,25 @@ import { NavLink } from 'react-router-dom' +import { useState } from 'react' function NavBar({ toggleTheme, theme }) { + const [showThemeMenu, setShowThemeMenu] = useState(false) + + const themes = ['light', 'cream', 'midnight', 'dark'] + const themeLabels = { + light: 'Light', + cream: 'Cream', + midnight: 'Midnight', + dark: 'Dark' + } + + const handleThemeSelect = (selectedTheme) => { + if (selectedTheme !== theme) { + toggleTheme(selectedTheme) + } + setShowThemeMenu(false) + } + return (
        - +
        + + {showThemeMenu && ( +
        + {themes.map(t => ( + + ))} +
        + )} +
        diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 5b020f9..2fa5f03 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -216,6 +216,10 @@ nav { font-size: 1.1rem; } + .theme-selector-container { + position: relative; + } + #light-dark-toggle button { all: unset; padding: 0.6rem 1.2rem; @@ -227,6 +231,51 @@ nav { display: inline-block; } + .theme-menu { + position: absolute; + top: 100%; + right: 0; + margin-top: 0.5rem; + background-color: var(--card-bg); + border: 1px solid var(--box-border-color); + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + min-width: 140px; + z-index: 1000; + } + + .theme-option { + all: unset; + display: block; + width: 100%; + padding: 0.75rem 1rem; + font-size: 0.95rem; + cursor: pointer; + background-color: var(--card-bg); + color: var(--text-color); + border: none; + text-align: left; + transition: background-color 0.2s; + } + + .theme-option:hover { + background-color: var(--card-bg-hover); + } + + .theme-option.active { + background-color: var(--main-accent-color); + color: var(--text-color); + font-weight: bold; + } + + .theme-option:first-child { + border-radius: 6px 6px 0 0; + } + + .theme-option:last-child { + border-radius: 0 0 6px 6px; + } + #log-in-sign-up button { all: unset; padding: 0.6rem 2rem; From feb5764497aa45ccab5d8a09150d871f53c38d84 Mon Sep 17 00:00:00 2001 From: Sean San Date: Tue, 3 Mar 2026 23:59:36 -0800 Subject: [PATCH 10/19] refactor/fix: Move CSS around for organization & style pop up menu --- frontend/src/styles/styles.css | 36 +++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 2fa5f03..58ec1e2 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -209,6 +209,24 @@ 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); + } + + /* Theme button */ #light-dark-toggle { display: flex; align-items: center; @@ -276,22 +294,12 @@ nav { border-radius: 0 0 6px 6px; } - #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; + .theme-menu { + display: flex; + flex-direction: column; + justify-content: center; } - #log-in-sign-up button:active { - transform: scale(0.95); - background-color: var(--main-accent-color-activte); - } /* The Method Accent Color */ .method-word { From eef7280883aa8111c06e22c999a615f3408c552d Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 4 Mar 2026 00:24:36 -0800 Subject: [PATCH 11/19] fix: Remove border-radius from theme dropdown options --- frontend/src/styles/styles.css | 57 ++++++++++++++++++---------------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 58ec1e2..be7aa8b 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -227,18 +227,7 @@ nav { } /* Theme button */ - #light-dark-toggle { - display: flex; - align-items: center; - gap: 1rem; - font-size: 1.1rem; - } - - .theme-selector-container { - position: relative; - } - - #light-dark-toggle button { + #light-dark-toggle .theme-selector-container > button { all: unset; padding: 0.6rem 1.2rem; font-size: 1rem; @@ -249,6 +238,10 @@ nav { display: inline-block; } + .theme-selector-container { + position: relative; + } + .theme-menu { position: absolute; top: 100%; @@ -256,48 +249,60 @@ nav { margin-top: 0.5rem; background-color: var(--card-bg); border: 1px solid var(--box-border-color); - border-radius: 6px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - min-width: 140px; + border-radius: 0; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + min-width: 160px; z-index: 1000; + overflow: hidden; + display: flex; + flex-direction: column; + animation: slideDown 0.2s ease-out; + } + + @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-8px); + } + to { + opacity: 1; + transform: translateY(0); + } } .theme-option { all: unset; display: block; width: 100%; - padding: 0.75rem 1rem; + padding: 0.85rem 1.2rem; font-size: 0.95rem; cursor: pointer; background-color: var(--card-bg); color: var(--text-color); border: none; text-align: left; - transition: background-color 0.2s; + transition: all 0.15s ease; + font-weight: 500; + border-radius: 0; } .theme-option:hover { background-color: var(--card-bg-hover); + padding-left: 1.4rem; } .theme-option.active { background-color: var(--main-accent-color); color: var(--text-color); - font-weight: bold; + font-weight: 600; } .theme-option:first-child { - border-radius: 6px 6px 0 0; + border-radius: 0; } .theme-option:last-child { - border-radius: 0 0 6px 6px; - } - - .theme-menu { - display: flex; - flex-direction: column; - justify-content: center; + border-radius: 0; } From df7f635349b66a4c2f365d878931fb79620ba579 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 8 Mar 2026 23:16:18 -0700 Subject: [PATCH 12/19] feat: Update AboutPage with a link to go back home and style the button The about page now links to the home page, it actually reloads when it gets to home which is intended. The button is styled to look like a proper button and is placed at the top of the page for easy access. --- frontend/src/pages/AboutPage.jsx | 2 +- frontend/src/styles/about-page.css | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index a5d9944..4908aa7 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -2,7 +2,7 @@ function AboutPage() { return (
        - Go back home + Go back home

        About The Method

        Who

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

        diff --git a/frontend/src/styles/about-page.css b/frontend/src/styles/about-page.css index 9fe22f4..1de68eb 100644 --- a/frontend/src/styles/about-page.css +++ b/frontend/src/styles/about-page.css @@ -12,4 +12,20 @@ flex-direction: column; justify-content: center; width: 40%; -} \ No newline at end of file +} + + #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); + display: inline-block; + width: 125px; + height: 35px; + display: flex; + justify-content: center; + align-items: center; + } \ No newline at end of file From f1921aa46bb2d30d6d76b6114f13aae0f9591b5c Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 12 Mar 2026 23:46:46 -0700 Subject: [PATCH 13/19] feat: Add base structure for extra pages These extra pages found in the footer of the website now have a base structure. No content yet. --- frontend/src/pages/DataPage.jsx | 9 +++++++++ frontend/src/pages/FAQsPage.jsx | 9 +++++++++ frontend/src/pages/NewsPage.jsx | 9 +++++++++ frontend/src/pages/NewsUpdatePage.jsx | 0 frontend/src/pages/PrivacyPolicyPage.jsx | 9 +++++++++ frontend/src/pages/TermsOfServicePage.jsx | 9 +++++++++ 6 files changed, 45 insertions(+) create mode 100644 frontend/src/pages/NewsPage.jsx delete mode 100644 frontend/src/pages/NewsUpdatePage.jsx diff --git a/frontend/src/pages/DataPage.jsx b/frontend/src/pages/DataPage.jsx index e69de29..a3fcf92 100644 --- a/frontend/src/pages/DataPage.jsx +++ b/frontend/src/pages/DataPage.jsx @@ -0,0 +1,9 @@ +function Data() { + return ( +
        + +
        + ); +} + +export default Data; \ No newline at end of file diff --git a/frontend/src/pages/FAQsPage.jsx b/frontend/src/pages/FAQsPage.jsx index e69de29..a2f0480 100644 --- a/frontend/src/pages/FAQsPage.jsx +++ b/frontend/src/pages/FAQsPage.jsx @@ -0,0 +1,9 @@ +function FAQs() { + return ( +
        + +
        + ); +} + +export default FAQs; \ No newline at end of file diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx new file mode 100644 index 0000000..bd40273 --- /dev/null +++ b/frontend/src/pages/NewsPage.jsx @@ -0,0 +1,9 @@ +function News() { + return ( +
        + +
        + ); +} + +export default News; \ No newline at end of file diff --git a/frontend/src/pages/NewsUpdatePage.jsx b/frontend/src/pages/NewsUpdatePage.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/pages/PrivacyPolicyPage.jsx b/frontend/src/pages/PrivacyPolicyPage.jsx index e69de29..01549cc 100644 --- a/frontend/src/pages/PrivacyPolicyPage.jsx +++ b/frontend/src/pages/PrivacyPolicyPage.jsx @@ -0,0 +1,9 @@ +function PrivacyPolicy() { + return ( +
        + +
        + ); +} + +export default PrivacyPolicy; \ No newline at end of file diff --git a/frontend/src/pages/TermsOfServicePage.jsx b/frontend/src/pages/TermsOfServicePage.jsx index e69de29..1ff3e16 100644 --- a/frontend/src/pages/TermsOfServicePage.jsx +++ b/frontend/src/pages/TermsOfServicePage.jsx @@ -0,0 +1,9 @@ +function TermsOfService() { + return ( +
        + +
        + ); +} + +export default TermsOfService; \ No newline at end of file From 86aff8a161d214077c21409fc138fe20c975a559 Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 12 Mar 2026 23:54:19 -0700 Subject: [PATCH 14/19] feat: Update links in footer to lead to proper pages The links are now NavLink components that lead to the correct pages instead of just being text. Additionally, the CSS for the footer has been updated to make the new layout look better/work for the NavLink tags. --- frontend/src/App.jsx | 10 ++++++++++ frontend/src/components/Footer.jsx | 14 +++++++------- frontend/src/pages/DataPage.jsx | 1 - frontend/src/pages/FAQsPage.jsx | 1 - frontend/src/pages/NewsPage.jsx | 1 - frontend/src/pages/PrivacyPolicyPage.jsx | 1 - frontend/src/pages/TermsOfServicePage.jsx | 1 - frontend/src/styles/home-page.css | 23 +++++++++++++++++++++++ 8 files changed, 40 insertions(+), 12 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 58c5475..5174055 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -8,6 +8,11 @@ import FormPage from './pages/FormPage'; import DashboardPage from './pages/DashboardPage'; import AboutPage from './pages/AboutPage'; import PricingPage from './pages/PricingPage'; +import NewsPage from './pages/NewsPage'; +import DataPage from './pages/DataPage'; +import TermsOfServicePage from './pages/TermsOfServicePage'; +import PrivacyPolicyPage from './pages/PrivacyPolicyPage'; +import FAQsPage from './pages/FAQsPage'; import './styles/styles.css' import './styles/home-page.css' @@ -54,6 +59,11 @@ function App() { } /> } /> } /> + } /> + } /> + } /> + } /> + } />
        ) diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index 996a15d..7d9bbf2 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -53,7 +53,7 @@ function Footer() { Sean San Ved Patel
        -
        +

        Socials/Contacts

        LinkedIn

        Email

        @@ -61,13 +61,13 @@ function Footer() {

        Reddit

        Discord

        -
        +

        Extras

        -

        News

        -

        Data

        -

        Terms of Service

        -

        Privacy Policy

        -

        FAQs

        + isActive ? 'active-link' : undefined}>News + isActive ? 'active-link' : undefined}>Data + isActive ? 'active-link' : undefined}>Terms of Service + isActive ? 'active-link' : undefined}>Privacy Policy + isActive ? 'active-link' : undefined}>FAQs
        -
        ); } diff --git a/frontend/src/pages/FAQsPage.jsx b/frontend/src/pages/FAQsPage.jsx index a2f0480..2d0b36f 100644 --- a/frontend/src/pages/FAQsPage.jsx +++ b/frontend/src/pages/FAQsPage.jsx @@ -1,7 +1,6 @@ function FAQs() { return (
        -
        ); } diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx index bd40273..a9789be 100644 --- a/frontend/src/pages/NewsPage.jsx +++ b/frontend/src/pages/NewsPage.jsx @@ -1,7 +1,6 @@ function News() { return (
        -
        ); } diff --git a/frontend/src/pages/PrivacyPolicyPage.jsx b/frontend/src/pages/PrivacyPolicyPage.jsx index 01549cc..db9b6df 100644 --- a/frontend/src/pages/PrivacyPolicyPage.jsx +++ b/frontend/src/pages/PrivacyPolicyPage.jsx @@ -1,7 +1,6 @@ function PrivacyPolicy() { return (
        -
        ); } diff --git a/frontend/src/pages/TermsOfServicePage.jsx b/frontend/src/pages/TermsOfServicePage.jsx index 1ff3e16..becff8c 100644 --- a/frontend/src/pages/TermsOfServicePage.jsx +++ b/frontend/src/pages/TermsOfServicePage.jsx @@ -1,7 +1,6 @@ function TermsOfService() { return (
        -
        ); } diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index ef70231..03b6cab 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -420,6 +420,29 @@ margin-bottom: 16px; } +#socials-section { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + + #socials-section p { + margin: 0; + margin-bottom: 16px; + } + +#extras-section { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + + #extras-section a { + margin-bottom: 16px; + } + #copyright { display: flex; flex-direction: row; From 8bf84505948484b0993bc5151c1a7f206effab22 Mon Sep 17 00:00:00 2001 From: Sean San Date: Thu, 12 Mar 2026 23:56:45 -0700 Subject: [PATCH 15/19] feat: Add basic content to pages in footer This just outlines the basic content for the pages linked in the footer, including News, Data, Terms of Service, Privacy Policy, and FAQs. The content is simple placeholder text that can be expanded upon later with real time information and features as needed. --- frontend/src/pages/DataPage.jsx | 3 +++ frontend/src/pages/FAQsPage.jsx | 2 ++ frontend/src/pages/NewsPage.jsx | 3 +++ frontend/src/pages/PrivacyPolicyPage.jsx | 3 +++ frontend/src/pages/TermsOfServicePage.jsx | 3 +++ 5 files changed, 14 insertions(+) diff --git a/frontend/src/pages/DataPage.jsx b/frontend/src/pages/DataPage.jsx index 874c8ac..7a823fa 100644 --- a/frontend/src/pages/DataPage.jsx +++ b/frontend/src/pages/DataPage.jsx @@ -1,6 +1,9 @@ function Data() { return (
        +

        Your Data

        +

        Manage your data and privacy settings.

        +

        Here you can view and manage the data we have collected about you, as well as adjust your privacy settings and preferences.

        ); } diff --git a/frontend/src/pages/FAQsPage.jsx b/frontend/src/pages/FAQsPage.jsx index 2d0b36f..d529517 100644 --- a/frontend/src/pages/FAQsPage.jsx +++ b/frontend/src/pages/FAQsPage.jsx @@ -1,6 +1,8 @@ function FAQs() { return (
        +

        Frequently Asked Questions (FAQs)

        +

        Find answers to common questions about The Method.

        ); } diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx index a9789be..e48ecea 100644 --- a/frontend/src/pages/NewsPage.jsx +++ b/frontend/src/pages/NewsPage.jsx @@ -1,6 +1,9 @@ function News() { return (
        +

        News

        +

        Latest news and updates.

        +

        Check back here for the latest news and updates about The Method, including new features, improvements, and other important announcements.

        ); } diff --git a/frontend/src/pages/PrivacyPolicyPage.jsx b/frontend/src/pages/PrivacyPolicyPage.jsx index db9b6df..4878e87 100644 --- a/frontend/src/pages/PrivacyPolicyPage.jsx +++ b/frontend/src/pages/PrivacyPolicyPage.jsx @@ -1,6 +1,9 @@ function PrivacyPolicy() { return (
        +

        Privacy Policy

        +

        Learn about our privacy practices.

        +

        At The Method, we are committed to protecting your privacy. This privacy policy explains how we collect, use, and safeguard your information when you use our platform. Please read it carefully to understand our practices regarding your personal data.

        ); } diff --git a/frontend/src/pages/TermsOfServicePage.jsx b/frontend/src/pages/TermsOfServicePage.jsx index becff8c..271978c 100644 --- a/frontend/src/pages/TermsOfServicePage.jsx +++ b/frontend/src/pages/TermsOfServicePage.jsx @@ -1,6 +1,9 @@ function TermsOfService() { return (
        +

        Terms of Service

        +

        Read our terms of service.

        +

        By using The Method, you agree to our terms of service. Please read them carefully to understand your rights and responsibilities when using our platform.

        ); } From 50287459b92b592b441b223472a2755a8d5d02d7 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 14 Mar 2026 23:35:22 -0700 Subject: [PATCH 16/19] feat: Style NewsPage so each news is a card & update content This makes it so the each news item is displayed as a card with a title, caption, body, and date. The content of the news items has also been updated to be more generic and less specific to any particular product or feature. --- frontend/src/App.jsx | 2 ++ frontend/src/pages/NewsPage.jsx | 47 +++++++++++++++++++++++++++---- frontend/src/styles/news-page.css | 37 ++++++++++++++++++++++++ 3 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 frontend/src/styles/news-page.css diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 5174055..4cf38d0 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -14,12 +14,14 @@ import TermsOfServicePage from './pages/TermsOfServicePage'; import PrivacyPolicyPage from './pages/PrivacyPolicyPage'; import FAQsPage from './pages/FAQsPage'; + import './styles/styles.css' import './styles/home-page.css' import './styles/form-page.css' import './styles/dashboard-page.css' import './styles/about-page.css' import './styles/pricing-page.css' +import './styles/news-page.css' import './styles/contact-page.css' diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx index e48ecea..78027ed 100644 --- a/frontend/src/pages/NewsPage.jsx +++ b/frontend/src/pages/NewsPage.jsx @@ -1,10 +1,45 @@ function News() { - return ( -
        -

        News

        -

        Latest news and updates.

        -

        Check back here for the latest news and updates about The Method, including new features, improvements, and other important announcements.

        -
        + const updates = [ + { + id: "idhere1", + title: "Title goes here", + caption: "Caption would go here", + body: "Example text of what this thing does.", + date: "March 10, 2026 @ 2: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. +

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

          {item.title}

          +

          {item.caption}

          +

          + +

          +
          +

          {item.body}

          +
          +
          • + ))} +
        +
        ); } diff --git a/frontend/src/styles/news-page.css b/frontend/src/styles/news-page.css new file mode 100644 index 0000000..463141a --- /dev/null +++ b/frontend/src/styles/news-page.css @@ -0,0 +1,37 @@ +.news-title { + text-align: center; + margin-bottom: 0.5rem; +} + +.news-intro { + text-align: center; + max-width: 65ch; + margin: 0 auto 1.5rem; +} + +.news-grid { + list-style: none; + padding: 0; + margin: 0; + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); +} + +.news-card { + border: 1px solid #d0d7de; + border-radius: 12px; + padding: 1rem; + background: #fff; +} + +.news-caption { + font-weight: 600; + color: #444; + margin: 0.25rem 0 0.5rem; +} + +.news-date { + font-size: 0.875rem; + color: #666; +} \ No newline at end of file From 2e340c0cf77025b7074a27c0e321636bbaa003ce Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 14 Mar 2026 23:51:42 -0700 Subject: [PATCH 17/19] feat: Style news page cards so they are in a column rather than a grid --- frontend/src/pages/NewsPage.jsx | 14 +++++++++ frontend/src/styles/news-page.css | 47 ++++++++++++++++++------------- 2 files changed, 41 insertions(+), 20 deletions(-) diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx index 78027ed..5a3add9 100644 --- a/frontend/src/pages/NewsPage.jsx +++ b/frontend/src/pages/NewsPage.jsx @@ -14,6 +14,20 @@ 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 ( diff --git a/frontend/src/styles/news-page.css b/frontend/src/styles/news-page.css index 463141a..782eea9 100644 --- a/frontend/src/styles/news-page.css +++ b/frontend/src/styles/news-page.css @@ -1,37 +1,44 @@ .news-title { - text-align: center; - margin-bottom: 0.5rem; + text-align: center; + margin-bottom: 0.5rem; } .news-intro { - text-align: center; - max-width: 65ch; - margin: 0 auto 1.5rem; + text-align: center; + max-width: 65ch; + margin: 0 auto 1.5rem; } .news-grid { - list-style: none; - padding: 0; - margin: 0; - display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.news-grid > li { + width: 60%; } .news-card { - border: 1px solid #d0d7de; - border-radius: 12px; - padding: 1rem; - background: #fff; + border: 1px solid #d0d7de; + border-radius: 12px; + padding: 1rem; + width: 100%; + background: #fff; } .news-caption { - font-weight: 600; - color: #444; - margin: 0.25rem 0 0.5rem; + font-weight: 600; + color: #444; + margin: 0.25rem 0 0.5rem; } .news-date { - font-size: 0.875rem; - color: #666; + font-size: 0.875rem; + color: #666; } \ No newline at end of file From 61dbc703be7edfc593ac11b91d86b9efff078d53 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 15 Mar 2026 00:00:43 -0700 Subject: [PATCH 18/19] feat: Move date to top right corner and allow color theme to update page This moves the date so its in the top right of each news card. This also allows the color theme to update the news page as well when the button is clicked. --- frontend/src/pages/NewsPage.jsx | 7 ++++-- frontend/src/styles/news-page.css | 39 +++++++++++++++++++++++++++---- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx index 5a3add9..cb0495e 100644 --- a/frontend/src/pages/NewsPage.jsx +++ b/frontend/src/pages/NewsPage.jsx @@ -42,8 +42,11 @@ function News() {
      • -

        {item.title}

        -

        {item.caption}

        +
        +

        {item.title}

        +

        {item.caption}

        +
        +

        diff --git a/frontend/src/styles/news-page.css b/frontend/src/styles/news-page.css index 782eea9..6c5da9d 100644 --- a/frontend/src/styles/news-page.css +++ b/frontend/src/styles/news-page.css @@ -1,12 +1,15 @@ +/* ...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 { @@ -22,23 +25,49 @@ .news-grid > li { width: 60%; + min-width: 280px; } .news-card { - border: 1px solid #d0d7de; + border: 1px solid var(--box-border-color); border-radius: 12px; padding: 1rem; width: 100%; - background: #fff; + background-color: var(--card-bg); + color: var(--text-color); +} + +.news-card:hover { + background-color: var(--card-bg-hover); +} + +.news-card header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; +} + +.news-heading h2 { + margin: 0; + color: var(--text-color); } .news-caption { font-weight: 600; - color: #444; + color: var(--text-color); margin: 0.25rem 0 0.5rem; } .news-date { + margin: 0; font-size: 0.875rem; - color: #666; -} \ No newline at end of file + color: var(--text-color); + white-space: nowrap; + text-align: right; +} + +.news-card time { + color: var(--main-accent-color); +} +/* ...existing code... */ \ No newline at end of file From fbeeafa13613eb8629d790a81cf0a81785da8236 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 15 Mar 2026 01:07:33 -0700 Subject: [PATCH 19/19] fix: Change theme popup so themes can be selected directly Before the UI was broken as the button would instead cycle between the 4 themes. Now, the theme buttons in the navbar will directly set the theme to the one that the user clicks on. --- frontend/src/App.jsx | 11 +++-------- frontend/src/styles/news-page.css | 2 +- frontend/src/styles/styles.css | 2 +- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 4cf38d0..2a3fae9 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -41,14 +41,9 @@ function App() { localStorage.setItem("theme", theme); }, [theme]); - // Cycles through: light -> dark -> cream -> light - const toggleTheme = () => { - setTheme(prev => { - if (prev === "light") return "cream"; - if (prev === "cream") return "midnight"; // New step! - if (prev === "midnight") return "dark"; - return "light"; - }); + // Sets theme directly from navbar selection + const toggleTheme = (selectedTheme) => { + setTheme(selectedTheme); }; return ( diff --git a/frontend/src/styles/news-page.css b/frontend/src/styles/news-page.css index 6c5da9d..f758738 100644 --- a/frontend/src/styles/news-page.css +++ b/frontend/src/styles/news-page.css @@ -33,7 +33,7 @@ border-radius: 12px; padding: 1rem; width: 100%; - background-color: var(--card-bg); + background-color: var(--tinted-card-bg); color: var(--text-color); } diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index be7aa8b..ee21709 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -288,7 +288,7 @@ nav { .theme-option:hover { background-color: var(--card-bg-hover); - padding-left: 1.4rem; + padding-left: 1.8rem; } .theme-option.active {