From 5bbbc2b795a92b894fbdcc7ad7b19b3d8903f7d6 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Mon, 2 Feb 2026 23:37:14 -0500 Subject: [PATCH 01/12] Replacing colors --- frontend/src/Account.tsx | 97 ---------- frontend/src/Login.tsx | 8 +- frontend/src/Profile.tsx | 175 ------------------ frontend/src/Register.tsx | 12 +- frontend/src/custom/ActionConfirmation.tsx | 3 +- .../dashboard/Charts/BarYearGrantStatus.tsx | 7 +- .../dashboard/Charts/DonutMoneyApplied.tsx | 17 +- .../dashboard/Charts/LineChartSuccessRate.tsx | 13 +- .../Charts/StackedBarMoneyReceived.tsx | 13 +- .../main-page/dashboard/CsvExportButton.tsx | 2 +- .../src/main-page/dashboard/DateFilter.tsx | 2 +- .../main-page/dashboard/styles/Dashboard.css | 14 +- .../main-page/grants/filter-bar/FilterBar.tsx | 7 +- .../grants/filter-bar/GrantSearch.tsx | 1 - .../grant-details/CostBenefitAnalysis.tsx | 12 +- .../main-page/grants/grant-list/GrantItem.tsx | 24 +-- .../grants/grant-list/StatusIndicator.tsx | 1 - .../grants/new-grant/NewGrantModal.tsx | 57 +++--- .../grants/styles/CalendarDropdown.css | 4 +- .../main-page/grants/styles/GrantButton.css | 2 +- .../main-page/grants/styles/GrantDetails.css | 2 +- .../src/main-page/grants/styles/GrantItem.css | 21 +-- .../src/main-page/grants/styles/GrantList.css | 2 +- .../src/main-page/grants/styles/GrantPage.css | 2 +- .../main-page/grants/styles/GrantSearch.css | 2 +- .../main-page/grants/styles/NewGrantModal.css | 8 +- .../main-page/grants/styles/UserDropdown.css | 10 +- .../main-page/header/styles/AccountInfo.css | 6 +- .../src/main-page/header/styles/Header.css | 2 +- .../src/main-page/users/ApprovedUserCard.tsx | 4 +- .../src/main-page/users/UserPositionCard.tsx | 6 +- frontend/src/main-page/users/Users.tsx | 8 +- frontend/src/styles/Footer.css | 5 +- frontend/src/styles/button.css | 6 +- frontend/src/styles/index.css | 21 ++- frontend/tailwind.config.ts | 4 + 36 files changed, 146 insertions(+), 434 deletions(-) delete mode 100644 frontend/src/Account.tsx delete mode 100644 frontend/src/Profile.tsx diff --git a/frontend/src/Account.tsx b/frontend/src/Account.tsx deleted file mode 100644 index d1ecfc0f..00000000 --- a/frontend/src/Account.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from "react"; -import { observer } from "mobx-react-lite"; -import { useAuthContext } from "./context/auth/authContext"; -import Profile from "./Profile"; - -/** - * Account page that renders the Profile component as a nested child - * Provides navigation options for the user to logout, or continue into the app. - */ -const Account = observer(() => { - const { user } = useAuthContext(); - - return ( -
- {/* Blurred background layer */} -
- - {/* Foreground container */} -
-
-

Welcome, {user?.userId}

- -
-
-
- ); -}); - -export default Account; - -const styles: { [key: string]: React.CSSProperties } = { - pageContainer: { - position: "relative", - width: "100vw", - height: "100vh", - margin: 0, - padding: 0, - overflow: "hidden", - display: "flex", - justifyContent: "center", - alignItems: "center", - }, - backgroundLayer: { - position: "absolute", - top: 0, - left: 0, - width: "100%", - height: "100%", - zIndex: 0, - background: ` - linear-gradient(135deg, - rgb(164, 183, 251) 0%, - rgb(212, 240, 255) 47%, rgb(111, 147, 237) 96%) - `, - backgroundSize: "cover", - backgroundBlendMode: "overlay", - filter: "blur(7px)", - }, - foregroundContent: { - position: "relative", - zIndex: 1, - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - accountContainer: { - width: "100%", - padding: "3rem", - backgroundColor: "rgba(255, 255, 255, 0.8)", // partially transparent - borderRadius: "8px", - boxShadow: "0 2px 10px rgba(0,0,0,0.15)", - display: "flex", - flexDirection: "column", - }, - topRow: { - display: "flex", - width: "100%", - justifyContent: "flex-end", - marginBottom: "1.5rem", - }, - navButton: { - marginLeft: "0.5rem", - padding: "1.2rem", - fontSize: "1.2rem", - borderRadius: "4px", - cursor: "pointer", - backgroundColor: "#0b303b", - border: "1px solid #ccc", - color: "#fff", - }, - heading: { - marginBottom: "2rem", - fontSize: "2.2rem", - fontWeight: 500, - textAlign: "center", - }, -}; diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx index 2f8ae703..1de62118 100644 --- a/frontend/src/Login.tsx +++ b/frontend/src/Login.tsx @@ -78,7 +78,7 @@ const Login = observer(() => {
{failure ? ( -
+
Your password is incorrect or this account doesn't exist.
) : ( @@ -93,9 +93,9 @@ const Login = observer(() => { Login
-
-
or
-
+
+
or
+
Don't have an account?{" "} diff --git a/frontend/src/Profile.tsx b/frontend/src/Profile.tsx deleted file mode 100644 index 641db377..00000000 --- a/frontend/src/Profile.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import React, { useState } from "react"; -import { observer } from "mobx-react-lite"; -import { useAuthContext } from "./context/auth/authContext"; -import { updateUserProfile } from "./external/bcanSatchel/actions"; -import { toJS } from 'mobx'; -import { Link } from "react-router-dom"; -import { api } from "./api"; -import { UserStatus } from "../../middle-layer/types/UserStatus"; - -/** - * Current logged in user's profile - * Information can be updated for the profile here. - */ -const Profile = observer(() => { - const { user } = useAuthContext(); - const [email, setEmail] = useState(user?.email || ""); - const [position, setPosition] = useState(user?.position || ""); - - console.log(toJS(user)) - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - try { - const response = await api("/auth/update-profile", { - method: "POST", - headers: { - "Content-Type": "application/json", - // TODO: Bearer token guarded by Auth - // Authorization: `Bearer ${user?.accessToken ?? ""}`, - }, - body: JSON.stringify({ - username: user?.userId, - email, - position: position, - }), - }); - - if (!response.ok) { - const errorData = await response.json(); - alert(errorData.message || "Failed to update profile."); - return; - } - - // Optionally parse the updated item returned - // const updatedData = await response.json(); - - // Update local store so changes reflect immediately in the UI - // Conditional update semantics based on valid non-null 'User' object available - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - user && updateUserProfile({ - ...user, - email, - position: position as UserStatus, - }); - - alert("Profile updated successfully."); - } catch (error) { - console.error("Error updating profile:", error); - alert("An error occurred while updating your profile."); - } - }; - - return ( -
-

Profile

- - {/* Username (read-only) */} -
- - {user?.userId} -
- - {/* Email */} -
- - setEmail(e.target.value)} - required - /> -
- - {/* Biography */} -
- -