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..ed3da375 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 "./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/main-page/settings/components/Button.tsx b/frontend/src/components/Button.tsx similarity index 73% rename from frontend/src/main-page/settings/components/Button.tsx rename to frontend/src/components/Button.tsx index 72efd36e..f18332cc 100644 --- a/frontend/src/main-page/settings/components/Button.tsx +++ b/frontend/src/components/Button.tsx @@ -7,18 +7,20 @@ type ButtonProps = { className?: string; logo?: IconProp; logoPosition?: 'left' | 'right'; + disabled?: boolean; + type?: "button" | "submit" | "reset"; } // Button component where you can pass in text, onClick handler, optional className // for styling, and an optional logo with its position. //Styling is default, but can be overridden by passing in a className prop -export default function Button({ text, onClick, className, logo, logoPosition }: ButtonProps) { +export default function Button({ text, onClick, className, logo, logoPosition, disabled, type }: ButtonProps) { 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..9157a94b 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 "../../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..4b2b851e 100644 --- a/frontend/src/main-page/grants/grant-view/GrantView.tsx +++ b/frontend/src/main-page/grants/grant-view/GrantView.tsx @@ -7,7 +7,7 @@ import { faCheckSquare, faXmarkSquare, } from "@fortawesome/free-solid-svg-icons"; -import Button from "../../settings/components/Button"; +import Button from "../../../components/Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import ContactCard from "./ContactCard"; import GrantFieldCol from "./GrantFieldCol"; @@ -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..0ea53f20 100644 --- a/frontend/src/sign-up/SignUpButton.tsx +++ b/frontend/src/sign-up/SignUpButton.tsx @@ -1,3 +1,5 @@ +import Button from "../components/Button"; + type SignUpButtonProps = { disabled?: boolean; }; @@ -9,16 +11,15 @@ type SignUpButtonProps = { */ export default function SignUpButton({ disabled }: SignUpButtonProps) { return ( - + }`}/> ); } diff --git a/frontend/src/sign-up/SignUpForm.tsx b/frontend/src/sign-up/SignUpForm.tsx index e86351c2..78d343fc 100644 --- a/frontend/src/sign-up/SignUpForm.tsx +++ b/frontend/src/sign-up/SignUpForm.tsx @@ -1,4 +1,4 @@ -import InputField from "./InputField"; +import InputField from "../components/InputField"; import PasswordField from "./PasswordField"; import PasswordRequirements from "./PasswordRequirements"; import SignUpButton from "./SignUpButton"; diff --git a/frontend/src/sign-up/index.ts b/frontend/src/sign-up/index.ts index 5b3ec8bd..39dca3d0 100644 --- a/frontend/src/sign-up/index.ts +++ b/frontend/src/sign-up/index.ts @@ -1,5 +1,5 @@ export { default as BrandingPanel } from "./BrandingPanel"; -export { default as InputField } from "./InputField"; +export { default as InputField } from "../components/InputField"; export { default as LoginPrompt } from "./LoginPrompt"; export { default as PasswordField } from "./PasswordField"; export { default as PasswordRequirements } from "./PasswordRequirements"; 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: {