diff --git a/cypress/e2e/homePage.cy.js b/cypress/e2e/homePage.cy.js index 07ac641..4641835 100644 --- a/cypress/e2e/homePage.cy.js +++ b/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'); diff --git a/src/Components/Contact/Contact.js b/src/Components/Contact/Contact.js index cce958b..e6814c5 100644 --- a/src/Components/Contact/Contact.js +++ b/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 ( -//
-//
-//
-//
-// usa-custom -//
-//
-//
-//

HELPFUL RESOURCES

-// -//
-//
- -//
-//

CONTACT US

-//

Need technical assistance with this website? Send an email to:nanajon66@gmail.com

- - -//

-// 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. -//

-//

-// U.S. Department of State | -// Bureau of Population, Refugees, and Migration | -// Refugee Admissions -//

- - -// -//
-//
-// ); -// }; - -// export default ContactSection; - -import React from 'react'; import '../Contact/Contact.scss' import weAllHuman from '../../images/usa-custom.jpeg'; diff --git a/src/Components/DropDown/DropDown.js b/src/Components/DropDown/DropDown.js index 37016e7..a45a6d3 100644 --- a/src/Components/DropDown/DropDown.js +++ b/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 ; - } + if (error) { + navigate('/error500'); + return null; + } + + if (loading) { + return ; + } return ( <> @@ -99,3 +98,8 @@ export default function DropDown({ city, setSearchLocation }) { ); } + + +DropDown.propTypes = { + setSearchLocation: PropTypes.func.isRequired +} \ No newline at end of file diff --git a/src/Components/DropDown/DropDown.scss b/src/Components/DropDown/DropDown.scss index 4294226..9d955b8 100644 --- a/src/Components/DropDown/DropDown.scss +++ b/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; } + + diff --git a/src/Components/Homepage/Homepage.js b/src/Components/Homepage/Homepage.js index fb4d827..3986d06 100644 --- a/src/Components/Homepage/Homepage.js +++ b/src/Components/Homepage/Homepage.js @@ -17,7 +17,7 @@ function Homepage() {
Skip to main content
-
+
{showVideo ? ( diff --git a/src/Components/Homepage/Homepage.scss b/src/Components/Homepage/Homepage.scss index 21f1ffd..e3d95e8 100644 --- a/src/Components/Homepage/Homepage.scss +++ b/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, diff --git a/src/Components/NavBar/NavBar.js b/src/Components/NavBar/NavBar.js index 70f1932..271794b 100644 --- a/src/Components/NavBar/NavBar.js +++ b/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 }) { ); } + +NavBar.propTypes = { + isLoggedIn: PropTypes.bool, + handleLogin: PropTypes.func +} \ No newline at end of file diff --git a/src/Components/NavBar/NavBar.scss b/src/Components/NavBar/NavBar.scss index 7e4f2d1..9ce1d2b 100644 --- a/src/Components/NavBar/NavBar.scss +++ b/src/Components/NavBar/NavBar.scss @@ -1,4 +1,5 @@ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap'); +@import '../../index.scss'; body { font-family: 'Open Sans', sans-serif; @@ -6,25 +7,16 @@ body { } .header { - font-family: 'Open Sans', sans-serif; font-weight: 600; } -.paragraph { - font-family: 'Open Sans', sans-serif; - font-size: 16px; -} - .nav-bar { display: flex; - flex-wrap: wrap; - justify-content: flex-start; align-items: center; - background-color: #30acf6; + background-color: $primaryBlue; padding: 1rem 2rem; - box-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #30acf6, 0 0 25px #30acf6, 0 0 30px #30acf6, 0 0 35px #30acf6; + box-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px $primaryBlue, 0 0 25px #30acf6, 0 0 30px #30acf6, 0 0 35px #30acf6; height: 100px; - overflow: hidden; } .navbar-logo { @@ -40,6 +32,7 @@ body { width: 4rem; height: auto; margin-right: 0.5rem; + margin-top: 1rem; transition: transform 0.3s ease; position: relative; top: -7px; @@ -60,16 +53,6 @@ body { margin-left: auto; } -.login-button { - background-color: transparent; - border: none; - cursor: pointer; - - &:hover { - background-color: rgba(255, 255, 255, 0.1); - } -} - .nav-link { text-decoration: none; cursor: pointer; @@ -77,7 +60,7 @@ body { font-weight: 700; font-size: 1.3rem; margin-right: 1rem; - color: #EDEDED; + color: $offWhite; font-weight: 600; letter-spacing: 1px; padding: 0.5rem 1rem; @@ -89,61 +72,30 @@ body { } &.active { - border-bottom: 2px solid #EDEDED; + border-bottom: 2px solid $offWhite; } } .nav-button { - background-color: #3498db; - color: #ffffff; - // color: #031662; + background-color: $secondaryBlue; + text-transform: capitalize; + color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-family: 'Roboto', sans-serif; - font-size: 0.7rem; + font-size: 1rem; transition: background-color 0.3s ease; - box-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #30acf6, 0 0 25px #30acf6, 0 0 30px #30acf6, 0 0 35px #30acf6; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); &:hover { - background-color: #2980b9; + background-color: $tertiaryBlue; } &:active { transform: scale(0.98); } - - &:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4); - } - - .nav-button.logout { - background-color: #e74c3c; - color: #ffffff; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - font-family: 'Roboto', sans-serif; - font-size: 1rem; - transition: background-color 0.3s ease; - - &:hover { - background-color: #c0392b; - } - - &:active { - transform: scale(0.98); - } - - &:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4); - } - } - } .hamburger { @@ -185,9 +137,9 @@ body { display: flex; flex-direction: column; position: absolute; - top: 70px; - right: 10px; - background-color: rgba(48, 172, 246, 0.5); + top: 80px; + right: 0px; + background-color: $primaryBlue; border-radius: 10px; z-index: 1000; } diff --git a/src/Components/OrgRequestCard/OrgRequestCard.js b/src/Components/OrgRequestCard/OrgRequestCard.js index 874a484..a9ad54c 100644 --- a/src/Components/OrgRequestCard/OrgRequestCard.js +++ b/src/Components/OrgRequestCard/OrgRequestCard.js @@ -3,6 +3,7 @@ import '../OrganizationDashboard/OrganizationDashboard.scss'; import './OrgRequest.scss'; import { useMutation } from '@apollo/client'; import { UPDATE_AID_REQUEST } from '../../apollo-client/mutations'; +import PropTypes from 'prop-types'; export default function OrgRequestCard({ request }) { const { id, description, aidType, language, status } = request; @@ -33,3 +34,13 @@ export default function OrgRequestCard({ request }) { ); } + +OrgRequestCard.propTypes = { + request: PropTypes.shape({ + id: PropTypes.string, + description: PropTypes.string, + aidType: PropTypes.string, + language: PropTypes.string, + status: PropTypes.string, + }), +}; diff --git a/src/Components/OrganizationDashboard/OrganizationDashboard.js b/src/Components/OrganizationDashboard/OrganizationDashboard.js index ead870e..2f88efe 100644 --- a/src/Components/OrganizationDashboard/OrganizationDashboard.js +++ b/src/Components/OrganizationDashboard/OrganizationDashboard.js @@ -5,6 +5,7 @@ import { GET_ONE_ORG } from '../../apollo-client/queries'; import OrgRequestCard from '../OrgRequestCard/OrgRequestCard'; import Spinner from '../Spinner/Spinner'; import '../OrganizationDashboard/OrganizationDashboard.scss'; +import PropTypes from 'prop-types'; export default function OrganizationDashboard({ orgId }) { const navigate = useNavigate(); @@ -73,3 +74,7 @@ export default function OrganizationDashboard({ orgId }) {
); } + +OrganizationDashboard.propTypes = { + orgId: PropTypes.number +} \ No newline at end of file diff --git a/src/Components/OrganizationDisplay/OrganizationDisplay.js b/src/Components/OrganizationDisplay/OrganizationDisplay.js index aeb8d6a..3877a1f 100644 --- a/src/Components/OrganizationDisplay/OrganizationDisplay.js +++ b/src/Components/OrganizationDisplay/OrganizationDisplay.js @@ -2,6 +2,7 @@ import React from 'react'; import welcomeImage from '../../images/welcome-usa-refugee.png'; import Map from '../../Map/Map'; import '../ProvideAidPage/ProvideAidPage.scss' +import PropTypes from 'prop-types'; export default function OrganizationDisplay({ selectedOrganization }) { const { @@ -53,4 +54,21 @@ export default function OrganizationDisplay({ selectedOrganization }) {
); } - \ No newline at end of file + + OrganizationDisplay.propTypes = { + selectedOrganization: PropTypes.shape({ + name: PropTypes.string, + contactPhone: PropTypes.string, + contactEmail: PropTypes.string, + streetAddress: PropTypes.string, + website: PropTypes.string, + city: PropTypes.string, + state: PropTypes.string, + zip: PropTypes.string, + latitude: PropTypes.number, + longitude: PropTypes.number, + shareAddress: PropTypes.bool, + sharePhone: PropTypes.bool, + shareEmail: PropTypes.bool, + }) + } \ No newline at end of file diff --git a/src/Components/ProvideAidPage/ProvideAidPage.scss b/src/Components/ProvideAidPage/ProvideAidPage.scss index a931cfb..a7bea9a 100644 --- a/src/Components/ProvideAidPage/ProvideAidPage.scss +++ b/src/Components/ProvideAidPage/ProvideAidPage.scss @@ -1,128 +1,61 @@ -$primary-color: #37b3fe; -$secondary-color: #3c8bc9; -$netflix-red: #031662; -$default-padding: 10px; -$dark-bg: $secondary-color; -$lighter-bg: #2a6f9e; -$font-stack: 'Arial', sans-serif; +@import '../../index.scss'; * { - font-family: $font-stack; - transition: all 0.3s; + transition: all 0.3s; } .provide-aid-page { - background-color: $dark-bg; - margin-top: 2rem; - display: flex; - flex-direction: column; - height: 100vh; - color: #fff; + font-family: 'Arial', sans-serif; + background-color: #ebf4fb; + margin-top: 5vh; + display: flex; + flex-direction: column; + color: #fff; } .content-section { - padding: $default-padding * 2; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; + height: 80vh; + padding: 2rem; + padding-top: 0; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(330px ,1fr)); + gap: 2rem; } .search-section, .organization-display { - padding: $default-padding * 1.5; - background-color: $lighter-bg; - border-radius: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); + padding: 1rem; + background-color: $secondaryBlue; + border-radius: $defaultRadius; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .welcome-image-container { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + border-radius: $defaultRadius; + + img { width: 100%; - height: 100%; - border-radius: 5px; - overflow: hidden; -} - -.search-section { - input[type='text'] { - padding: .6rem; - border: none; - border-radius: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); - font-size: 1rem; - } -} - - -.left-section .filter-fields select { - background-color: darken($lighter-bg, 10%); - color: #fff; - border: none; - padding: $default-padding; - border-radius: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - transition: box-shadow 0.3s ease; - - &:focus { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - outline: none; - } + } } .organization-display { - h2 { - color: $netflix-red; - font-size: 1.5em; - margin-bottom: 1rem; - } - - p { - color: #EAEAEA; - margin: 10px; - } - - .map-placeholder { - background-color: $lighter-bg; - width: 100%; - height: auto; - border-radius: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - } -} - -.some-element { - width: 300px; - font-size: 16px; - background-color: darken($lighter-bg, 15%); - border-radius: 5px; - padding: $default-padding; - color: #fff; - transition: transform 0.3s ease; - - &:hover { - transform: scale(1.05); - } -} - -.organization-display address { - font-style: normal; - display: block; - margin: 10px; + p { + color: #eaeaea; + margin: 10px; } - +} @media (max-width: 768px) { - .some-element { - width: 200px; - font-size: 14px; - } -} + .search-section { + order: 2; + } -@media (max-width: 480px) { - .some-element { - width: 100%; - font-size: 12px; - } -} + .welcome-image-container { + max-height: 1fr; + } +} \ No newline at end of file diff --git a/src/Components/RequestCard/RequestCard.js b/src/Components/RequestCard/RequestCard.js index 3cdb5cb..a52b5a9 100644 --- a/src/Components/RequestCard/RequestCard.js +++ b/src/Components/RequestCard/RequestCard.js @@ -1,5 +1,7 @@ import React from 'react'; import './RequestCard.scss'; +import PropTypes from 'prop-types'; + export default function RequestCard({ request, selectOrganization }) { const { @@ -23,3 +25,14 @@ export default function RequestCard({ request, selectOrganization }) { ); } + +RequestCard.propTypes = { + request: PropTypes.shape({ + id: PropTypes.number, + description: PropTypes.string, + aidType: PropTypes.string, + language: PropTypes.string, + status: PropTypes.string, + }), + selectOrganization: PropTypes.func +}; \ No newline at end of file diff --git a/src/Components/RequestCard/RequestCard.scss b/src/Components/RequestCard/RequestCard.scss index 3b0c7c4..8f45513 100644 --- a/src/Components/RequestCard/RequestCard.scss +++ b/src/Components/RequestCard/RequestCard.scss @@ -1,25 +1,18 @@ -@use "sass:math"; - -$primary-color: #37b3fe; -$secondary-color: #3c8bc9; -$netflix-red: #031662; -$default-padding: 10px; -$dark-bg: $secondary-color; -$lighter-bg: #2a6f9e; -$font-stack: 'Arial', sans-serif; +@import '../../index.scss'; .request-card { - padding: $default-padding * 2; - background-color: $lighter-bg; - border-radius: 5px; + padding: 1.2rem; + border-radius: $defaultRadius; + margin-top: 0.2rem; + margin-right: 1rem; + background-color: $offWhite; + color: $darkBlue; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); - color: #fff; cursor: pointer; transition: transform 0.3s; - margin-top: 0.4rem; - + &:hover { - transform: translateY(-10px); + transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } } @@ -29,24 +22,22 @@ $font-stack: 'Arial', sans-serif; } .card-text { - font-family: $font-stack; text-transform: capitalize; - margin: math.div($default-padding, 2); + margin: 5px; &.type { font-weight: 700; - color: $netflix-red; - border-bottom: 2px solid $netflix-red; + border-bottom: 2px solid $darkBlue; display: inline-block; } &.org { + font-weight: 700; font-size: 1.2em; } &.description { text-transform: none; - color: rgba(255, 255, 255, 0.8); - font-size: 0.9em; + font-size: 1rem; } } diff --git a/src/Components/Search/Search.js b/src/Components/Search/Search.js index 7c360ed..16fc588 100644 --- a/src/Components/Search/Search.js +++ b/src/Components/Search/Search.js @@ -4,6 +4,8 @@ import { useLazyQuery } from '@apollo/client'; import SearchResults from '../SearchResults/SearchResults'; import './Search.scss'; import DropDown from '../DropDown/DropDown'; +import PropTypes from 'prop-types'; + export default function Search({ selectOrganization }) { const [city, setCity] = useState(''); @@ -37,7 +39,6 @@ export default function Search({ selectOrganization }) { placeholder='State' required /> - {/* */}