Merge pull request #35 from Refugee-Aid-Capstone/refactor/styling

Refactor/styling

cypress/e2e/homePage.cy.js

@@ -10,7 +10,7 @@ describe('Homepage Tests', () => {
         cy.get('.logo-image').click()
         cy.url().should('include', '/')
         cy.get('.home-header').should('be.visible');
-        cy.get('.content-section').should('be.visible');
+        cy.get('.mission-content-section').should('be.visible');
         cy.get('.media-side').should('be.visible');
         cy.get('.text-side').should('be.visible');
         cy.get('.refugee-image-container img').should('have.attr', 'alt', 'Refugees');

src/Components/Contact/Contact.js

@@ -1,82 +1,3 @@
-// import React from 'react';
-// import '../Contact/Contact.scss'
-// import weAllHuman from '../../images/usa-custom.jpeg';
-
-// const ContactSection = () => {
-//     return (
-//         <div className="contact-section">
-//             <div className="top-section">
-//                 <div className="left-side">
-//                     <div className="weallhuman-container">
-//                         <img src={weAllHuman} alt="usa-custom" className="weallhuman-img" />
-//                     </div>
-//                 </div>
-//                 <div className="right-side">
-//                     <h3 className="resources-header">HELPFUL RESOURCES</h3>
-//                     <ul>
-//                         <li>
-//                             <a href="https://www.wrapsnet.org/documents/FY%202023%20Reception%20&%20Placement%20Fact%20Sheet.pdf" target="_blank" rel="noopener noreferrer">
-//                                 FY 2023 Reception & Placement Fact Sheet
-//                             </a>
-//                         </li>
-//                         <li>
-//                             <a href="https://www.wrapsnet.org/afghans-granted-humanitarian-parole/" target="_blank" rel="noopener noreferrer">
-//                                 R&P Affiliate Directory as of July 2023
-//                             </a>
-//                         </li>
-//                         <li>
-//                             <a href="https://www.wrapsnet.org/documents/Things%20You%20Need%20to%20Know%20About%20Resettling%20in%20the%20United%20States%20(English).pdf" target="_blank" rel="noopener noreferrer">
-//                                 Things You Need to Know About Resettling in the United States (English)
-//                             </a>
-//                         </li>
-//                         <li>
-//                             <a href="https://www.wrapsnet.org/documents/Things%20You%20Need%20to%20Know%20About%20Resettling%20in%20the%20United%20States%20(Dari).pdf" target="_blank" rel="noopener noreferrer">
-//                                 Things You Need to Know About Resettling in the United States (Dari/ دری)
-//                             </a>
-//                         </li>
-//                         <li>
-//                             <a href="https://www.wrapsnet.org/documents/Things%20You%20Need%20to%20Know%20About%20Resettling%20in%20the%20United%20States%20(Pashto).pdf" target="_blank" rel="noopener noreferrer">
-//                                 Things You Need to Know About Resettling in the United States (Pashto/ پښتو)
-//                             </a>
-//                         </li>
-//                     </ul>
-//                 </div>
-//             </div>
-
-//             <div className="bottom-section">
-//                 <h2>CONTACT US</h2>
-//                 <p className="small-text">Need technical assistance with this website? Send an email to:<a href="mailto:[email protected]">[email protected]</a></p>
-
-
-//                 <p className="netflix-red">
-//                     The U.S. Refugee Admissions Program (USRAP) is free of charge.
-//                     Any requests to solicit funds for referral or access to the USRAP
-//                     are illegitimate and not associated with the U.S. government.
-//                 </p>
-//                 <p className="government-links">
-//                     <a href="https://www.state.gov/" target="_blank" rel="noopener noreferrer">U.S. Department of State</a> |
-//                     <a href="https://www.state.gov/bureaus-offices/under-secretary-for-civilian-security-democracy-and-human-rights/bureau-of-population-refugees-and-migration/" target="_blank" rel="noopener noreferrer">Bureau of Population, Refugees, and Migration</a> |
-//                     <a href="https://www.state.gov/refugee-admissions/" target="_blank" rel="noopener noreferrer">Refugee Admissions</a>
-//                 </p>
-
-
-//                 <footer>
-//                     <p className="copyright-links">
-//                         Copyright © 2016 Refugee Processing Center
-//                     </p>
-//                     <p className="special-links">
-//                         <a href="https://www.wrapsnet.org/privacy-policy/" target="_blank" rel="noopener noreferrer">Privacy Statement</a> |
-//                         <a href="https://www.wrapsnet.org/terms-of-use/" target="_blank" rel="noopener noreferrer">Terms of Use</a>
-//                     </p>
-//                 </footer>
-//             </div>
-//         </div>
-//     );
-// };
-
-// export default ContactSection;
-
-import React from 'react';
 import '../Contact/Contact.scss'
 import weAllHuman from '../../images/usa-custom.jpeg';
 

src/Components/DropDown/DropDown.js

@@ -1,15 +1,16 @@
 import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { GET_ALL_LOCATIONS } from '../../apollo-client/queries';
-import './DropDown.scss';
 import { useCombobox } from 'downshift';
 import { useNavigate } from 'react-router-dom';
 import Spinner from '../Spinner/Spinner';
+import PropTypes from 'prop-types';
+import './DropDown.scss';
 
-export default function DropDown({ city, setSearchLocation }) {
+export default function DropDown({ setSearchLocation }) {
   const [autocompleteSuggestions, setAutocompleteSuggestions] = useState([]);
   const { loading, error, data } = useQuery(GET_ALL_LOCATIONS);
-  const [selectedItem, setSelectedItem] = useState('')
+  const [selectedItem, setSelectedItem] = useState('');
   const navigate = useNavigate();
 
   const { getInputProps, getMenuProps, getItemProps, highlightedIndex } =
@@ -31,15 +32,13 @@ export default function DropDown({ city, setSearchLocation }) {
             .map(location => `${location.city}, ${location.state}`)
             .slice(0, 5);
 
-            suggestions.forEach(location => {
-              const [city, 
-              // state
-            ] = location.split(', ');
+          suggestions.forEach(location => {
+            const [city] = location.split(', ');
 
-              if (inputValue.toLowerCase() === city.toLowerCase()) {
-                suggestions = [];
-              }
-            });
+            if (inputValue.toLowerCase() === city.toLowerCase()) {
+              suggestions = [];
+            }
+          });
         }
 
         setAutocompleteSuggestions(suggestions);
@@ -53,14 +52,14 @@ export default function DropDown({ city, setSearchLocation }) {
       },
     });
 
-    if (error) {
-      navigate('/error500');
-      return null;
-    }
-  
-    if (loading) {
-      return <Spinner />;
-    }
+  if (error) {
+    navigate('/error500');
+    return null;
+  }
+
+  if (loading) {
+    return <Spinner />;
+  }
 
   return (
     <>
@@ -99,3 +98,8 @@ export default function DropDown({ city, setSearchLocation }) {
     </>
   );
 }
+
+
+DropDown.propTypes = {
+  setSearchLocation: PropTypes.func.isRequired
+}

src/Components/DropDown/DropDown.scss

@@ -1,6 +1,6 @@
 .suggestion-dropdown {
-  // background-color: white;
-  background-color: #30acf6;
+  color: black;
+  background-color: white;
   margin-right: 1rem;
   flex: 1;
   max-width: 300px;
@@ -10,23 +10,14 @@
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
 }
 
-.suggestion {
-  padding: 0.5rem;
-  list-style-type: none;
-
-}
-
 .suggestion[data-highlighted='true'] {
   background-color: #30acf6;
 }
 
-.city-input {
-  margin-right: 1rem;
-  flex: 1;
-  max-width: 300px;
-  height: 40px;
+.suggestion {
+  padding: 0.5rem;
+  list-style-type: none;
   border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  padding: 0.6rem;
-  font-size: 1rem;
 }
+
+

src/Components/Homepage/Homepage.js

@@ -17,7 +17,7 @@ function Homepage() {
     <header className="home-header">
       <a href="#main-content" className="skip-link">Skip to main content</a>
       <main id="main-content">
-        <section className="content-section">
+        <section className="mission-content-section">
           <div className="media-side">
             <div className="media-content">
               {showVideo ? (

src/Components/Homepage/Homepage.scss

@@ -29,12 +29,6 @@ body {
   }
 }
 
-// below is for testing perpose only
-// .content-section { border: 2px solid red; }
-// .media-side { border: 2px solid green; }
-// .text-side { border: 2px solid blue; }
-// .refugee-image-container { border: 2px solid yellow; }
-
 .home-header {
   .navbar-container {
     width: 100%;
@@ -48,7 +42,7 @@ body {
   justify-content: flex-start;
 }
 
-.content-section {
+.mission-content-section {
   padding-top: 30px;
   display: flex;
   align-items: flex-start;
@@ -198,7 +192,7 @@ iframe {
 }
 
 @media (max-width: 768px) {
-  .content-section {
+  .mission-content-section {
     flex-direction: column;
 
     .media-side,

src/Components/NavBar/NavBar.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import './NavBar.scss';
+import { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import logoImage from '../../images/refuge.png';
+import './NavBar.scss';
+import PropTypes from 'prop-types';
 
 export default function NavBar({ isLoggedIn, handleLogin }) {
 
@@ -40,3 +41,8 @@ export default function NavBar({ isLoggedIn, handleLogin }) {
     </nav>
   );
 }
+
+NavBar.propTypes = {
+  isLoggedIn: PropTypes.bool,
+  handleLogin: PropTypes.func
+}