From f6f4ad45497a9efeb81b26d048d580099a2c09bf Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Thu, 4 Dec 2025 23:42:21 -0500
Subject: [PATCH 1/2] Adding role authorization back to grant page

---
 frontend/src/custom/ActionConfirmation.tsx    |  2 +-
 frontend/src/main-page/grants/GrantPage.tsx   | 63 +++++++++++--------
 .../main-page/grants/grant-list/GrantItem.tsx | 14 ++---
 3 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/frontend/src/custom/ActionConfirmation.tsx b/frontend/src/custom/ActionConfirmation.tsx
index 7c56b65..0c1abda 100644
--- a/frontend/src/custom/ActionConfirmation.tsx
+++ b/frontend/src/custom/ActionConfirmation.tsx
@@ -31,7 +31,7 @@ import { IoIosWarning } from "react-icons/io";
             borderColor: 'black',
             borderWidth: '2px'
           }}
-          className=" bg-white rounded-lg shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
+          className=" bg-white rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
           onClick={(e) => e.stopPropagation()}
         >
 
diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx
index 05bc399..98566e2 100644
--- a/frontend/src/main-page/grants/GrantPage.tsx
+++ b/frontend/src/main-page/grants/GrantPage.tsx
@@ -17,7 +17,8 @@ import {
 import { toJS } from "mobx";
 
 import { fetchGrants } from "./filter-bar/processGrantData.ts";
-
+import { UserStatus } from "../../../../middle-layer/types/UserStatus.ts";
+import { Navigate } from "react-router-dom";
 
 interface GrantPageProps {
   showOnlyMyGrants?: boolean; //if true, filters grants by user email
@@ -50,38 +51,50 @@ function GrantPage({ showOnlyMyGrants = false }: GrantPageProps) {
     }
   }, [showNewGrantModal, wasGrantSubmitted]);
 
-  return (
-    <div className="grant-page px-8">
-      <div className="top-half">
-      </div>
+  return user ? (
+    user?.position !== UserStatus.Inactive ? (
+      <div className="grant-page px-8">
+        <div className="top-half"></div>
         <div className="flex justify-end align-middle p-4 gap-4">
           <GrantSearch />
           <AddGrantButton onClick={() => setShowNewGrantModal(true)} />
         </div>
-      <div className="grid grid-cols-5 gap-8 px-4">
-        <div className="col-span-1">
-          <FilterBar/>
+        <div className="grid grid-cols-5 gap-8 px-4">
+          <div className="col-span-1">
+            <FilterBar />
+          </div>
+          <div className="bot-half col-span-4">
+            <div className="grant-list-container">
+              <GrantList
+                selectedGrantId={
+                  selectedGrant ? selectedGrant.grantId : undefined
+                }
+                onClearSelectedGrant={() => setSelectedGrant(null)}
+                currentUserEmail={currentUserEmail}
+                showOnlyMyGrants={showOnlyMyGrants}
+              />
+            </div>
+          </div>
         </div>
-        <div className="bot-half col-span-4">
-          <div className="grant-list-container">
-            <GrantList
-              selectedGrantId={
-                selectedGrant ? selectedGrant.grantId : undefined
-              }
-              onClearSelectedGrant={() => setSelectedGrant(null)}
-              currentUserEmail={currentUserEmail}
-              showOnlyMyGrants={showOnlyMyGrants}
+        <div className="hidden-features">
+          {showNewGrantModal && (
+            <NewGrantModal
+              grantToEdit={null}
+              onClose={async () => {
+                setShowNewGrantModal(false);
+                setWasGrantSubmitted(true);
+              }}
+              isOpen={showNewGrantModal}
             />
-          </div>
+          )}
         </div>
       </div>
-      <div className="hidden-features">
-        {showNewGrantModal && (
-          <NewGrantModal grantToEdit={null} onClose={async () => {setShowNewGrantModal(false); setWasGrantSubmitted(true);} } isOpen={showNewGrantModal}  />
-        )}
-      </div>
-    </div>
+    ) : (
+      <Navigate to="restricted" replace />
+    )
+  ) : (
+    <Navigate to="/login" replace />
   );
-} 
+}
 
 export default GrantPage;
diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
index 3360955..36694c2 100644
--- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
@@ -217,7 +217,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                       {/*Left column of gray labels */}
                       <div className="w-1/2 mr-2">
                         {/*Application date and grant start date row*/}
-                        <div className="flex space-x-4 w-full mb-4">
+                        <div className="flex space-x-4 w-full">
                           {/*Application date*/}
                           <div className="w-1/2 mb-3">
                             <label
@@ -336,7 +336,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                           Report Deadlines
                         </label>
                         <div
-                          className="p-2 rounded-md h-52 w-4/5  overflow-auto grip "
+                          className="p-2 rounded-md h-[13.5rem] w-4/5  overflow-auto grip "
                           style={{
                             backgroundColor: "#F58D5C",
                             borderStyle: "solid",
@@ -404,14 +404,14 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             className="w-4/5 border-l border-black bg-[#FFCEB6] rounded-r-md"
                           >
                             <h2
-                              className="truncate px-2 text-left font-bold h-10 w-full text-gray-700 rounded flex items-center"
+                              className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded flex items-center"
                               id="grid-city"
                             >
                               {" "}
                               {curGrant.bcan_poc?.POC_name ?? "Unknown"}{" "}
                             </h2>
                             <h2
-                              className="truncate px-2 text-left h-10 w-full text-gray-700 rounded flex items-center"
+                              className="truncate px-2 text-left h-8 w-full text-gray-700 rounded flex items-center"
                               id="grid-city"
                               title={
                                 curGrant.bcan_poc?.POC_email ?? "----------"
@@ -448,14 +448,14 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             className="w-4/5 border-l border-black bg-[#FFCEB6] rounded-r-md"
                           >
                             <h2
-                              className="truncate px-2 text-left font-bold h-10 w-full text-gray-700 rounded-md flex items-center"
+                              className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded-md flex items-center"
                               id="grid-city"
                             >
                               {" "}
                               {curGrant.grantmaker_poc?.POC_name ?? "Unknown"}
                             </h2>
                             <h2
-                              className="truncate px-2 text-left h-10 w-full text-gray-700 rounded-md flex items-center"
+                              className="truncate px-2 text-left h-8 w-full text-gray-700 rounded-md flex items-center"
                               id="grid-city"
                               title={
                                 curGrant.grantmaker_poc?.POC_email ??
@@ -552,7 +552,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                           Scope Documents
                         </label>
                         <div
-                          className="p-2 rounded-md h-48 overflow-auto grip grid-cols-1 gap-4"
+                          className="p-2 rounded-md h-[11.5rem] overflow-auto grip grid-cols-1 gap-4"
                           style={{
                             backgroundColor: ButtonColorOption.GRAY,
                             borderStyle: "solid",

From 4ad805428364a96d9d27be347c32aca486471bb1 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Fri, 5 Dec 2025 00:35:48 -0500
Subject: [PATCH 2/2] Random fixes

---
 frontend/src/main-page/header/AccountInfo.tsx        | 1 +
 frontend/src/main-page/header/styles/AccountInfo.css | 7 ++-----
 frontend/src/main-page/restricted/RestrictedPage.tsx | 2 +-
 frontend/src/main-page/users/UserPositionCard.tsx    | 2 +-
 frontend/tailwind.config.ts                          | 2 +-
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx
index b35e54a..b80d4d4 100644
--- a/frontend/src/main-page/header/AccountInfo.tsx
+++ b/frontend/src/main-page/header/AccountInfo.tsx
@@ -33,6 +33,7 @@ const AccountInfo: React.FC<AccountInfoProps> = ({
   const handleLogoutClick = () => {
     logoutUser();
     setOpenModal(null);
+    navigate('login');
   };
 
   return createPortal(
diff --git a/frontend/src/main-page/header/styles/AccountInfo.css b/frontend/src/main-page/header/styles/AccountInfo.css
index c73064b..e2c2894 100644
--- a/frontend/src/main-page/header/styles/AccountInfo.css
+++ b/frontend/src/main-page/header/styles/AccountInfo.css
@@ -12,15 +12,14 @@
   position: absolute;
   padding: 20px 40px;
   background-color: white;
-  border: 3px solid #2d2d2d;
-  border-radius: 16px;
+  border: 1px solid #2d2d2d;
+  border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
   z-index: 9999;
 }
 
 .popup-header {
   color: #000;
-  font-family: Montserrat;
   font-size: 22px;
   font-style: normal;
   font-weight: 100;
@@ -51,7 +50,6 @@
 
 .info-label {
   color: #646464;
-  font-family: Montserrat;
   font-size: 15px;
   font-style: normal;
   font-weight: 700;
@@ -61,7 +59,6 @@
 
 .info-value {
   color: #000;
-font-family: Montserrat;
 font-size: 15px;
 font-style: normal;
 font-weight: 400;
diff --git a/frontend/src/main-page/restricted/RestrictedPage.tsx b/frontend/src/main-page/restricted/RestrictedPage.tsx
index 004c3fd..3fe0767 100644
--- a/frontend/src/main-page/restricted/RestrictedPage.tsx
+++ b/frontend/src/main-page/restricted/RestrictedPage.tsx
@@ -4,7 +4,7 @@ import { ButtonColorOption } from "../../custom/RingButton";
 
 function RestrictedPage() {
   return (
-    <div className="flex justify-center gap-20 items-center h-[100vh] text-left">
+    <div className="flex justify-center gap-20 items-center h-[70vh] text-left">
       <div>
         <h1 className="text-7xl font-bold mb-5">So Sorry!</h1>
         <p className="text-3xl font-bold mb-3">
diff --git a/frontend/src/main-page/users/UserPositionCard.tsx b/frontend/src/main-page/users/UserPositionCard.tsx
index 9cb5afc..e2a4a63 100644
--- a/frontend/src/main-page/users/UserPositionCard.tsx
+++ b/frontend/src/main-page/users/UserPositionCard.tsx
@@ -21,7 +21,7 @@ const UserPositionCard = ({ position }: UserPositionCardProps) => {
   }, [position]);
 
   return (
-    <div className={`py-1 px-6 rounded-sm border ${cardStyles}`}>
+    <div className={`py-1 px-6 rounded-md border ${cardStyles}`}>
       <p className="text-base">{position}</p>
     </div>
   );
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 9d00b14..4d78e2c 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -28,7 +28,7 @@ export default {
       },
       borderRadius: {
         '4xl': '2rem',
-        'md': '15px',
+        'md': '0.75rem',
       },
     }
   },