diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5e90751d..cb89a916 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,6 @@ /** * App.tsx - * Renders with . + * Renders with . */ import "./styles/App.css"; import { ChakraProvider, defaultSystem } from "@chakra-ui/react"; @@ -9,11 +9,11 @@ import { observer } from "mobx-react-lite"; // Register store and mutators import "./external/bcanSatchel/mutators"; -import AnimatedRoutes from "./animations/AnimatedRoutes"; +import AppRoutes from "./routes/AppRoutes"; import Footer from "./main-page/Footer"; /** - * Main app component that renders animated routes + * Main app component that renders routes */ const App = observer(() => { return ( @@ -21,7 +21,7 @@ const App = observer(() => {
- +
diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx index 9de21546..2f68bf1b 100644 --- a/frontend/src/Login.tsx +++ b/frontend/src/Login.tsx @@ -53,7 +53,7 @@ const Login = observer(() => { onChange={(e) => setUsername(e.target.value)} placeholder="Enter your email" style={styles.inputContainer} - className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]" + className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray" /> @@ -71,7 +71,7 @@ const Login = observer(() => { onChange={(e) => setPassword(e.target.value)} placeholder="Enter your password" style={styles.inputContainer} - className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]" + className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray" /> diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx index 58fe0a11..8f45fe40 100644 --- a/frontend/src/Register.tsx +++ b/frontend/src/Register.tsx @@ -112,7 +112,7 @@ const Register = observer(() => { onChange={(e) => setUsername(e.target.value)} placeholder="Enter your username" style={styles.inputContainer} - className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]" + className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray" /> @@ -134,7 +134,7 @@ const Register = observer(() => { ? styles.errorItem : styles.inputContainer } - className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]" + className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray" /> @@ -156,7 +156,7 @@ const Register = observer(() => { ? styles.errorItem : styles.inputContainer } - className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]" + className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray" /> @@ -178,7 +178,7 @@ const Register = observer(() => { ? styles.errorItem : styles.inputContainer } - className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]" + className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray" /> diff --git a/frontend/src/animations/transitions.css b/frontend/src/animations/transitions.css deleted file mode 100644 index 42e9210d..00000000 --- a/frontend/src/animations/transitions.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Fade-in: when a route enters */ -.fade-enter { - opacity: 0; - } - .fade-enter.fade-enter-active { - opacity: 1; - transition: opacity 0.4s ease-in-out; - } - - /* Fade-out: when a route exits */ - .fade-exit { - opacity: 1; - } - .fade-exit.fade-exit-active { - opacity: 0; - transition: opacity 0.4s ease-in-out; - } - \ No newline at end of file diff --git a/frontend/src/main-page/Footer.tsx b/frontend/src/main-page/Footer.tsx index dc66b3b6..d713ac4d 100644 --- a/frontend/src/main-page/Footer.tsx +++ b/frontend/src/main-page/Footer.tsx @@ -1,32 +1,27 @@ -import React from 'react'; -import '../styles/Footer.css' -import { Group, Text } from '@chakra-ui/react'; -import { FooterText } from '../translations/general'; +import React from "react"; +import "../styles/Footer.css"; +import { Group, Text, Link } from "@chakra-ui/react"; +import { FooterText } from "../translations/general"; +import tailwindConfig from "../../tailwind.config.js"; const Footer: React.FC = () => { - return ( -
-{ - /* TODO: Add BCAN Quick Links -
- - - bostonclimateaction website - - -
- */ -} - - - {FooterText.Motto} - - - {FooterText.NEU} - - -
- ) -} + return ( +
+ + + {FooterText.C4C_Motto} + + {FooterText.C4C} + {" "} + for{" "} + + {FooterText.Org} + + + {FooterText.NEU} + +
+ ); +}; -export default Footer; \ No newline at end of file +export default Footer; diff --git a/frontend/src/main-page/dashboard/Dashboard.tsx b/frontend/src/main-page/dashboard/Dashboard.tsx index b780b940..172b7e38 100644 --- a/frontend/src/main-page/dashboard/Dashboard.tsx +++ b/frontend/src/main-page/dashboard/Dashboard.tsx @@ -10,6 +10,7 @@ import { updateFilter, updateEndDateFilter, updateStartDateFilter, + updateSearchQuery, } from "../../external/bcanSatchel/actions"; import { getAppStore } from "../../external/bcanSatchel/store"; import BarYearGrantStatus from "./Charts/BarYearGrantStatus"; @@ -26,6 +27,7 @@ const Dashboard = observer(() => { updateFilter(null); updateEndDateFilter(null); updateStartDateFilter(null); + updateSearchQuery(""); }, []); const { yearFilter, allGrants } = getAppStore(); diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx index 91735bcf..a50c8c74 100644 --- a/frontend/src/main-page/grants/GrantPage.tsx +++ b/frontend/src/main-page/grants/GrantPage.tsx @@ -11,6 +11,7 @@ import { useAuthContext } from "../../context/auth/authContext"; import { updateEndDateFilter, updateFilter, + updateSearchQuery, updateStartDateFilter, updateYearFilter, } from "../../external/bcanSatchel/actions.ts"; @@ -41,6 +42,7 @@ function GrantPage({ showOnlyMyGrants = false }: GrantPageProps) { updateFilter(null); updateEndDateFilter(null); updateStartDateFilter(null); + updateSearchQuery(""); }, []); useEffect(() => { diff --git a/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx b/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx index 914224c9..adcb3ce8 100644 --- a/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx +++ b/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx @@ -1,43 +1,16 @@ import { IoIosSearch } from "react-icons/io"; -import { - // useEffect, - useState } from "react"; +import { useState } from "react"; import Fuse from "fuse.js"; -import { updateSearchQuery } from "../../../external/bcanSatchel/actions"; +import { updateSearchQuery } from "../../../external/bcanSatchel/actions"; +import { getAppStore } from "../../../external/bcanSatchel/store"; import { Grant } from "../../../../../middle-layer/types/Grant"; -// import { api } from "../../../api"; import { Input } from "@chakra-ui/react"; -import "../styles/GrantSearch.css" - +import "../styles/GrantSearch.css"; function GrantSearch() { - const [userInput, setUserInput] = useState(""); + const [userInput, setUserInput] = useState(getAppStore().searchQuery || ""); // @ts-ignore const [grants, _setGrants] = useState([]); - // const [showDropdown, setShowDropdown] = useState(false); - // const [dropdownGrants, setDropdownGrants] = useState([]); - - // useEffect(() => { - // fetchGrants(); - // document.addEventListener("click", handleClickOutside); - // return () => { - // document.removeEventListener("click", handleClickOutside); - // }; - // }, []); - - // const fetchGrants = async () => { - // try { - // const response = await api(`/grant`, { method: "GET" }); - // const data: Grant[] = await response.json(); - // const formattedData: Grant[] = data.map((grant: any) => ({ - // ...grant, - // organization_name: grant.organization || "Unknown Organization", - // })); - // setGrants(formattedData); - // } catch (error) { - // console.error("Error fetching grants:", error); - // } - // }; const handleInputChange = (e: React.ChangeEvent) => { setUserInput(e.target.value); @@ -46,8 +19,6 @@ function GrantSearch() { const performSearch = (query: string) => { if (!query) { - // setDropdownGrants([]); - // setShowDropdown(false); updateSearchQuery(""); return; } @@ -55,31 +26,11 @@ function GrantSearch() { keys: ["organization_name"], threshold: 0.3, }); - // const results = + // const results = fuse.search(query).map((res) => res.item); updateSearchQuery(query); - - // setDropdownGrants(results.slice(0, 5)); - // setShowDropdown(true); }; - // const handleSelectGrant = (selectedGrant: Grant) => { - // setUserInput(selectedGrant.organization); - // updateSearchQuery(selectedGrant.organization); - // // setShowDropdown(false); - // onGrantSelect?.(selectedGrant); - // }; - - // const handleClickOutside = (event: MouseEvent) => { - // const target = event.target as HTMLElement; - // // if ( - // // !target.closest(".search-container") && - // // !target.closest(".dropdown-container") - // // ) { - // // setShowDropdown(false); - // // } - // }; - return (
@@ -106,33 +57,13 @@ function GrantSearch() { className="search-input" onChange={handleInputChange} value={userInput} - // onFocus={() => setShowDropdown(dropdownGrants.length > 0)} style={{ paddingLeft: "2rem" }} // make room for the icon onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); - // setShowDropdown(false); } }} /> - - {/* {showDropdown && ( -
- {dropdownGrants.length > 0 ? ( - dropdownGrants.map((grant, index) => ( -
handleSelectGrant(grant)} - > - {grant.organization} -
- )) - ) : ( -
No results found
- )} -
- )} */}
diff --git a/frontend/src/animations/AnimatedRoutes.tsx b/frontend/src/routes/AppRoutes.tsx similarity index 81% rename from frontend/src/animations/AnimatedRoutes.tsx rename to frontend/src/routes/AppRoutes.tsx index 24da5a63..e2260604 100644 --- a/frontend/src/animations/AnimatedRoutes.tsx +++ b/frontend/src/routes/AppRoutes.tsx @@ -1,8 +1,4 @@ import { Routes, Route, useLocation, Navigate } from "react-router-dom"; -// import { TransitionGroup, CSSTransition } from "react-transition-group"; - -// static transitions sheet -import "./transitions.css"; import { observer } from "mobx-react-lite"; import { useAuthContext } from "../context/auth/authContext"; @@ -14,11 +10,10 @@ import { getAppStore } from "../external/bcanSatchel/store" import RestrictedPage from "../main-page/restricted/RestrictedPage"; /** - * AnimatedRoutes: - * - Wraps routes with CSSTransition + TransitionGroup - * - Applies .fade-enter / .fade-exit transitions from transitions.css + * AppRoutes: + * - Handles routing and route protection based on authentication status. */ -const AnimatedRoutes = observer(() => { +const AppRoutes = observer(() => { const location = useLocation(); const { isAuthenticated } = useAuthContext(); const user = getAppStore().user; @@ -61,4 +56,4 @@ const AnimatedRoutes = observer(() => { ); }); -export default AnimatedRoutes; \ No newline at end of file +export default AppRoutes; \ No newline at end of file diff --git a/frontend/src/translations/general.ts b/frontend/src/translations/general.ts index b487e1d6..5d0a3a16 100644 --- a/frontend/src/translations/general.ts +++ b/frontend/src/translations/general.ts @@ -1,6 +1,10 @@ export enum FooterText { - Motto = "Made with love by Code4Community", - NEU = "Northeastern University, Boston, MA" + C4C_Motto = "Made with love by ", + C4C = "Code4Community", + C4C_Link = "https://www.c4cneu.com/", + NEU = "Northeastern University, Boston, MA", + Org = "Boston Climate Action Network", + Org_Link = "https://bostonclimateaction.org/", } // Maps Enum to String Representation for Future Accessibility Work diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 4d78e2c4..fcc9b110 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -16,6 +16,7 @@ export default { 'light-gray': '#F8F8F8', 'pale-orange':'#FFCEB6', 'white-orange': '#FFF1EB', + 'medium-gray': '#D9D9D9', }, fontFamily: { sans: ['Montserrat', 'sans-serif'],