Merge branch 'master' into #61-hamburger-functionality

Scout-NU · May 12, 2021 · a36895a · a36895a
2 parents dfc4be2 + ec18762
commit a36895a
Show file tree

Hide file tree

Showing 16 changed files with 136 additions and 108 deletions.
diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js
@@ -54,15 +54,15 @@ export const ContactButton = styled.a`
   padding-left: 60px;
   padding-top: 16px;
   padding-bottom: 16px;
-  background-color: ${colors.orange900};
+  background-color: ${colors.seafoam900};
   text-transform: uppercase;
   color: ${colors.white900};
 
   border: none;
   transition: all 0.1s ease-in-out;
 
   &:hover {
-    box-shadow: 0 0 46px -9px ${colors.orange900};
+    box-shadow: 0 0 46px -9px ${colors.seafoam900};
   }
 `
 
@@ -99,12 +99,12 @@ export const SpecificContactInfo = styled.div`
 export const EmailSection = styled.div`
   margin-right: 127px;
   margin-top: 64px;
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
 `
 
 export const AddressSection = styled.div`
   margin-top: 64px;
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
   width: 228px;
   margin-bottom: 110px;
 `

diff --git a/src/components/faq/faq-question/FAQQuestion.styles.js b/src/components/faq/faq-question/FAQQuestion.styles.js
@@ -11,12 +11,12 @@ export const ToggleContainer = styled.div`
 `
 
 export const FAQQuestionTitle = styled(H4)`
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
   margin: 0;
 `
 
 export const FAQAnswer = styled(Body)`
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
   padding-left: 24px;
   width: 90%;
   line-height: 32px;

diff --git a/src/components/faq/topics-picker/TopicsPicker.styles.js b/src/components/faq/topics-picker/TopicsPicker.styles.js
@@ -10,8 +10,8 @@ export const TopicsContainer = styled.div`
 `
 
 const SelectedBox = css`
-  border: 3px solid ${colors.orange900};
-  background-color: ${colors.orange900_transparent};
+  border: 3px solid ${colors.seafoam900};
+  background-color: ${colors.seafoam900_transparent};
 `
 
 export const TopicBox = styled.div`
@@ -26,10 +26,10 @@ export const TopicBox = styled.div`
   font-weight: bolder;
 
   cursor: pointer;
-  border: 2px solid ${colors.orange900};
+  border: 2px solid ${colors.seafoam900};
   background-color: transparent;
   transition: all 0.1s ease-in-out;
-  color: ${colors.orange900};
+  color: ${colors.seafoam900};
   text-transform: uppercase;
 
   ${props => props.selected && SelectedBox};

diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js
@@ -95,15 +95,15 @@ export const EmailSection = styled.div`
     width: 20vw;
     height: 36px;
     margin-top: 10px;
-    border: solid ${colors.blue900} 1px;
+    border: solid ${colors.ocean900} 1px;
   }
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     input {
       width: 80%;
       height: 36px;
       margin-top: 10px;
-      border: solid ${colors.blue900} 1px;
+      border: solid ${colors.ocean900} 1px;
     }
   }
 
@@ -182,7 +182,7 @@ export const SockContent = styled.div`
 `
 
 export const ConnectTitle = styled.div`
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
 `
 
 export const SockEmailForm = styled.form`
@@ -194,11 +194,11 @@ export const SockEmailForm = styled.form`
     background: transparent;
     border: none;
     width: 36vw;
-    border-bottom: 4px solid ${colors.blue900};
+    border-bottom: 4px solid ${colors.ocean900};
   }
 
   input[type="text"]::placeholder {
-    color: ${colors.blue900};
+    color: ${colors.ocean900};
   }
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
@@ -207,14 +207,14 @@ export const SockEmailForm = styled.form`
       background: transparent;
       border: none;
       width: 100%;
-      border-bottom: 4px solid ${colors.blue900};
+      border-bottom: 4px solid ${colors.ocean900};
     }
   }
 
   input[type="text"],
   select {
     font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1440 - 320)));
-    color: ${colors.blue900};
+    color: ${colors.ocean900};
   }
 `
 
@@ -234,7 +234,7 @@ export const SockCTA = styled.button`
   border: none;
   padding-top: 16px;
   padding-bottom: 16px;
-  background-color: ${colors.orange900};
+  background-color: ${colors.seafoam900};
   text-transform: uppercase;
   color: ${colors.white900};
 `

diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
@@ -47,7 +47,7 @@ export const HeroDescription = styled.div``
 export const HeroCTA = styled.div`
   margin-top: 64px;
   a {
-    background-color: ${colors.orange900};
+    background-color: ${colors.seafoam900};
     text-transform: uppercase;
     color: ${colors.white900};
     padding-left: 48px;
@@ -65,7 +65,7 @@ export const ImpactSection = styled.div`
   min-height: 100vh;
   z-index: 1;
   position: relative;
-
+  color: ${colors.ocean900};
   background-color: ${colors.white900};
   justify-content: center;
   @media (max-width: ${dimensions.maxwidthTablet}px) {
@@ -154,7 +154,7 @@ export const FutureImage = styled.div`
 
 export const FutureHeader = styled.div`
   font-weight: bold;
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
   @media (min-width: ${dimensions.maxwidthTablet}px) {
   }
 `
@@ -175,7 +175,7 @@ export const FutureSolarIcon = styled.div`
 export const FutureDescription = styled.div`
   margin-top: 32px;
   font-size: 18px;
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     font-size: 16px;
@@ -189,12 +189,12 @@ export const FutureCTA = styled.div`
     padding-left: 60px;
     padding-top: 16px;
     padding-bottom: 16px;
-    border: solid ${colors.orange900}; 1px;
+    border: solid ${colors.seafoam900}; 1px;
     font-size: 16px;
     font-weight: bold;
     text-decoration: none;
     text-transform: uppercase;
-    color: ${colors.orange900};
+    color: ${colors.seafoam900};
   }
 `
 
@@ -206,14 +206,14 @@ export const HomePageContainer = styled.div`
 export const SolutionsSection = styled.div`
   min-height: 100vh;
   margin-top: 200px;
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
   padding-bottom: 100px;
 `
 
 export const SolutionsCard = styled.div`
   a {
     text-decoration: none;
-    color: ${colors.blue900};
+    color: ${colors.ocean900};
   }
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     img {
@@ -253,12 +253,12 @@ a {
   padding-left: 60px;
   padding-top: 16px;
   padding-bottom: 16px;
-  border: solid ${colors.orange900}; 1px;
+  border: solid ${colors.seafoam900}; 1px;
   font-size: 16px;
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
-  color: ${colors.orange900};
+  color: ${colors.seafoam900};
 }
 `
 export const CTASection = styled.div`
@@ -299,7 +299,7 @@ export const CTAContent = styled.div`
 `
 
 export const CTAText = styled.div`
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
 
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     margin-left: 133px;
@@ -315,12 +315,12 @@ a {
   padding-left: 60px;
   padding-top: 16px;
   padding-bottom: 16px;
-  border: solid ${colors.orange900}; 1px;
+  border: solid ${colors.seafoam900}; 1px;
   font-size: 16px;
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
-  color: ${colors.orange900};
+  color: ${colors.seafoam900};
 }
 `
 export const NodeLine = styled.div`
@@ -329,7 +329,7 @@ export const NodeLine = styled.div`
   left: -80px;
   margin-top: 64px;
   z-index: 0;
-  background-color: ${colors.orange900};
+  background-color: ${colors.grass900};
 
   @media (min-width: ${dimensions.maxwidthDesktop}px) {
     width: 70%;
@@ -345,7 +345,7 @@ export const MobileNodeLine = styled.div`
   left: -${layoutPaddingMobile};
   margin-top: 64px;
   z-index: 0;
-  background-color: ${colors.orange900};
+  background-color: ${colors.seafoam900};
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     width: 55.8%;

diff --git a/src/components/solutions/solutions-styles.js b/src/components/solutions/solutions-styles.js
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled'
+import styled from "@emotion/styled"
 import colors from "../../style/colors"
 import dimensions from "../../style/dimensions"
 import {
@@ -11,10 +11,10 @@ export const SolutionsContainer = styled.div``
 export const TaglineSection = styled.div``
 
 export const TaglineHeader = styled.div`
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
 `
 export const TaglineDescription = styled.div`
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
 `
 
 export const TaglineImage = styled.div`
@@ -61,7 +61,7 @@ export const UseCaseCard = styled.div`
   width: 100%;
   a {
     text-decoration: none;
-    color: ${colors.blue900};
+    color: ${colors.ocean900};
   }
 
   @media (min-width: ${dimensions.maxwidthTablet}px) {
@@ -76,12 +76,12 @@ a {
     padding-left: 60px;
     padding-top: 16px;
     padding-bottom: 16px;
-    border: solid ${colors.orange900}; 1px;
+    border: solid ${colors.seafoam900}; 1px;
     font-size: 16px;
     font-weight: bold;
     text-decoration: none;
     text-transform: uppercase;
-    color: ${colors.orange900};
+    color: ${colors.seafoam900};
   }
 
 `
@@ -125,7 +125,6 @@ export const ModelCTAText = styled.div`
   margin-bottom: 116px;
   margin-top: 116px;
 
-  color: ${colors.blue900};
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     margin-left: 76px;
     margin-top: 72px;
@@ -137,7 +136,7 @@ export const ModelsButton = styled.div`
   margin-top: 42px;
 
   a {
-    background-color: ${colors.orange900};
+    background-color: ${colors.seafoam900};
     text-transform: uppercase;
     color: ${colors.white900};
     padding-left: 48px;

diff --git a/src/style/colors.js b/src/style/colors.js
@@ -15,6 +15,14 @@ const colors = {
   softblue900: "#ECF3F7",
   gray900: "#585858",
   black_overlay: "rgb(0, 0, 0, 0.55)",
+  ocean900: "#00667B",
+  seafoam900: "#5AC7AC",
+  solar900: "#FFB729",
+  grass900: "#B2DD8E",
+  frost900: "#ECF3F7",
+  stone900: "#585858",
+  seafoam900_transparent: "rgb(90, 199, 172, .07)",
+
 }
 
 export default colors