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/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/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..3bc7e36 100644
--- a/src/Components/ProvideAidPage/ProvideAidPage.scss
+++ b/src/Components/ProvideAidPage/ProvideAidPage.scss
@@ -1,110 +1,235 @@
+// .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);
+ font-size: 1rem;
}
-
-.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%;
+}
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
