Skip to content

314 dev integration styling fixes #315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
janekamata merged 4 commits into from
Feb 15, 2026
Merged

314 dev integration styling fixes #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ed204f
Stylign fixes
janekamata Feb 15, 2026
cb19efb
Fixing nav bar scroll with footer
janekamata Feb 15, 2026
16f3a0a
Spacing
janekamata Feb 15, 2026
a58a015
Background grey
janekamata Feb 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { observer } from "mobx-react-lite";
// Register store and mutators
import "./external/bcanSatchel/mutators";
import AppRoutes from "./routes/AppRoutes";
import Footer from "./main-page/Footer";

/**
* Main app component that renders routes
Expand All @@ -23,7 +22,6 @@ const App = observer(() => {
<div className="app-container">
<AppRoutes />
</div>
<Footer/>
</div>
</ChakraProvider>
</Router>
Expand Down
41 changes: 25 additions & 16 deletions frontend/src/main-page/MainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,34 @@ import Users from "./users/Users";
import RestrictedPage from "./restricted/RestrictedPage";
import CashFlowPage from "./cash-flow/CashFlowPage";
import Settings from "./settings/Settings";

import Footer from "./Footer";

function MainPage() {

return (
<div className="w-full h-screen flex flex-row">
<NavBar/>
<div className="flex-1 overflow-auto">
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/all-grants" element={<GrantPage showOnlyMyGrants={false} />} />
<Route path="/my-grants" element={<GrantPage showOnlyMyGrants={true} />} />
<Route path="/users" element={<Users />} />
<Route path="/restricted" element={<RestrictedPage />} />
<Route path="/cash-flow" element={<CashFlowPage />} />
<Route path="/settings" element={<Settings />} />
{/* fallback route */}
<Route path="*" element={<GrantPage />} />
</Routes>
<div className="w-full flex-row flex h-screen overflow-hiden">
<div>
<NavBar />
</div>
<div className="px-6 lg:px-16 py-8 pt-16 w-full h-screen overflow-y-auto">
<div className="min-h-screen mb-16">
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route
path="/all-grants"
element={<GrantPage showOnlyMyGrants={false} />}
/>
<Route
path="/my-grants"
element={<GrantPage showOnlyMyGrants={true} />}
/>
<Route path="/users" element={<Users />} />
<Route path="/restricted" element={<RestrictedPage />} />
<Route path="/cash-flow" element={<CashFlowPage />} />
<Route path="/settings" element={<Settings />} />
<Route path="*" element={<GrantPage />} />
</Routes>
</div>
<Footer />
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
};

return (
<div className="flex flex-col align-center h-full">
<div className="flex flex-col align-center h-full relative">
<div className={`w-full ${width > 250 ? "mb-0" : "mb-14"}`}>
{/* Title */}
<div className="text-md lg:text-lg font-semibold text-left h-full align">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const LineChartSuccessRate = observer(({ grants }: { grants: Grant[] }) => {
data.sort((a, b) => a.date.getTime() - b.date.getTime());

return (
<div className="h-full">
<div className="h-full relative">
{/* Title */}
<div className="text-md lg:text-lg w-full text-left font-semibold align absolute">
Success Rate by Year
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/main-page/dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,14 @@ const Dashboard = observer(() => {
const { grants } = ProcessGrantData();

return (
<div className="dashboard-page px-12 py-4 mb-8 ">
<div className="flex flex-row justify-start gap-4 mb-12 mt-12 items-center">
<div className="text-3xl font-bold mr-4">Dashboard</div>
<div className="dashboard-page">
<div className="flex flex-row justify-start gap-4 mb-12 items-center">
<div className="text-3xl lg:text-4xl font-bold mr-4">Dashboard</div>
<DateFilter />
<CsvExportButton />
</div>

<div className="gap-5 grid grid-cols-4">
<div className="gap-3 lg:gap-5 grid grid-cols-4">
{/* ROW 1 */}
<div className="col-span-2 h-full">
<KPICards
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/main-page/dashboard/DateFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const DateFilter: React.FC = observer(() => {
};

return (
<div className="flex flex-col space-y-2 w-64 lg:w-80">
<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"
Expand All @@ -68,7 +68,7 @@ const DateFilter: React.FC = observer(() => {
<FaChevronDown className="ms-2 text-sm" />
</button>
<div
className={`z-[100] absolute top-56 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-gray-200 shadow-lg`}
className={`z-[100] absolute top-6 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"
Expand All @@ -86,7 +86,7 @@ const DateFilter: React.FC = observer(() => {
<div className="flex items-center p-2 rounded-sm">
<input
type="checkbox"
className="w-4 h-4 rounded-sm accent-primary-900 bg-grey-200"
className="w-4 h-4 rounded-sm accent-primary-900 bg-grey-150"
id={year.toString()}
value={year}
checked={selectedYears.includes(year)}
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/main-page/dashboard/styles/Dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,11 @@ input[type="checkbox"]:checked::before {
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: var(--color-grey-200);
background-color: var(--color-grey-150);
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 1em;
}

.chart-container {
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
placeholder="Enter rate"
value={hourlyRate}
onChange={(e) => setHourlyRate(e.target.value)}
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-grey-200"
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-grey-150"
/>
</div>

Expand All @@ -85,7 +85,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
console.log('Time per report changed to:', e.target.value);
setTimePerReport(e.target.value);
}}
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-grey-200"
className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-grey-150"
/>
</div>

Expand All @@ -102,7 +102,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
<span className="text-sm font-semibold"> Net Benefit:</span>
<div
onClick={calculateNetBenefit}
className={`w-1/2 py-2 px-4 rounded-md bg-grey-200 border border-black overflow-auto text-center whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] ${
className={`w-1/2 py-2 px-4 rounded-md bg-grey-150 border border-black overflow-auto text-center whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] ${
netBenefit !== null ? 'text-black' : 'text-gray-500'
}`}
>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/main-page/grants/grant-list/GrantItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
>
<MdOutlinePerson2 className="w-1/5 h-full p-1" />
<div
className="w-4/5 border-l border-black rounded-r-md bg-grey-200"
className="w-4/5 border-l border-black rounded-r-md bg-grey-150"
>
<h2
className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded flex items-center"
Expand Down Expand Up @@ -405,7 +405,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
>
<MdOutlinePerson2 className="w-1/5 h-full p-1" />
<div
className="w-4/5 border-l border-black bg-grey-200 rounded-r-md"
className="w-4/5 border-l border-black bg-grey-150 rounded-r-md"
>
<h2
className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded-md flex items-center"
Expand Down Expand Up @@ -517,7 +517,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
{attachment.url && (
<div
key={index}
className="items-center truncate overflow-x-scroll overflow-hidden text-left justify-center w-full rounded-md p-2 mb-2 bg-grey-200 h-[42px] border border-black text-black"
className="items-center truncate overflow-x-scroll overflow-hidden text-left justify-center w-full rounded-md p-2 mb-2 bg-grey-150 h-[42px] border border-black text-black"
>
<a
href={attachment.url}
Expand Down Expand Up @@ -565,7 +565,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
Description
</label>
<div
className="h-64 bg-grey-200 flex w-full rounded-md p-5 overflow-auto border border-black text-black"
className="h-64 bg-grey-150 flex w-full rounded-md p-5 overflow-auto border border-black text-black"
>
{curGrant.description}
</div>
Expand Down
36 changes: 18 additions & 18 deletions frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ const NewGrantModal: React.FC<{
Organization Name *
</label>
<input
className="block w-full h-[42px] bg-grey-200 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight"
className="block w-full h-[42px] bg-grey-150 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight"
id="grid-first-name"
type="text"
placeholder="Type Here"
Expand All @@ -494,7 +494,7 @@ const NewGrantModal: React.FC<{
Application Date *
</label>
<input
className={`appearance-none block w-full h-[42px] bg-grey-200 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
className={`appearance-none block w-full h-[42px] bg-grey-150 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
applicationDate ? "text-black" : "text-gray-500"
}`}
id="grid-city"
Expand All @@ -516,7 +516,7 @@ const NewGrantModal: React.FC<{
Grant Start Date *
</label>
<input
className={`w-full appearance-none block w-full h-[42px] bg-grey-200 placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
className={`w-full appearance-none block w-full h-[42px] bg-grey-150 placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
grantStartDate ? "text-black" : "text-gray-500"
}`}
id="grid-city"
Expand All @@ -540,7 +540,7 @@ const NewGrantModal: React.FC<{
<input
type="number"
min="0"
className="appearance-none block w-full h-[42px] bg-grey-200 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500"
className="appearance-none block w-full h-[42px] bg-grey-150 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500"
id="grid-city"
value={estimatedCompletionTimeInHours}
onChange={(e) =>
Expand Down Expand Up @@ -573,7 +573,7 @@ const NewGrantModal: React.FC<{
<div key={index} className="flex gap-2 mb-2 w-full">
<input
key={index}
className="flex-1 min-w-0 h-[42px] bg-grey-200 text-black rounded border border-black"
className="flex-1 min-w-0 h-[42px] bg-grey-150 text-black rounded border border-black"
type="date"
value={
date
Expand Down Expand Up @@ -613,7 +613,7 @@ const NewGrantModal: React.FC<{
Timeline (in years) *
</label>
<input
className="appearance-none block w-full h-[42px] bg-grey-200 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none"
className="appearance-none block w-full h-[42px] bg-grey-150 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none"
type="number"
min="0"
placeholder="Type Here"
Expand All @@ -631,7 +631,7 @@ const NewGrantModal: React.FC<{
Amount (in $) *
</label>
<CurrencyInput
className="appearance-none block w-full h-[42px] mb-[2px] bg-grey-200 text-gray-700 border border-black rounded px-4 leading-tight focus:outline-none "
className="appearance-none block w-full h-[42px] mb-[2px] bg-grey-150 text-gray-700 border border-black rounded px-4 leading-tight focus:outline-none "
min={0}
decimalsLimit={2}
placeholder="Type Here"
Expand Down Expand Up @@ -662,7 +662,7 @@ const NewGrantModal: React.FC<{
}}
placeholder="Name"
/>
<input className="w-full h-[48px] bg-grey-200 text-gray-700 rounded border border-black"
<input className="w-full h-[48px] bg-grey-150 text-gray-700 rounded border border-black"
placeholder="e-mail"
value={bcanPocEmail}
readOnly
Expand All @@ -686,14 +686,14 @@ const NewGrantModal: React.FC<{
<MdOutlinePerson2 className="sm:p-1 lg:p-2 w-1/4 h-full" />
<div className="w-3/4">
<input
className="w-full h-[42px] bg-grey-200 text-gray-700 rounded border border-black"
className="w-full h-[42px] bg-grey-150 text-gray-700 rounded border border-black"
id="grid-city"
placeholder="Name"
value={grantProviderPocName}
onChange={(e) => setGrantProviderPocName(e.target.value)}
/>
<input
className="w-full h-[42px] bg-grey-200 text-gray-700 rounded border border-black"
className="w-full h-[42px] bg-grey-150 text-gray-700 rounded border border-black"
id="grid-city"
placeholder="e-mail"
value={grantProviderPocEmail}
Expand All @@ -717,7 +717,7 @@ const NewGrantModal: React.FC<{
Does BCAN qualify? *
</label>
<select
className={`appearance-none block w-full h-[42px] bg-grey-200 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
className={`appearance-none block w-full h-[42px] bg-grey-150 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
doesBcanQualify == "" ? "text-gray-500" : "text-black"
}`}
id="grid-first-name"
Expand All @@ -739,7 +739,7 @@ const NewGrantModal: React.FC<{
Status
</label>
<select
className={`appearance-none block w-full h-[42px] bg-grey-200 placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
className={`appearance-none block w-full h-[42px] bg-grey-150 placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
status == null ? "text-gray-500" : "text-black"
}`}
id="grid-first-name"
Expand All @@ -764,7 +764,7 @@ const NewGrantModal: React.FC<{
Restriction type *
</label>
<select
className={`appearance-none block w-full h-[42px] bg-grey-200 border border-black rounded py-3 px-4 leading-tight focus:outline-none ${
className={`appearance-none block w-full h-[42px] bg-grey-150 border border-black rounded py-3 px-4 leading-tight focus:outline-none ${
isRestricted == "" ? "text-gray-500" : "text-black"
}`}
id="grid-first-name"
Expand Down Expand Up @@ -807,7 +807,7 @@ const NewGrantModal: React.FC<{
<input
type="text"
placeholder="Name"
className="flex-1 px-2 h-[42px] bg-grey-200 border border-black rounded-md"
className="flex-1 px-2 h-[42px] bg-grey-150 border border-black rounded-md"
value={currentAttachment.attachment_name}
onChange={(e) =>
setCurrentAttachment({
Expand All @@ -819,7 +819,7 @@ const NewGrantModal: React.FC<{
<input
type="text"
placeholder="URL"
className="flex-1 px-2 h-[42px] bg-grey-200 border border-black rounded-md"
className="flex-1 px-2 h-[42px] bg-grey-150 border border-black rounded-md"
value={currentAttachment.url}
onChange={(e) =>
setCurrentAttachment({
Expand All @@ -829,7 +829,7 @@ const NewGrantModal: React.FC<{
}
/>
<select
className="h-[42px] bg-grey-200 border border-black rounded-md px-2 items-center justify-center"
className="h-[42px] bg-grey-150 border border-black rounded-md px-2 items-center justify-center"
value={currentAttachment.type}
onChange={(e) =>
setCurrentAttachment({
Expand Down Expand Up @@ -881,7 +881,7 @@ const NewGrantModal: React.FC<{
className="flex gap-2 mb-2 w-full items-center"
>
<div
className="overflow-hidden rounded-md flex-1 min-w-0 h-[42px] bg-grey-200 text-gray-700 border border-black flex items-center px-3 justify-between"
className="overflow-hidden rounded-md flex-1 min-w-0 h-[42px] bg-grey-150 text-gray-700 border border-black flex items-center px-3 justify-between"
>
<a
href={attachment.url}
Expand Down Expand Up @@ -924,7 +924,7 @@ const NewGrantModal: React.FC<{
Description
</label>
<textarea
className="h-48 block w-full bg-grey-200 text-gray-700 border border-black rounded py-3 px-4 mb-3 leading-tight"
className="h-48 block w-full bg-grey-150 text-gray-700 border border-black rounded py-3 px-4 mb-3 leading-tight"
id="grid-first-name"
value={description}
onChange={(e) => _setDescription(e.target.value)}
Expand Down
Loading