405 dev misc frontend fixes based on design review

frontend/src/components/ActionConfirmation.tsx

@@ -64,11 +64,11 @@ import { IoIosWarning } from "react-icons/io";
 
           {/* Buttons */}
           <div className="flex w-full justify-between ">
-            <Button text="No, cancel" onClick={onCloseDelete} className=" text-red border-red hover:border-red hover:bg-red-light active:bg-red" />
+            <Button text="No, cancel" onClick={onCloseDelete} className=" text-white bg-red hover:border-red hover:text-red hover:bg-white active:bg-red" />
             <Button text="Yes, confirm" onClick={() => {
                 onConfirmDelete();
                 onCloseDelete();
-              }} className="border-grey-500" />
+              }} className="border-grey-500 hover:text-primary-900" />
           </div>
 
           </div>

frontend/src/components/Button.tsx

@@ -31,27 +31,27 @@ export default function Button({
       className={`
         px-4 py-2 rounded-3xl font-medium text-black border-2 
       active:bg-primary-900 active:border-primary-900 active:text-white
-        h-fit flex-grow-0 items-center justify-center     
+        h-fit flex-grow-0 items-center justify-center hover:border-primary-900    
         transition-opacity flex whitespace-nowrap
         ${className} ${
-          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-90"
+          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-85"
         }
       `}
     >
       {logo && logoPosition === "left" && (
-        <span className="mr-2">
-          <FontAwesomeIcon icon={logo} className="" />
+        <span className="mr-2 flex items-center justify-center">
+          <FontAwesomeIcon icon={logo} className="w-3 h-3 xl:w-4 xl:h-4" />
         </span>
       )}
       {text}
       {logo && logoPosition === "right" && (
-        <span className="ml-2">
-          <FontAwesomeIcon icon={logo} className="" />
+        <span className="ml-2 flex items-center justify-center">
+          <FontAwesomeIcon icon={logo} className="w-3 h-3 lg:w-4 lg:h-4" />
         </span>
       )}
       {logo && logoPosition === "center" && (
-        <span className="">
-          <FontAwesomeIcon icon={logo} className="" />
+        <span className="flex items-center justify-center">
+          <FontAwesomeIcon icon={logo} className="w-3 h-3 lg:w-4 lg:h-4" />
         </span>
       )}
     </button>

frontend/src/components/InputField.tsx

@@ -21,9 +21,9 @@ export default function InputField({
 }: InputFieldProps) {
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-semibold text-sm lg:text-base">
+      <label htmlFor={id} className="block text-left w-fit font-semibold text-sm lg:text-base">
         {label}
-        {required && <span className="text-red">*</span>}
+        {required && <span className="text-red ml-1">*</span>}
       </label>
       <div className="mt-2 flex items-center rounded-md">
         <input

frontend/src/main-page/MainPage.tsx

@@ -50,18 +50,19 @@ function MainPage() {
   const [openModal, setOpenModal] = useState(false);
 
   const location = useLocation();
+  const mainContainer = document.getElementsByClassName('main-container');
 
-  // Clears all store filters when page changes
   useEffect(() => {
     clearAllFilters();
+    mainContainer[0].scrollTo(0, 0);
   }, [location]);
 
   return (
     <div className="w-full flex-row flex h-screen overflow-hiden">
       <div>
         <NavBar />
       </div>
-      <div className="px-6 lg:px-10 pt-8 w-full h-screen overflow-y-auto">
+      <div className="main-container px-6 lg:px-10 pt-8 w-full h-screen overflow-y-auto">
         <div className="">
           <div className="bell-container flex justify-end w-full">
             <BellButton setOpenModal={setOpenModal} openModal={openModal} />

frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx

@@ -299,7 +299,7 @@ export default function CashAddRevenue() {
         text="Add Revenue Source"
         onClick={handleSubmit}
         disabled={isSubmitting}
-        className="bg-green text-white mt-2 text-sm lg:text-base"
+        className="bg-green hover:!border-green text-white mt-2 text-sm lg:text-base"
       />
     </div>
   );

frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx

@@ -28,23 +28,41 @@ export default function CashCategoryDropdown({
       >
         {name}
       </label>
-      <div className="mt-2 flex items-center rounded-md ">
-        <select
-          id={generatedId}
-          value={value}
-          onChange={onChange}
-          className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-sm lg:text-base border-2 placeholder:text-grey-500 h-[2.71rem] lg:h-[2.95rem] ${
-            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100"}
-            ${!value && "text-grey-700"}`}
-        >
-          <option value="" disabled hidden>{"Select a "}{name.toLowerCase()}</option>
-          {Object.values(type).map((r) => (
-            <option key={r} value={r}>
-              {r}
-            </option>
-          ))}
-        </select>
+      <div className="mt-2 flex items-center rounded-md relative">
+          <select
+            id={generatedId}
+            value={value}
+            onChange={onChange}
+            className={`appearance-none block w-full rounded-md py-2.5 pl-4 pr-10 text-sm lg:text-base border-2 placeholder:text-grey-500 h-[2.71rem] lg:h-[2.95rem] focus:outline-none focus:ring-0 focus:ring-offset-0 focus:border-primary-900 ${
+              error
+                ? "border-red bg-red-lightest"
+                : "border-grey-500 bg-grey-100"
+            }`}
+          >
+            <option value="">{"Select a "}{name.toLowerCase()}</option>
+            {Object.values(type).map((r) => (
+              <option key={r} value={r}>
+                {r}
+              </option>
+            ))}
+          </select>
+
+          {/* Custom dropdown arrow */}
+          <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center">
+            <svg
+              className="h-5 w-5 text-grey-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
       </div>
-    </div>
   );
 }

frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx

@@ -53,7 +53,7 @@ export default function CashEditLineItem({
               logo={faTrash}
               logoPosition="right"
               onClick={() => setShowDeleteModal(true)}
-              className="bg-red-light text-red text-sm lg:text-base"
+              className="bg-red-light text-red hover:!border-red text-sm lg:text-base"
             />
           </div>
         </div>
@@ -68,7 +68,7 @@ export default function CashEditLineItem({
         title={`Delete Cashflow Item`}
         subtitle={"Are you sure you want to delete"}
         boldSubtitle={sourceName}
-        warningMessage="By deleting this item, it won't be available in the system anymore."
+        warningMessage="If you delete this item, it will be permanently removed from the system."
       />
     </div>
   );

frontend/src/main-page/cash-flow/components/CashSourceList.tsx

@@ -31,7 +31,7 @@ export default function CashSourceList({ type, lineItems }: SourceProps) {
         {" Sources"}
       </div>
       {/* map over list of source and put casheditlineitem for each */}
-      <div className="flex flex-col gap-2 h-[30rem] overflow-y-auto pr-1">
+      <div className="flex flex-col gap-2 h-[38rem] overflow-y-auto pr-1">
         {lineItems.map((item) => (
           <div key={item.name}>
             <CashEditLineItem

frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx

@@ -128,6 +128,7 @@ const BarYearGrantStatus = observer(
                 border: "1px solid lightgray",
                 boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
               }}
+              cursor={{ fill: "rgba(0,0,0,0.1)" }}
               formatter={(value: number) =>
                 checked ? `$${value.toLocaleString()}` : `${value}`
               }

frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx

@@ -152,7 +152,7 @@ export const GanttYearGrantTimeline = observer(
             : ""}
           {recentYear}
         </div>
-        <div className="w-full h-96 max-w-screen relative">
+        <div className="w-full h-[30rem] max-w-screen relative">
           <Scheduler
             data={filteredSchedulerData}
             isLoading={false}

frontend/src/main-page/dashboard/components/StackedBarMoneyReceived.tsx

@@ -142,6 +142,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => {
               border: "1px solid lightgray",
               boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
             }}
+            cursor={{ fill: "rgba(0,0,0,0.1)" }}
             formatter={(value: number) => `$${value.toLocaleString()}`}
           />
         </BarChart>

frontend/src/main-page/dashboard/styles/Dashboard.css

@@ -8,40 +8,6 @@ body {
   box-sizing: border-box;
 }
 
-/* Hide the default checkbox */
-input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none; /* For Safari */
-  margin: 0; /* Remove default margin */
-  /* Additional styling for the custom checkbox container */
-  width: 1.2em;
-  height: 1.2em;
-  border: 2px solid lightgray;
-  border-radius: 4px;
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-}
-
-/* Style the custom checkmark using a pseudo-element */
-input[type="checkbox"]::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  width: 0.4em;
-  height: 0.8em;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  display: none; /* Hidden by default */
-}
-
-input[type="checkbox"]:checked::before {
-  display: block; /* Show the checkmark */
-  border-color: black;
-}
-
 /* Main container styling */
 .dashboard-page {
   display: flex;

frontend/src/main-page/grants/edit-grant/EditGrant.tsx

@@ -198,7 +198,7 @@ const EditGrant: React.FC<{
           {/* Divider */}
           {grantToEdit && (<div>
           <hr className="border-grey-400 border-t-2 rounded-full" />
-          <Button text="Delete Grant" logo={faTrash} logoPosition="right" className="w-fit mt-6 ml-auto text-red bg-red-light" onClick={() => setShowDeleteModal(true)}/>
+          <Button text="Delete Grant" logo={faTrash} logoPosition="right" className="w-fit mt-6 ml-auto text-red hover:border-red bg-red-light" onClick={() => setShowDeleteModal(true)}/>
           <ActionConfirmation
                       isOpen={showDeleteModal}
                       onCloseDelete={() => setShowDeleteModal(false)}
@@ -208,7 +208,7 @@ const EditGrant: React.FC<{
                       title="Delete Grant"
                       subtitle={"Are you sure you want to delete"}
                       boldSubtitle={form.organization}
-                      warningMessage="By deleting this grant, they won't be available in the system anymore."
+                      warningMessage="If you delete this grant, it will be permanently removed from the system."
                     />
           </div>)}
         </div>

frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx

@@ -88,7 +88,7 @@ const AddContactPopup = observer(
 
           {/* Contact Type Selector */}
           <div className="flex gap-2">
-            {(["BCAN", "Granter"] as ContactType[]).map((t) => (
+            {(["BCAN", "Granter"] as ContactType[]).filter((t): t is ContactType => form.bcanPocEmail ? t === "Granter" : form.grantProviderPocEmail ? t === "BCAN" : true).map((t) => (
               <button
                 key={t}
                 onClick={() => {
@@ -102,7 +102,9 @@ const AddContactPopup = observer(
                       ? t === "BCAN"
                         ? "bg-primary-900 text-white"
                         : "bg-secondary-500 text-white"
-                      : "bg-white border-grey-400"
+                      : t !== "BCAN"
+                      ? "hover:border-secondary-500 bg-white border-grey-400"
+                      : "hover:border-primary-900 bg-white border-grey-400"
                   }`}
               >
                 {t}

frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx

@@ -67,7 +67,7 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
                 logo={faCheckSquare}
                 logoPosition="left"
                 text="Yes"
-                className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-green active:bg-white ${form.doesBcanQualify === "yes" ? "text-green border-green" : "border-grey-300 text-grey-700"}`}
+                className={`text-gray-700 px-2 py-1 w-20 text-sm border-2  hover:!border-green active:bg-green ${form.doesBcanQualify === "yes" ? "text-green border-green" : "border-grey-300 text-grey-700"}`}
                 onClick={() =>
                   dispatch({
                     type: "SET_FIELD",
@@ -80,7 +80,7 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
                 logo={faSquareXmark}
                 logoPosition="left"
                 text="No"
-                className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-red active:bg-white ${form.doesBcanQualify === "no" ? "text-red border-red" : "border-grey-300 text-grey-700"}`}
+                className={`text-gray-700 px-2 py-1 w-20 text-sm border-2 hover:!border-red active:bg-red ${form.doesBcanQualify === "no" ? "text-red border-red" : "border-grey-300 text-grey-700"}`}
                 onClick={() =>
                   dispatch({
                     type: "SET_FIELD",

frontend/src/main-page/grants/filter-bar/FilterBar.tsx

@@ -165,17 +165,17 @@ const FilterBar: React.FC = observer(() => {
 
 
   const activeButtonClass =
-    "border-2 border-primary-900 text-primary-900 active:!border-primary-900 active:!text-primary-900 focus:!border-primary-900 focus:!text-primary-900 focus:outline-none focus-visible:outline-none";
+    "border-2 border-primary-900 text-primary-900 active:!border-primary-900 active:!text-white focus:!border-primary-900 focus:!text-primary-900 focus:outline-none focus-visible:outline-none";
   const inactiveButtonClass =
-    "border-2 border-grey-500 text-grey-600 active:!border-grey-500 active:!text-grey-600 focus:!border-grey-500 focus:!text-grey-600 focus:outline-none focus-visible:outline-none";
+    "border-2 border-grey-500 text-grey-600 active:!border-primary-900 active:!text-white focus:!border-grey-500 focus:!text-grey-600 focus:outline-none focus-visible:outline-none";
 
   return (
     <div className="relative w-full">
       <div className="relative flex items-center gap-2 flex-wrap">
         <Button
           text="My Grants"
           onClick={handleMyGrantsClick}
-          className={`bg-white text-sm lg:text-base whitespace-nowrap border-b-4 ${
+          className={`bg-white text-sm lg:text-base whitespace-nowrap ${
             emailFilter ? activeButtonClass : inactiveButtonClass
           }`}
         />

frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx

@@ -178,20 +178,18 @@ export default function FilterCard({
 		<div className="flex flex-col gap-2">
 			<div className="text-sm font-semibold flex justify-between items-center">
 				<span>Direction</span>
-				<Button
-					text="Clear all"
-					onClick={handleClearAll}
-					className="text-xs font-semibold text-secondary-400 border-0 hover:text-secondary-400 hover:bg-opacity-0 hover:border hover:border-white"
-				/>
+				<button onClick={handleClearAll} className="text-xs font-semibold text-secondary-400 border-0 hover:text-secondary-400 hover:bg-opacity-0 focus:outline-none active:text-secondary">
+					{"Clear all"}
+				</button>
 			</div>
 			<div className="flex gap-2 flex-wrap">
 				<Button
 					logo={faAngleUp}
 					logoPosition="left"
 					text="Increasing"
 					onClick={() => {
-						setDirection("increasing");
-						onDirectionChange("increasing");
+						setDirection(direction =="increasing" ? null : "increasing");
+						onDirectionChange(direction =="increasing" ? null : "increasing");
 					}}
 					className={
 						direction === "increasing"
@@ -205,8 +203,8 @@ export default function FilterCard({
 					logoPosition="left"
 					text="Decreasing"
 					onClick={() => {
-						setDirection("decreasing");
-						onDirectionChange("decreasing");
+						setDirection(direction =="decreasing" ? null : "decreasing");
+						onDirectionChange(direction =="decreasing" ? null : "decreasing");
 					}}
 					className={
 						direction === "decreasing"

frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx

@@ -31,6 +31,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = observer(({ selected, onSe
               aria-label={`Filter by ${String(status)} status`}
               className="cursor-pointer w-4 h-4 flex-shrink-0"
             />
+
             <span
               className="px-3 py-1 rounded-full text-sm font-medium"
               style={{
@@ -41,6 +42,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = observer(({ selected, onSe
               {status}
             </span>
           </label>
+
         ))}
       </div>
     </div>

frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx

@@ -19,7 +19,7 @@ const StatusIndicator: React.FC<StatusIndicatorProps> = ({ curStatus, onClick, a
 
   return (
     <button
-      className="inline-flex w-fit cursor-default flex-none items-center rounded-full px-3 py-1 border-grey-300 border-2 text-gray-700 hover:border-primary-900 text-sm lg:text-base"
+      className="inline-flex w-fit cursor-pointer flex-none items-center rounded-full px-3 py-1 border-grey-300 border-2 text-gray-700 hover:border-grey-500 text-sm lg:text-base"
       style={active !== false ? { color: darkColor, backgroundColor: lightColor, borderColor: lightColor } : {}}
       onClick={onClick}