Expanded grant view

frontend/src/App.css

@@ -45,6 +45,8 @@
   display: flex;
   justify-content: center; /* Centers horizontally */
   align-items: center; /* Centers vertically */
-  height: 100vh; /* Full height of the viewport */
   text-align: center; /* Optional: centers text inside */
+  width: 100%;
+  height: 100%;
 }
+

frontend/src/grant-info/components/GrantAttributes.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import './styles/GrantAttributes.css';
+interface GrantAttributesProps {
+  isEditing: boolean;
+}
+
+export const GrantAttributes: React.FC<GrantAttributesProps> = ({isEditing}) => {
+  return (
+    <div className="grant-attributes">
+      <div className="attribute-row">
+        <div className="attribute-label">Status</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Does BCAN qualify?</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Deadline</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+            name="deadline"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Notification Date</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+            name="notificationDate"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Report Due:</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Estimated Completion Time:</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Scope Document:</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Grantmaker POC:</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+      <div className="attribute-row">
+        <div className="attribute-label">Timeline:</div>
+        {isEditing ? (
+          <input
+            type="text"
+            className="attribute-value"
+          />
+        ) : (
+          <span className="attribute-value"></span>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/grant-info/components/GrantDetails.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import './styles/GrantDetails.css';
+
+const GrantDetails: React.FC = ()  => {
+  return (
+    <div className="grant-details">
+      <h3>Description</h3>
+      <p>
+        The Community Development Initiative Grant is designed to empower
+        local organizations in implementing impactful projects that address
+        critical social and economic issues. This grant focuses on fostering
+        community-led programs that aim to improve educational opportunities, 
+        enhance public health services, and support economic development within 
+        underserved areas. Applicants are encouraged to outline how their proposed 
+        projects will contribute to sustainable growth, promote equity, and engage 
+        local stakeholders.
+      </p>
+
+      <h3>Application Requirements</h3>
+      <p>
+        Eligible programs include those that offer job training and workforce development, 
+        youth mentorship, health and wellness programs, and initiatives aimed at reducing 
+        environmental impacts. Each application should include a detailed plan that highlights 
+        the project’s goals, implementation strategies, and measurable outcomes. Projects that 
+        demonstrate strong community involvement and partnerships with other local organizations 
+        will be prioritized for funding.
+      </p>
+
+      <h3>Additional Notes</h3>
+      <p>
+        Funding for this grant may cover program expenses such as staffing, equipment, training 
+        materials, and outreach activities. The review committee seeks innovative and sustainable 
+        approaches that align with the mission of strengthening communities and fostering long-term 
+        positive change. Grant recipients will also be expected to submit periodic reports outlining 
+        the progress and achievements of their projects over the funding period.
+      </p>
+    </div>
+  );
+}
+
+export default GrantDetails;

frontend/src/grant-info/components/GrantItem.tsx

@@ -1,5 +1,7 @@
 import React, {useState} from 'react';
 import './styles/GrantItem.css';
+import { GrantAttributes } from './GrantAttributes';
+import GrantDetails from './GrantDetails';
 
 interface GrantItemProps {
     grantName: string;
@@ -12,12 +14,15 @@ const GrantItem: React.FC<GrantItemProps> = (props) => {
    const { grantName, applicationDate, generalStatus, amount, restrictionStatus } = props;
 
    const [isExpanded, setIsExpanded] = useState(false);
+   const [isEditing, setIsEditing] = useState(false);
 
     const toggleExpand = () => {
         setIsExpanded(!isExpanded);
     };
+    const toggleEdit = () => setIsEditing((prev) => !prev);
 
     return (
+
         // class name with either be grant-item or grant-item-expanded
         <div className='grant-item-wrapper'>
             <ul className={`grant-summary ${isExpanded ? 'expanded' : ''}`} onClick={toggleExpand}>
@@ -30,38 +35,18 @@ const GrantItem: React.FC<GrantItemProps> = (props) => {
             <div className={`grant-body ${isExpanded ? 'expanded' : ''}`}>
                 {isExpanded && (
                     <div className="grant-description">
-                        <h2>Grant Description:</h2>
-                                <p>
-                                    The Community Development Initiative Grant is designed to empower
-                                    local organizations in implementing impactful projects that address
-                                    critical social and economic issues. This grant focuses on fostering
-                                    community-led programs that aim to improve educational
-                                    opportunities, enhance public health services, and support economic
-                                    development within underserved areas. Applicants are encouraged to
-                                    outline how their proposed projects will contribute to sustainable
-                                    growth, promote equity, and engage local stakeholders.
-                                </p>
-                                <p>
-                                    Eligible programs include those that offer job training and
-                                    workforce development, youth mentorship, health and wellness
-                                    programs, and initiatives aimed at reducing environmental impacts.
-                                    Each application should include a detailed plan that highlights the
-                                    project’s goals, implementation strategies, and measurable outcomes.
-                                    Projects that demonstrate strong community involvement and
-                                    partnerships with other local organizations will be prioritized for
-                                    funding.
-                                </p>
-                                <p>
-                                    Funding for this grant may cover program expenses such as staffing,
-                                    equipment, training materials, and outreach activities. The review
-                                    committee seeks innovative and sustainable approaches that align
-                                    with the mission of strengthening communities and fostering
-                                    long-term positive change. Grant recipients will also be expected to
-                                    submit periodic reports outlining the progress and achievements of
-                                    their projects over the funding period.
-                                </p>
-
+                        <h2>Community Development Initiative Grant</h2>
+                        <div className = 'grant-content'>
+                        <GrantAttributes isEditing={isEditing} />
+                        <GrantDetails/>
+                        </div>
+                        <div className="bottom-buttons">
+                        <button className="done-button" onClick={toggleEdit}>
+                                {isEditing ? 'SAVE' : 'EDIT'}
+                            </button>
+                    </div>
                         </div>
+
                     )}
             </div>
 

frontend/src/grant-info/components/GrantPage.tsx

@@ -12,9 +12,9 @@ function GrantPage() {
             </div>
             <div className="bot-half">
                 <div className="grant-list">
+                    <Footer/>
                     <GrantList/>
                 </div>
-                <Footer/>
             </div>
         </div>
 

frontend/src/grant-info/components/Header.tsx

@@ -5,7 +5,10 @@ const Header: React.FC = () => {
     return (
         <header className="header">
             <header className="header-left-comp">
-                <li className="logo">LOGO</li>
+            <li className="logo">
+            <img src={"../../images/bcan_logo.png"} alt="BCAN Logo" />
+            </li>
+
             </header>
             <header className="header-right-comp">
                 <ul className="grant-buttons">

frontend/src/grant-info/components/styles/GrantAttributes.css

@@ -0,0 +1,30 @@
+.grant-attributes {
+    background-color: #F26624; 
+    padding: 1rem;
+    border-radius: 8px; 
+    margin-top: 4rem;
+    height: 30%;
+    margin-right: 1rem;
+}
+
+.attribute-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem; 
+}
+
+.attribute-label {
+    font-weight: bold;
+    color:black; 
+    flex: 1; 
+    margin-right: 1rem;
+}
+
+.attribute-value {
+    background-color: #F26624; 
+    padding: 0.5rem;
+    border: 1px solid black;
+    border-radius: 4px;
+    width: 100px;
+    height: 20px;
+}

frontend/src/grant-info/components/styles/GrantDetails.css

@@ -0,0 +1,23 @@
+.grant-details {
+    display: flex;
+    flex-direction: column; /* Stack the elements vertically */
+    gap: 1rem; /* Add spacing between each section */
+  }
+
+  .grant-details h3 {
+    margin-left: 0; 
+    text-align: left;
+    padding-left: 1rem; 
+    margin-bottom: 0.1rem;
+  }
+
+  .grant-details p{
+    border: 1px solid black; 
+    border-radius: 8px; 
+    padding: 1rem; 
+    margin-bottom: 1rem; 
+    transition: border-color 0.3s ease; 
+    overflow-y: auto;
+    margin-top: 0;
+  }
+

frontend/src/grant-info/components/styles/GrantItem.css

@@ -1,5 +1,6 @@
 .grant-item-wrapper {
     margin: 2rem 0;
+    transition: all 0.3s ease-in-out;
 }
 
 .grant-summary {
@@ -24,9 +25,15 @@
     padding: 0 1rem; /* internal to the actual data */
     color: black;
     margin: 0; /* Remove margin */
+
 
 }
 
+.grant-content {
+    display: flex;
+    gap: 2rem; /* Adds space between the two sections */
+}
+
 .grant-body {
     max-height: 0; /* Collapsed state */
     min-height: 0;
@@ -38,8 +45,9 @@
 }
 
 .grant-body.expanded {
-    max-height: 20rem;
+    max-height: 100vh;
     background-color: #F58D5C;
+    padding: 1rem;
 }
 
 .grant-item.expanded {
@@ -48,10 +56,24 @@
     background-color: #F58D5C;
 }
 
-.grant-description {
-    margin: 0 1rem;
+.bottom-buttons {
+    display: flex;  /* Use flexbox to position the button */
+    justify-content: flex-end;  /* Align the button to the right */
+    padding-top: 1rem;  /* Optional: Add some space above the button */
 }
 
+.done-button {
+    bottom: 1rem; 
+    right: 1rem; 
+    padding: 0.5rem 1rem;
+    background-color: 3191CF;
+    color: back; 
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s ease;
+}
 
 
 

frontend/src/grant-info/components/styles/GrantPage.css

@@ -3,7 +3,9 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    justify-content: space-between;
+    justify-content: flex-start;
+    background-color: #F2EBE4;
+    width: 100%;
 }
 
 /* Top half only takes up as much space as it needs */
@@ -18,3 +20,4 @@
     flex-direction: column;
     margin: 0 1rem;
 }
+