Merge pull request #30 from Refugee-Aid-Capstone/feature/hamburger-me…

…nu-cleanup

Feature/hamburger menu cleanup

cypress/e2e/organizationDashboard.cy.js

@@ -36,18 +36,18 @@ describe('OrganizationDashboard Tests', () => {
     cy.get(':nth-child(2)').should('contain', 'Language: German');
     cy.get('.description').should('contain', 'Ipsum et nihil ducimus');
     cy.get(':nth-child(4)').should('contain', 'Status: Pending');
-    cy.get('.approve-btn').should('be.visible');
-    cy.get('.decline-btn').should('be.visible');
-    cy.get('.approve-btn').eq(0).click();
+    cy.get('.action-button').should('be.visible');
+    cy.get('.action-button').should('be.visible');
+    cy.get('.action-button').eq(0).click();
     cy.get(':nth-child(4)').should('contain', 'Status: Approved');
 
     cy.get('.left-column').should('contain', 'Legal Aid');
     cy.get(':nth-child(2)').should('contain', 'Language: German');
     cy.get('.description').should('contain', 'Veniam dolorem hic sint');
     cy.get(':nth-child(4)').should('contain', 'Status: Pending');
-    cy.get('.approve-btn').should('be.visible');
-    cy.get('.decline-btn').should('be.visible');
-    cy.get('.decline-btn').eq(1).click();
+    cy.get('.action-button').should('be.visible');
+    cy.get('.action-button').should('be.visible');
+    cy.get('.action-button').eq(1).click();
     cy.get(':nth-child(4)').should('contain', 'Status: Fulfilled');
 
     cy.get('.right-column > h3').should('contain', 'Organization Details');

src/Components/App/App.js

@@ -4,36 +4,33 @@ import NavBar from '../NavBar/NavBar';
 import Homepage from '../Homepage/Homepage';
 import OrganizationDashboard from '../OrganizationDashboard/OrganizationDashboard';
 import ProvideAidPage from '../ProvideAidPage/ProvideAidPage';
-import Error404 from '../ErrorHandling/Error404'; 
+import Error404 from '../ErrorHandling/Error404';
 import Error500 from '../ErrorHandling/Error500';
 import GeneralError from '../ErrorHandling/GeneralError';
 import Contact from '../Contact/Contact'
 
 function App() {
-  console.log('App component is rendering');
-  const [isLoggedIn, setIsLoggedIn] = useState(false); 
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
   const navigate = useNavigate();
 
   const handleOrganizationLogin = () => {
     if (isLoggedIn) {
-      setIsLoggedIn(false); 
-      console.log("Attempting to logout and redirect to homepage");
+      setIsLoggedIn(false);
       navigate('/');
     } else {
       setIsLoggedIn(true);
       navigate('/organizationDashboard');
     }
   }
 
-
   return (
     <>
       <NavBar isLoggedIn={isLoggedIn} handleLogin={handleOrganizationLogin} />
       <Routes>
         <Route exact path='/' element={<Homepage />} />
         <Route exact path='/Contact' element={<Contact />} />
         <Route exact path='/provideAid' element={<ProvideAidPage />} />
-        <Route exact path='/OrganizationDashboard' element={<OrganizationDashboard orgId={99}/>} />
+        <Route exact path='/OrganizationDashboard' element={<OrganizationDashboard orgId={99} />} />
         <Route path='/error500' element={<Error500 />} />
         {window.location.pathname === '/500-test' && (
           <Route path="/500-test" element={<Error500 />} />

src/Components/Contact/Contact.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import '../Contact/Contact.scss'
 import weAllHuman from '../../images/usa-custom.jpeg';
-// import weAllHuman from '../../images/images.jpeg';
 
 const ContactSection = () => {
     return (

src/Components/Contact/Contact.scss

@@ -17,9 +17,11 @@ $font-stack: 'Arial', sans-serif;
     margin-bottom: 0.5rem;
     text-align: left;
     padding-left: 0;
-    padding: 1rem 1rem; 
+    padding: 1rem 1rem;
 
-    h3, p, footer {
+    h3,
+    p,
+    footer {
         margin-left: 0;
         padding-left: 0;
     }
@@ -65,13 +67,11 @@ $font-stack: 'Arial', sans-serif;
 
             .right-side h3 {
                 font-size: 3rem;
-          
+
             }
-            
+
             .resources-header {
-            //   color: $netflix-red;
-            //   color:#141414;
-              color:#033e62;
+                color: #033e62;
             }
 
             ul {
@@ -99,44 +99,38 @@ $font-stack: 'Arial', sans-serif;
 
     .bottom-section {
         margin-top: -30px;
-        // background-color:#141414;
-        background-color:#9d9c90;
-        // background-color: #2196F3;
-        // background-color: #2facf6;
+        background-color: #9d9c90;
         color: #FFFFFF;
         padding: 1rem;
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         font-size: 0.9rem;
-        color: #fff; 
+        color: #fff;
 
-    h2, h3 {
-        font-size: 1rem;
-        // color: #fff;
-        color: #033e62;
-    }
+        h2,
+        h3 {
+            font-size: 1rem;
+            color: #033e62;
+        }
 
-    .small-text {
-        font-size: 0.8rem;
-    }
+        .small-text {
+            font-size: 0.8rem;
+        }
 
         .netflix-red {
-            // color: $netflix-red;
-            // color:#141414;
-            // color: #2196F3;
             color: #033e62;
             margin-top: 1rem;
             font-weight: 500;
             margin-bottom: 0.7rem;
         }
 
-        p > a {
+        p>a {
             margin: 0 0.5rem;
-            color: #fff; 
+            color: #fff;
             font-size: 0.7rem;
         }
-        
-        p.special-links > a {
+
+        p.special-links>a {
             margin: 0 0.25rem;
         }
 
@@ -149,7 +143,7 @@ $font-stack: 'Arial', sans-serif;
             margin: 0 0.25rem;
             margin-left: -4px;
         }
-        
+
         footer {
             margin-top: 1.4rem;
             display: flex;

src/Components/DropDown/DropDown.js

@@ -1,4 +1,4 @@
-import { useEffect, useReducer, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { GET_ALL_LOCATIONS } from '../../apollo-client/queries';
 import './DropDown.scss';

src/Components/ErrorHandling/Error404.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import "./Error404.scss";
 import RefugeeKids from "../../images/refugees-kids.png";
-// import RefugeeImage from '../../images/welcome-usa-refugee3.png';
 
 const refugeeInformativeFacts = [
   "Refugees: A refugee is someone who has been forced to flee his or her country because of persecution, war, or violence. They often can't return home or are afraid to do so.",
@@ -55,7 +54,6 @@ function Error404() {
 
       </div>
       <div className="image-container">
-        {/* <img src={RefugeeImage} alt="Refugee Image" className="refugee-image" /> */}
         <img src={RefugeeKids} alt="Refugees Kids" className="refugee-image" />
       </div>
     </div>

src/Components/ErrorHandling/Error404.scss

@@ -1,13 +1,13 @@
 $primary-color: #5a3822;
 $secondary-color: #FFC300;
-$btn-color:  #FFD700;
+$btn-color: #FFD700;
 $font-stack: 'Times New Roman', serif;
 
 .not-found-page-container {
-  color: $primary-color; 
+  color: $primary-color;
   text-align: center;
   padding: 2em;
-  min-height: 100vh; 
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -20,7 +20,7 @@ $font-stack: 'Times New Roman', serif;
       font-size: 2em;
       margin-bottom: 1em;
       text-align: center;
-      border-bottom: 3px solid $secondary-color; 
+      border-bottom: 3px solid $secondary-color;
       padding-bottom: 0.5em;
     }
   }
@@ -34,7 +34,6 @@ $font-stack: 'Times New Roman', serif;
   }
 
   & .error404-go-home-button {
-    // background-color: $btn-color !important;
     background-color: $btn-color;
     color: black;
     padding: 10px 20px;
@@ -46,13 +45,12 @@ $font-stack: 'Times New Roman', serif;
     margin-top: 20px;
 
     &:hover {
-      // background-color: $btn-color !important;
       background-color: $secondary-color;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
       transform: translateY(-2px);
     }
   }
-  
+
   & .error404-navlink {
     background-color: transparent;
     box-shadow: none;
@@ -64,17 +62,18 @@ $font-stack: 'Times New Roman', serif;
     padding: 0.7em;
     border-radius: 5px;
     background-color: whitesmoke;
-    display: flex; 
-    flex-direction: row; 
+    display: flex;
+    flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); 
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
     justify-content: center;
     max-width: 90%;
     max-height: 10rem;
 
-    & .ref-fact-heading, & .ref-fact {
-      padding: 0.1em; 
+    & .ref-fact-heading,
+    & .ref-fact {
+      padding: 0.1em;
       margin: 0.1em;
     }
   }
@@ -83,7 +82,7 @@ $font-stack: 'Times New Roman', serif;
     width: 100%;
     max-width: 500px;
     margin-top: 10%;
-    margin-right: 5%; 
+    margin-right: 5%;
     border-radius: 1%;
     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
   }
@@ -147,4 +146,4 @@ $font-stack: 'Times New Roman', serif;
       margin-top: 7%;
     }
   }
-}
+}

src/Components/Homepage/Homepage.js

@@ -5,9 +5,6 @@ import '../Homepage/Homepage.scss'
 function Homepage() {
   const [showVideo, setShowVideo] = useState(false);
 
-  console.log('Homepage component is rendering'); //dont forget to delet
-  console.log('Value of showVideo is:', showVideo); //dont forget to delete
-
   return (
     <header className="home-header">
       <main>

src/Components/NavBar/NavBar.js

@@ -1,16 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import './NavBar.scss';
 import { NavLink } from 'react-router-dom';
 import logoImage from '../../images/refuge.png';
 
 export default function NavBar({ isLoggedIn, handleLogin }) {
 
-
-  console.log("NavBar rendering. isLoggedIn:", isLoggedIn); //dont forget to delete
-
-  useEffect(() => {
-    console.log("NavBar Mounted"); //dont forget to delete
-  }, []);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
     <nav className='nav-bar'>
@@ -19,9 +14,11 @@ export default function NavBar({ isLoggedIn, handleLogin }) {
           <img src={logoImage} alt="Logo" className="logo-image" />
         </NavLink>
       </div>
-      <div className="nav-items">
+      <button className="hamburger" onClick={() => setMenuOpen(!menuOpen)}>
+        &#9776;
+      </button>
+      <div className={`nav-items ${menuOpen ? 'active' : ''}`}>
         <NavLink className='nav-link' to='/provideAid'>aid request</NavLink>
-        <NavLink className='nav-link' to='/'>donate</NavLink>
         <NavLink className='nav-link' to='/'>mission</NavLink>
         <NavLink className='nav-link' to='/contact'>helpful resources</NavLink>
       </div>
@@ -40,4 +37,3 @@ export default function NavBar({ isLoggedIn, handleLogin }) {
 }
 
 
-