Merge pull request #31 from Refugee-Aid-Capstone/feature/contact-sypress

Feature/contact sypress

README.md

@@ -1,6 +1,6 @@
 <div>
     <h1 style="color:red; display: inline;">
-      Refuge
+      <!-- Refuge -->
          <img src="https://github.com/Refugee-Aid-Capstone/refugee-aid-fe/blob/main/src/images/refuge.png" alt="refuge logo" width="105" style="margin-left: 5px; border-radius: 50%; vertical-align: middle;">
     </h1>
 </div>

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');
+  });
+});

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"
   }
 }

src/Components/Contact/Contact.js

@@ -8,7 +8,7 @@ const ContactSection = () => {
             <div className="top-section">
                 <div className="left-side">
                     <div className="weallhuman-container">
-                        <img src={weAllHuman} alt="Refugees" className="wehalluman-img" />
+                        <img src={weAllHuman} alt="usa-custom" className="weallhuman-img" />
                     </div>
                 </div>
                 <div className="right-side">

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;

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,23 +44,23 @@ $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%;
       display: flex;
       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,22 +95,22 @@ $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 {
         color: $primary-color;
         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%;
     }
   }
-}
-
+}

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;

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) {