diff --git a/frontend/index.html b/frontend/index.html index b3c29836..7ce682c6 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -9,6 +9,7 @@ +
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico new file mode 100644 index 00000000..7b1ef782 Binary files /dev/null and b/frontend/public/favicon.ico differ diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx index 931085fb..0a4d0610 100644 --- 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(() => {
{" "}
)} - + onClick={() => {}} + className="w-full block grow bg-primary-900 text-white mt-8 text-base placeholder:text-gray-500" + />
or
@@ -99,7 +100,7 @@ const Login = observer(() => { diff --git a/frontend/src/custom/RingButton.tsx b/frontend/src/custom/RingButton.tsx deleted file mode 100644 index c2ec18c8..00000000 --- a/frontend/src/custom/RingButton.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import "../styles/button.css"; - -/* Maintained with button.css */ -export enum ButtonColorOption { - GREEN = "var(--color-green)", - GRAY = "var(--color-grey-400)", - BLUE = "var(--color-blue-light)", -} - -/* API for components to setup a button with expected system colors */ -interface RingButtonProps { - /* The text to display for the button */ - text: string; - - /* The color of the button */ - color: ButtonColorOption; -} - -/* Generic Button Component With: - * Text - * Color - */ -export default function RingButton({ text, color }: RingButtonProps) { - return ( - <> - {ButtonColorOption.GREEN === color && ( -
- {text} -
- )} - {ButtonColorOption.BLUE === color && ( -
- {text} -
- )} - {ButtonColorOption.GRAY === color && ( -
- {text} -
- )} - - ); -} diff --git a/frontend/src/main-page/Footer.tsx b/frontend/src/main-page/Footer.tsx index 44b05ceb..c3effd0a 100644 --- 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 ( -
- +
+ {FooterText.C4C_Motto} @@ -17,7 +16,7 @@ const Footer: React.FC = () => { {FooterText.Org} - {FooterText.NEU} + {FooterText.NEU}
); diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx index 5074dfc9..6e050116 100644 --- a/frontend/src/main-page/MainPage.tsx +++ b/frontend/src/main-page/MainPage.tsx @@ -14,8 +14,8 @@ function MainPage() {
-
-
+
+
} /> [] = [ { key: "grantId", title: "Grant ID" }, @@ -14,7 +15,8 @@ const columns: CsvColumn[] = [ { 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[] = [ { 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[] = [ { 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 ( - + 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 index b744008c..dc490c83 100644 --- a/frontend/src/main-page/dashboard/Dashboard.tsx +++ b/frontend/src/main-page/dashboard/Dashboard.tsx @@ -47,10 +47,12 @@ const Dashboard = observer(() => { return (
-
+
Dashboard
+
+
diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx index 34e22074..fa150df1 100644 --- 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 (
- + onClick={() => setShowDropdown(!showDropdown)} + logo={faChevronDown} + logoPosition="right" + className="bg-white border-grey-500 inline-flex items-center justify-between text-sm lg:text-base" + />
-
- - FILTERS GO HERE - +
+
-
+
{grants.map((grant) => ( -
-
- {/* Absolutely-positioned icon */} - - { - if (e.key === "Enter") { - e.preventDefault(); - } - }} - /> -
-
+
+ {/* Absolutely-positioned icon */} + + { + if (e.key === "Enter") { + e.preventDefault(); + } + }} + />
); } diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx index 3960fd1f..f1a819e7 100644 --- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx +++ b/frontend/src/main-page/grants/grant-list/GrantItem.tsx @@ -3,8 +3,7 @@ import "../styles/GrantItem.css"; import StatusIndicator from "./StatusIndicator"; import { FaChevronDown, FaChevronRight } from "react-icons/fa"; import { Grant } from "../../../../../middle-layer/types/Grant"; -import { DoesBcanQualifyText } from "../../../translations/general"; -import RingButton, { ButtonColorOption } from "../../../custom/RingButton"; +// import { DoesBcanQualifyText } from "../../../translations/general"; import { api } from "../../../api"; import { MdOutlinePerson2 } from "react-icons/md"; import Attachment from "../../../../../middle-layer/types/Attachment"; @@ -177,7 +176,7 @@ const GrantItem: React.FC = observer( : "No date"}
  • {formatCurrency(curGrant.amount)}
    • -
  • + {/*
  • {curGrant.does_bcan_qualify ? ( = observer( color={ButtonColorOption.GRAY} /> )} -
    • + */}
    • diff --git a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx b/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx index 258ff43a..3f13c5b9 100644 --- a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx +++ b/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx @@ -17,7 +17,7 @@ const StatusIndicator: React.FC = ({ curStatus }) => { return (
    {labelText} diff --git a/frontend/src/main-page/grants/grant-view/ContactCard.tsx b/frontend/src/main-page/grants/grant-view/ContactCard.tsx index 843b2549..5d2005aa 100644 --- a/frontend/src/main-page/grants/grant-view/ContactCard.tsx +++ b/frontend/src/main-page/grants/grant-view/ContactCard.tsx @@ -8,7 +8,7 @@ type ContactCardProps = { export default function ContactCard({ contact, type }: ContactCardProps) { return ( -
    +
    Profile = ({
    @@ -115,7 +115,7 @@ export const CostBenefitAnalysis: React.FC = ({
    {costBenefitResult && (
    -
    +

    {formatCurrency(costBenefitResult.costPerReport)}

    diff --git a/frontend/src/main-page/grants/grant-view/GrantView.tsx b/frontend/src/main-page/grants/grant-view/GrantView.tsx index 9ae50f73..5b181555 100644 --- a/frontend/src/main-page/grants/grant-view/GrantView.tsx +++ b/frontend/src/main-page/grants/grant-view/GrantView.tsx @@ -81,7 +81,7 @@ const GrantItem: React.FC = observer(({ grant }) => {
    diff --git a/frontend/src/sign-up/PasswordField.tsx b/frontend/src/sign-up/PasswordField.tsx index e0555baf..671389af 100644 --- a/frontend/src/sign-up/PasswordField.tsx +++ b/frontend/src/sign-up/PasswordField.tsx @@ -77,8 +77,8 @@ export default function PasswordField({ diff --git a/frontend/src/sign-up/SignUpButton.tsx b/frontend/src/sign-up/SignUpButton.tsx index 2cc2f7e6..4f728796 100644 --- a/frontend/src/sign-up/SignUpButton.tsx +++ b/frontend/src/sign-up/SignUpButton.tsx @@ -1,3 +1,5 @@ +import Button from "../main-page/settings/components/Button"; + type SignUpButtonProps = { disabled?: boolean; }; @@ -9,16 +11,15 @@ type SignUpButtonProps = { */ export default function SignUpButton({ disabled }: SignUpButtonProps) { return ( - + }`}/> ); } diff --git a/frontend/src/styles/Footer.css b/frontend/src/styles/Footer.css deleted file mode 100644 index fe1cce96..00000000 --- a/frontend/src/styles/Footer.css +++ /dev/null @@ -1,28 +0,0 @@ -.footer { - display: flex; - justify-content: space-evenly; - align-items: center; - flex-direction: column; - flex-grow: 1; - - border-color: var(--color-grey-100); - width: 100%; - padding: 1em; - - /* Text */ - font-size: var(--font-size-base); - color: var(--color-grey-700); -} - -.text-block { - width: 50%; - display: flex; - flex-direction: column; - padding: 8px; -} - -.northeastern-uni-caption { - font-size: var(--font-size-sm); - line-height: 1rem; - color: var(--color-grey-600); -} diff --git a/frontend/src/styles/button.css b/frontend/src/styles/button.css deleted file mode 100644 index 1d556b9c..00000000 --- a/frontend/src/styles/button.css +++ /dev/null @@ -1,13 +0,0 @@ -/* Optional: styling for the preview of the status button */ -.status-button-preview { - cursor: pointer; -} - -/* Button preview defaults */ -.button-default { - color: black; - text-align: center; - padding: 0.5rem 0; - border-radius: 15px; - z-index: 0; -} \ No newline at end of file diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index 4501a0d7..d255d631 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -31,12 +31,14 @@ --color-green-light: #D0FFEF; --color-blue-dark: #006CA1; + --color-blue: #006CA1; --color-blue-light: #D0EDFF; --color-yellow-dark: #9B6000; --color-yellow-light: #FFF0D3; --color-red-dark: #C80000; + --color-red: #C80000; --color-red-light: #FFD8D8; --color-red-lightest: #FFF0F0; @@ -143,6 +145,12 @@ button:focus-visible { } } +input { + border-width: 2px; + background-color: white; +} + input:focus { - outline: 1px solid var(--color-primary-900); + border-color: var(--color-primary-900); + outline: transparent; } diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index bec42b29..435c6760 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -89,7 +89,7 @@ export default { "9xl": "128rem", }, borderWidth: { - DEFAULT: "1.5px", + DEFAULT: "2px", 0: "0", }, borderRadius: {