Code-4-Community · janekamata · Feb 21, 2026 · Feb 21, 2026 · Feb 21, 2026 · Feb 21, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <link rel="icon" href="/favicon.ico" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import logo from "./images/logo.svg";
 import { useNavigate } from "react-router-dom";
 import "./external/bcanSatchel/mutators";
+import Button from "./main-page/settings/components/Button";
 
 /**
  * Registered users can log in here
@@ -83,12 +84,12 @@ const Login = observer(() => {
               <div className="h-fit p-4 mt-4">{"    "}</div>
             )}
           </div>
-          <button
+          <Button
+            text="Login"
             type="submit"
-            className="w-full block mt-8 min-w-0 rounded-md grow bg-primary-900 text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
-          >
-            Login
-          </button>
+            onClick={() => {}}
+            className="w-full block grow bg-primary-900 text-white mt-8 text-base placeholder:text-gray-500"
+          />
           <div className="flex items-center justify-between gap-4 mt-8">
             <hr className="border-grey-600 w-[45%]" />
             <div className="text-grey-600">or</div>
@@ -99,7 +100,7 @@ const Login = observer(() => {
             <button
               type="button"
               onClick={() => navigate("/register")}
-              className="inline ml-2 text-secondary-500 text-left"
+              className="inline ml-2 text-secondary-500 text-left hover:underline border-none"
             >
               Sign up
             </button>

diff --git a/frontend/src/custom/RingButton.tsx b/frontend/src/custom/RingButton.tsx
diff --git a/frontend/src/main-page/Footer.tsx b/frontend/src/main-page/Footer.tsx
@@ -1,12 +1,11 @@
 import React from "react";
-import "../styles/Footer.css";
 import { Group, Text, Link } from "@chakra-ui/react";
 import { FooterText } from "../translations/general";
 
 const Footer: React.FC = () => {
   return (
-    <div className="footer">
-      <Group className="text-block">
+    <div className="footer flex flex-col items-center justify-center py-10 px-4 text-base text-grey-700">
+      <Group className="flex flex-col p-2">
         <Text>
           {FooterText.C4C_Motto}
           <Link className="font-medium" variant="underline" href={FooterText.C4C_Link}>
@@ -17,7 +16,7 @@ const Footer: React.FC = () => {
             {FooterText.Org}
           </Link>
         </Text>
-        <Text className="northeastern-uni-caption">{FooterText.NEU}</Text>
+        <Text className="text-sm text-grey-600">{FooterText.NEU}</Text>
       </Group>
     </div>
   );

diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
@@ -14,8 +14,8 @@ function MainPage() {
       <div>
         <NavBar />
       </div>
-      <div className="px-6 lg:px-14 py-8 pt-12 w-full h-screen overflow-y-auto">
-        <div className="min-h-screen mb-16">
+      <div className="px-6 lg:px-10 py-8 pt-12 w-full h-screen overflow-y-auto">
+        <div className="min-h-screen mb-8">
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />
             <Route

diff --git a/frontend/src/main-page/dashboard/CsvExportButton.tsx b/frontend/src/main-page/dashboard/CsvExportButton.tsx
@@ -4,17 +4,19 @@ import { Grant } from "../../../../middle-layer/types/Grant";
 import { ProcessGrantData } from "../../main-page/grants/filter-bar/processGrantData";
 import { observer } from "mobx-react-lite";
 import { getAppStore } from "../../external/bcanSatchel/store";
-import { BiExport } from "react-icons/bi";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
 import Attachment from "../../../../middle-layer/types/Attachment";
 import POC from "../../../../middle-layer/types/POC";
+import Button from "../settings/components/Button";
 // Define the columns for the CSV export, including any necessary formatting.
 const columns: CsvColumn<Grant>[] = [
   { key: "grantId", title: "Grant ID" },
   { key: "organization", title: "Organization" },
   {
     key: "does_bcan_qualify",
     title: "BCAN Qualifies?",
-    formatValue: (value: boolean) => (value !== null ? (value ? "Yes" : "No") : ""),
+    formatValue: (value: boolean) =>
+      value !== null ? (value ? "Yes" : "No") : "",
   },
   { key: "status", title: "Status" },
   {
@@ -25,18 +27,19 @@ const columns: CsvColumn<Grant>[] = [
   {
     key: "grant_start_date",
     title: "Grant Start Date",
-    formatValue: (value: string) => (value ? new Date(value).toLocaleDateString() : ""),
+    formatValue: (value: string) =>
+      value ? new Date(value).toLocaleDateString() : "",
   },
   {
     key: "application_deadline",
     title: "Application Deadline",
-    formatValue: (value: string) => (value ? new Date(value).toLocaleDateString() : ""),
+    formatValue: (value: string) =>
+      value ? new Date(value).toLocaleDateString() : "",
   },
   {
     key: "report_deadlines",
     title: "Report Deadlines",
-    formatValue: (value?: string[]) =>
-      value?.length ? value.join(", ") : "",
+    formatValue: (value?: string[]) => (value?.length ? value.join(", ") : ""),
   },
   {
     key: "description",
@@ -59,20 +62,27 @@ const columns: CsvColumn<Grant>[] = [
   {
     key: "bcan_poc",
     title: "BCAN POC",
-    formatValue: (value: POC) => 
-      value && value.POC_name && value.POC_email ?
-      `${value.POC_name}${value.POC_email ? ` (${value.POC_email})` : ""}` : "",
+    formatValue: (value: POC) =>
+      value && value.POC_name && value.POC_email
+        ? `${value.POC_name}${value.POC_email ? ` (${value.POC_email})` : ""}`
+        : "",
   },
   {
     key: "attachments",
     title: "Attachments",
     formatValue: (attachments: Attachment[]) =>
-      attachments?.length ? attachments.map((a) => a.url).filter((u) => u).join(" | ") : "",
+      attachments?.length
+        ? attachments
+            .map((a) => a.url)
+            .filter((u) => u)
+            .join(" | ")
+        : "",
   },
   {
     key: "isRestricted",
     title: "Restricted?",
-    formatValue: (value: boolean) => (value !== null ? (value ? "Yes" : "No") : ""),
+    formatValue: (value: boolean) =>
+      value !== null ? (value ? "Yes" : "No") : "",
   },
 ];
 
@@ -100,22 +110,20 @@ const CsvExportButton: React.FC = observer(() => {
       columns,
       `BCAN Data ${(yearFilter ?? []).join("_")} as of ${
         new Date().toISOString().split("T")[0]
-      }`
+      }`,
     );
     setIsProcessing(false);
   };
 
   return (
-    <button
-      className="dashboard-button text-xs lg:text-sm bg-grey-400 flex justify-between items-center"
-      type="button"
+    <Button
+      text={isProcessing ? "Exporting..." : "Export CSV"}
       onClick={onClickDownload}
       disabled={isProcessing}
-      title="Export the grants data including any applied filters."
-    >
-      {isProcessing ? "Exporting..." : "Export CSV"}
-      <BiExport className="ms-2 text-sm " />
-    </button>
+      logo={faDownload}
+      logoPosition="right"
+      className="text-sm lg:text-base bg-white border-grey-500 flex justify-between items-center"
+    />
   );
 });
 

diff --git a/frontend/src/main-page/dashboard/Dashboard.tsx b/frontend/src/main-page/dashboard/Dashboard.tsx
@@ -47,10 +47,12 @@ const Dashboard = observer(() => {
 
   return (
     <div className="dashboard-page">
-      <div className="flex flex-row justify-start gap-4 mb-12 items-center">
+      <div className="flex flex-wrap flex-row justify-start gap-4 mb-12 items-center">
         <div className="text-3xl lg:text-4xl font-bold mr-4">Dashboard</div>
+        <div className="flex flex-wrap flex-row gap-4">
         <DateFilter />
         <CsvExportButton />
+        </div>
       </div>
 
       <div className="gap-3 lg:gap-5 grid grid-cols-4">

diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx
@@ -2,9 +2,10 @@ import { useState, useEffect } from "react";
 import { updateYearFilter } from "../../external/bcanSatchel/actions";
 import { getAppStore } from "../../external/bcanSatchel/store";
 import { observer } from "mobx-react-lite";
-import { FaChevronDown } from "react-icons/fa";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import Button from "../settings/components/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const DateFilter: React.FC = observer(() => {
   const { allGrants, yearFilter } = getAppStore();
@@ -52,30 +53,26 @@ const DateFilter: React.FC = observer(() => {
 
   return (
     <div className="flex flex-col space-y-2 w-64 lg:w-80 relative">
-      <button
-        className="dashboard-button bg-white inline-flex items-center justify-between px-4 py-2  text-xs lg:text-sm text-center text-white bg-blue-700 rounded-lg"
-        type="button"
-        onClick={() => setShowDropdown(!showDropdown)}
-      >
-        <span className="flex flex-row overflow-hidden whitespace-nowrap text-ellipsis">
-          {selectedYears.length === 0
+      <Button
+        text={selectedYears.length === 0
             ? "Select years"
             : selectedYears.length === uniqueYears.length
               ? "Select years (showing all)"
               : selectedYears.join(", ")}
-        </span>
-
-        <FaChevronDown className="ms-2 text-sm" />
-      </button>
+        onClick={() => setShowDropdown(!showDropdown)}
+        logo={faChevronDown}
+        logoPosition="right"
+        className="bg-white border-grey-500 inline-flex items-center justify-between text-sm lg:text-base"
+      />
       <div
-        className={`z-[100] absolute  top-6 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-gray-200 shadow-lg`}
+        className={`z-[100] absolute  top-10 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-gray-200 shadow-lg`}
       >
         <button
           className="close-button absolute top-3 right-4 text-lg"
           onClick={() => setShowDropdown(false)}
           aria-label="Close notifications"
         >
-          <FontAwesomeIcon icon={faXmark} className="text-lg" />
+          <FontAwesomeIcon icon={faXmark} className="text-lg hover:text-red" />
         </button>
         <ul
           className="h-42 p-4 pb-3 overflow-y-auto text-sm "

diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx
@@ -1,11 +1,8 @@
-// import GrantList from "./grant-list/GrantList.tsx";
-
 import AddGrantButton from "./new-grant/AddGrant.tsx";
 import GrantSearch from "./filter-bar/GrantSearch.tsx";
 import NewGrantModal from "./new-grant/NewGrantModal.tsx";
 import { useEffect, useState } from "react";
 import { Grant } from "../../../../middle-layer/types/Grant.ts";
-// import FilterBar from "./filter-bar/FilterBar.tsx";
 import GrantItem from "./grant-view/GrantView.tsx";
 import { useAuthContext } from "../../context/auth/authContext";
 import {
@@ -24,6 +21,7 @@ import { Navigate } from "react-router-dom";
 import BellButton from "../navbar/Bell.tsx";
 import GrantCard from "./grant-list/GrantCard.tsx";
 import { api } from "../../api.ts";
+import Button from "../settings/components/Button.tsx";
 
 // still needed potentially?
 interface GrantPageProps {
@@ -115,14 +113,12 @@ function GrantPage({}: GrantPageProps) {
           <BellButton setOpenModal={setOpenModal} openModal={openModal} />
         </div>
         <GrantSearch />
-        <div className="flex w-full justify-between p-4 gap-4">
-          <span className="text-lg font-semibold">
-            FILTERS GO HERE
-          </span>
+        <div className="flex w-full justify-between py-2 gap-4">
+            <Button text="Filters Coming Soon" onClick={() => {}} className="border-2 border-grey-500 bg-white" />
           <AddGrantButton onClick={() => setShowNewGrantModal(true)} />
         </div>
 
-        <div className="flex flex-row w-full gap-4 justify-between">
+        <div className="flex flex-row w-full gap-2 justify-between mt-4">
           <div className="flex flex-col w-[33%] h-[150vh] overflow-y-scroll pr-2">
             {grants.map((grant) => (
               <GrantCard