From a47a85851e1cd5d28830f8091220abd120299ba3 Mon Sep 17 00:00:00 2001 From: Parvin Sattorova Date: Fri, 20 Oct 2023 23:52:34 -0600 Subject: [PATCH 1/3] Add sypress test to contact component --- cypress/e2e/contactSection.cy.js | 39 +++++++++++++++ package-lock.json | 14 +++--- package.json | 2 +- src/Components/Contact/Contact.js | 2 +- src/Components/Homepage/Homepage.scss | 46 +++++++++--------- .../images/refugee-child-looking.png | Bin 6 files changed, 72 insertions(+), 31 deletions(-) create mode 100644 cypress/e2e/contactSection.cy.js rename "src/apollo-client/Screenshot 2023-10-14 at 3.04.00\342\200\257PM.png" => src/images/refugee-child-looking.png (100%) diff --git a/cypress/e2e/contactSection.cy.js b/cypress/e2e/contactSection.cy.js new file mode 100644 index 0000000..e8147f8 --- /dev/null +++ b/cypress/e2e/contactSection.cy.js @@ -0,0 +1,39 @@ +describe('ContactSection Component - Happy Path', () => { + + beforeEach(() => { + cy.visit('http://localhost:3000/'); + }); + + it('should display the main elements of the homepage', () => { + cy.get('.home-header').should('be.visible'); + cy.get('.nav-bar').should('be.visible'); + cy.get('[href="/contact"]').should('contain', 'helpful resources'); + cy.get('[href="/contact"]').click(); + }); + + it('should render the component correctly', () => { + cy.visit('http://localhost:3000/contact'); + + cy.location('pathname').should('eq', '/contact'); + cy.viewport(1280, 720); + cy.get('.weallhuman-img').should('be.visible'); + }); + + it('should navigate to the contact page from the homepage', () => { + cy.visit('http://localhost:3000'); + cy.get('.nav-bar').should('be.visible'); + cy.get('[href="/contact"]').click(); + cy.url().should('include', '/contact'); + }); +}); + +describe('ContactSection Component - Sad Path', () => { + + it('should handle missing image gracefully', () => { + cy.intercept('GET', '**/usa-custom.jpeg', { statusCode: 404 }); + cy.visit('http://localhost:3000/contact'); + cy.reload(); + cy.viewport(1280, 720); + cy.get('img[alt="usa-custom"]').should('be.visible'); + }); +}); diff --git a/package-lock.json b/package-lock.json index 21983dc..745bd9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "cypress": "^13.3.1" + "cypress": "^13.3.2" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -7129,9 +7129,9 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/cypress": { - "version": "13.3.1", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.1.tgz", - "integrity": "sha512-g4mJLZxYN+UAF2LMy3Znd4LBnUmS59Vynd81VES59RdW48Yt+QtR2cush3melOoVNz0PPbADpWr8DcUx6mif8Q==", + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.2.tgz", + "integrity": "sha512-ArLmZObcLC+xxCp7zJZZbhby9FUf5CueLej9dUM4+5j37FTS4iMSgHxQLDu01PydFUvDXcNoIVRCYrHHxD7Ybg==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -24513,9 +24513,9 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "cypress": { - "version": "13.3.1", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.1.tgz", - "integrity": "sha512-g4mJLZxYN+UAF2LMy3Znd4LBnUmS59Vynd81VES59RdW48Yt+QtR2cush3melOoVNz0PPbADpWr8DcUx6mif8Q==", + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.3.2.tgz", + "integrity": "sha512-ArLmZObcLC+xxCp7zJZZbhby9FUf5CueLej9dUM4+5j37FTS4iMSgHxQLDu01PydFUvDXcNoIVRCYrHHxD7Ybg==", "dev": true, "requires": { "@cypress/request": "^3.0.0", diff --git a/package.json b/package.json index fb5911c..4458445 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,6 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "cypress": "^13.3.1" + "cypress": "^13.3.2" } } diff --git a/src/Components/Contact/Contact.js b/src/Components/Contact/Contact.js index 151aa9b..fb1df97 100644 --- a/src/Components/Contact/Contact.js +++ b/src/Components/Contact/Contact.js @@ -8,7 +8,7 @@ const ContactSection = () => {
- Refugees + usa-custom
diff --git a/src/Components/Homepage/Homepage.scss b/src/Components/Homepage/Homepage.scss index 594fd36..e319186 100644 --- a/src/Components/Homepage/Homepage.scss +++ b/src/Components/Homepage/Homepage.scss @@ -25,11 +25,11 @@ $netflix-red: #E50914; display: flex; flex-direction: column; align-items: center; - justify-content: flex-start; + justify-content: flex-start; } .content-section { - padding-top: 30px; + padding-top: 30px; display: flex; align-items: flex-start; justify-content: space-between; @@ -44,12 +44,12 @@ $netflix-red: #E50914; display: flex; justify-content: center; align-items: center; - flex-direction: column; + flex-direction: column; - button.play-video, + button.play-video, button.hide-video { - margin-top: 15px; - } + margin-top: 15px; + } .media-content { width: 100%; @@ -57,10 +57,10 @@ $netflix-red: #E50914; justify-content: center; align-items: center; } - + .video-controls { margin-top: 20px; - text-align: center; + text-align: center; } .refugee-image-container { @@ -72,16 +72,16 @@ $netflix-red: #E50914; overflow: hidden; position: relative; } - + .refugees-img { margin-top: 30px; top: 0; left: 0; right: 0; bottom: 0; - max-width: 100%; + max-width: 100%; height: auto; - margin: auto; + margin: auto; display: block; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; @@ -95,14 +95,14 @@ $netflix-red: #E50914; display: flex; flex-direction: column; justify-content: center; - align-items: center; + align-items: center; padding: 40px; .title-container { margin-bottom: 20px; background: linear-gradient(135deg, #e9f5fc, #fff); padding: 10px 20px; - border-radius: 8px; + border-radius: 10px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05); h2 { @@ -110,7 +110,7 @@ $netflix-red: #E50914; letter-spacing: 1px; text-transform: uppercase; text-align: center; - font-weight: 600; + font-weight: 600; font-size: 2.2rem; line-height: 1.3; } @@ -121,16 +121,18 @@ $netflix-red: #E50914; line-height: 1.6; color: rgba(0, 0, 0, 0.7); text-align: justify; - max-width: 80%; font-size: 1.1rem; color: #555; + max-width: 85%; + margin-bottom: 10px; + font-weight: 400; } } - .play-video, .hide-video { + .play-video, + .hide-video { margin-top: 15px; background-color: $netflix-red; - // background-color: #37b3fe; border-radius: 30px; color: #FFFFFF; border: none; @@ -154,9 +156,9 @@ $netflix-red: #E50914; position: relative; width: 100%; padding-bottom: 56.25%; - border-radius: 15px; + border-radius: 15px; overflow: hidden; - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } iframe { @@ -172,9 +174,9 @@ iframe { .content-section { flex-direction: column; - .media-side, .text-side { + .media-side, + .text-side { width: 100%; } } -} - +} \ No newline at end of file diff --git "a/src/apollo-client/Screenshot 2023-10-14 at 3.04.00\342\200\257PM.png" b/src/images/refugee-child-looking.png similarity index 100% rename from "src/apollo-client/Screenshot 2023-10-14 at 3.04.00\342\200\257PM.png" rename to src/images/refugee-child-looking.png From 0eee07a9d5b33defa3276efaf64f578cffe6df35 Mon Sep 17 00:00:00 2001 From: Parvin Sattorova Date: Sat, 21 Oct 2023 01:33:53 -0600 Subject: [PATCH 2/3] refactor:Add refactored the UI to components to match the overol theam and colors --- README.md | 2 +- src/Components/DropDown/DropDown.scss | 3 +- src/Components/NavBar/NavBar.scss | 3 +- .../OrganizationDashboard.scss | 1 + .../ProvideAidPage/ProvideAidPage.scss | 274 +++++++++++++----- src/Components/RequestCard/RequestCard.scss | 64 +++- src/Components/Search/Search.scss | 4 +- .../SearchResults/SearchResults.scss | 20 +- src/Map/Map.js | 2 + src/Map/Map.scss | 18 +- 10 files changed, 302 insertions(+), 89 deletions(-) diff --git a/README.md b/README.md index 02e9977..df7a53a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- Refuge + refuge logo

diff --git a/src/Components/DropDown/DropDown.scss b/src/Components/DropDown/DropDown.scss index fda5107..4294226 100644 --- a/src/Components/DropDown/DropDown.scss +++ b/src/Components/DropDown/DropDown.scss @@ -1,5 +1,6 @@ .suggestion-dropdown { - background-color: white; + // background-color: white; + background-color: #30acf6; margin-right: 1rem; flex: 1; max-width: 300px; diff --git a/src/Components/NavBar/NavBar.scss b/src/Components/NavBar/NavBar.scss index e3491e1..2d40eb5 100644 --- a/src/Components/NavBar/NavBar.scss +++ b/src/Components/NavBar/NavBar.scss @@ -95,7 +95,8 @@ body { .nav-button { background-color: #3498db; - color: #ffffff; + // color: #ffffff; + color: #031662; border: none; padding: 10px 20px; border-radius: 5px; diff --git a/src/Components/OrganizationDashboard/OrganizationDashboard.scss b/src/Components/OrganizationDashboard/OrganizationDashboard.scss index a7f126a..af1f068 100644 --- a/src/Components/OrganizationDashboard/OrganizationDashboard.scss +++ b/src/Components/OrganizationDashboard/OrganizationDashboard.scss @@ -75,6 +75,7 @@ border: none; cursor: pointer; transition: background-color 0.3s ease; + margin-top: 1rem; // Approve button style &:nth-child(1) { diff --git a/src/Components/ProvideAidPage/ProvideAidPage.scss b/src/Components/ProvideAidPage/ProvideAidPage.scss index 24734f8..a166062 100644 --- a/src/Components/ProvideAidPage/ProvideAidPage.scss +++ b/src/Components/ProvideAidPage/ProvideAidPage.scss @@ -1,110 +1,234 @@ +// .provide-aid-page { +// margin-top: 2rem; +// display: flex; +// flex-direction: column; +// height: 100vh; +// } + +// .content-section { +// padding: 2rem; +// display: grid; +// grid-template-columns: 1fr 1fr; +// gap: 2rem; +// } + +// .search-section, +// .organization-display { +// padding: 1.5rem; +// background-color: rgb(233, 235, 229); +// box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +// } + +// .welcome-image-container { +// display: flex; +// justify-content: center; +// align-items: center; +// width: 100%; +// height: 100%; +// border-radius: 5px; +// } + +// .welcome-image { +// max-width: 100%; +// max-height: 100%; +// } + +// .search-section { +// input[type='text'] { +// padding: .6rem; +// border: none; +// border-radius: 5px; +// box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +// font-size: 16px; +// transition: box-shadow 0.3s; + +// &:focus { +// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); +// outline: none; +// } +// } +// } + +// .left-section .filter-fields select { +// flex: 1; +// padding: 10px 25px; +// margin-right: 50px; +// border-radius: 5px; +// box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +// font-size: 13px; +// transition: box-shadow 0.3s; +// margin-bottom: 4rem; +// margin-top: -20rem; + +// &:focus { +// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); +// outline: none; +// } +// } + +// .organization-display { +// flex: 2; + +// h2 { +// margin-top: 0; +// color: #333; +// } + +// p { +// margin-bottom: 10px; +// color: #555; +// } + +// .map-placeholder { +// width: 300px; +// height: 300px; +// background-color: #e9ecef; +// margin-top: 20px; +// border: none; +// border-radius: 5px; +// box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +// } +// } + +// .some-element { +// width: 300px; +// font-size: 16px; +// } + +// @media (max-width: 768px) { +// .some-element { +// width: 200px; +// font-size: 14px; +// } +// } + +// @media (max-width: 480px) { +// .some-element { +// width: 100%; +// font-size: 12px; +// } +// } + +$primary-color: #37b3fe; +$secondary-color: #3c8bc9; +$netflix-red: #031662; +$default-padding: 10px; +$dark-bg: $secondary-color; +$lighter-bg: #2a6f9e; +$font-stack: 'Arial', sans-serif; + +* { + font-family: $font-stack; + transition: all 0.3s; +} + .provide-aid-page { - margin-top: 2rem; - display: flex; - flex-direction: column; - height: 100vh; + background-color: $dark-bg; + margin-top: 2rem; + display: flex; + flex-direction: column; + height: 100vh; + color: #fff; } .content-section { - padding: 2rem; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 2rem; + padding: $default-padding * 2; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; } .search-section, .organization-display { - padding: 1.5rem; - background-color: rgb(233, 235, 229); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + padding: $default-padding * 1.5; + background-color: $lighter-bg; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } - .welcome-image-container { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; +.welcome-image-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + border-radius: 5px; + overflow: hidden; +} + +.search-section { + input[type='text'] { + padding: .6rem; + border: none; border-radius: 5px; + background-color: darken($lighter-bg, 10%); + color: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } - -.welcome-image { - max-width: 100%; - max-height: 100%; } -.search-section { - input[type='text'] { - padding: .6rem; + +.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.1); - font-size: 16px; - transition: box-shadow 0.3s; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + transition: box-shadow 0.3s ease; &:focus { - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); - outline: none; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + outline: none; } - } -} - -.left-section .filter-fields select { - flex: 1; - padding: 10px 25px; - margin-right: 50px; - border-radius: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - font-size: 13px; - transition: box-shadow 0.3s; - margin-bottom: 4rem; - margin-top: -20rem; - - &:focus { - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); - outline: none; - } } .organization-display { - flex: 2; + h2 { + color: $netflix-red; + font-size: 1.5em; + margin-bottom: 1rem; + } - h2 { - margin-top: 0; - color: #333; - } + p { + color: #EAEAEA; + margin: 10px; + } - p { - margin-bottom: 10px; - color: #555; - } + .map-placeholder { + background-color: $lighter-bg; + width: 100%; + height: auto; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + } +} - .map-placeholder { +.some-element { width: 300px; - height: 300px; - background-color: #e9ecef; - margin-top: 20px; - border: none; + font-size: 16px; + background-color: darken($lighter-bg, 15%); border-radius: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - } -} + padding: $default-padding; + color: #fff; + transition: transform 0.3s ease; -.some-element { - width: 300px; - font-size: 16px; + &:hover { + transform: scale(1.05); + } } + @media (max-width: 768px) { - .some-element { - width: 200px; - font-size: 14px; - } + .some-element { + width: 200px; + font-size: 14px; + } } @media (max-width: 480px) { - .some-element { - width: 100%; - font-size: 12px; - } + .some-element { + width: 100%; + font-size: 12px; + } } diff --git a/src/Components/RequestCard/RequestCard.scss b/src/Components/RequestCard/RequestCard.scss index e61de85..37a20d6 100644 --- a/src/Components/RequestCard/RequestCard.scss +++ b/src/Components/RequestCard/RequestCard.scss @@ -1,11 +1,55 @@ +// .request-card { +// padding: 1rem 2rem; +// background-color: whitesmoke; +// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +// cursor: pointer; + +// &:hover { +// box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); +// } +// } + +// .org { +// cursor: default; +// } + +// .card-text { +// text-transform: capitalize; +// margin: 0.5rem 0; + +// &.type { +// text-decoration: underline; +// } + +// &.org { +// font-weight: 700; +// } + +// &.description { +// text-transform: none; +// } +// } + +$primary-color: #37b3fe; +$secondary-color: #3c8bc9; +$netflix-red: #031662; +$default-padding: 10px; +$dark-bg: $secondary-color; +$lighter-bg: #2a6f9e; +$font-stack: 'Arial', sans-serif; + .request-card { - padding: 1rem 2rem; - background-color: whitesmoke; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: $default-padding * 2; + background-color: $lighter-bg; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); + color: #fff; cursor: pointer; + transition: transform 0.3s; &:hover { - box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); + transform: translateY(-10px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } } @@ -14,18 +58,24 @@ } .card-text { + font-family: $font-stack; text-transform: capitalize; - margin: 0.5rem 0; + margin: $default-padding / 2; &.type { - text-decoration: underline; + font-weight: 700; + color: $netflix-red; + border-bottom: 2px solid $netflix-red; + 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; } } diff --git a/src/Components/Search/Search.scss b/src/Components/Search/Search.scss index 3286828..1e0aeb9 100644 --- a/src/Components/Search/Search.scss +++ b/src/Components/Search/Search.scss @@ -34,7 +34,7 @@ button { padding: 12px 19px; background-color: #37b3fe; - color: whitesmoke; + color: #031662; border: none; border-radius: 5px; cursor: pointer; @@ -43,7 +43,7 @@ height: 40px; &:hover { - background-color: silver; + background-color: #0ECB3A; box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); } } diff --git a/src/Components/SearchResults/SearchResults.scss b/src/Components/SearchResults/SearchResults.scss index fbdb0ff..5b746d7 100644 --- a/src/Components/SearchResults/SearchResults.scss +++ b/src/Components/SearchResults/SearchResults.scss @@ -3,4 +3,22 @@ gap: 1rem; height: 70vh; overflow-y: scroll; -} \ No newline at end of file +} + +.search-results::-webkit-scrollbar { + width: 10px; /* Adjust width for vertical scrollbar */ +} + +.search-results::-webkit-scrollbar-thumb { + background: #4CAF50; /* Thumb's color */ + border-radius: 5px; /* Rounded scrollbar */ +} + +.search-results::-webkit-scrollbar-thumb:hover { + background: #45a049; /* Darken the thumb's color a bit when hovered */ +} + +.search-results::-webkit-scrollbar-track { + background: #f1f1f1; /* Track's color */ + border-radius: 5px; /* Rounded scrollbar */ +} diff --git a/src/Map/Map.js b/src/Map/Map.js index 8de3ff0..ca1e0da 100644 --- a/src/Map/Map.js +++ b/src/Map/Map.js @@ -13,6 +13,7 @@ export default function Map({ const { city, state, streetAddress, zip } = selectedOrganization; return ( +
+
); } diff --git a/src/Map/Map.scss b/src/Map/Map.scss index 795c2dd..3cdf32f 100644 --- a/src/Map/Map.scss +++ b/src/Map/Map.scss @@ -1,4 +1,20 @@ +// .leaflet-container { +// height: 300px; +// width: 300px; +// } + .leaflet-container { height: 300px; width: 300px; -} \ No newline at end of file + border-radius: 8px; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); + overflow: hidden; + margin: 10px; +} + +.map-wrapper { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} From 881917046d223b13d48ecb25e806dd1c88ba98cf Mon Sep 17 00:00:00 2001 From: Renee Pinna Date: Sat, 21 Oct 2023 13:03:38 -0600 Subject: [PATCH 3/3] Remove dark background on test inputs for clarity --- src/Components/ProvideAidPage/ProvideAidPage.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Components/ProvideAidPage/ProvideAidPage.scss b/src/Components/ProvideAidPage/ProvideAidPage.scss index a166062..3bc7e36 100644 --- a/src/Components/ProvideAidPage/ProvideAidPage.scss +++ b/src/Components/ProvideAidPage/ProvideAidPage.scss @@ -161,9 +161,10 @@ $font-stack: 'Arial', sans-serif; padding: .6rem; border: none; border-radius: 5px; - background-color: darken($lighter-bg, 10%); - color: #fff; + // background-color: darken($lighter-bg, 10%); + // color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); + font-size: 1rem; } }