From 6d87787e99a995beb24d2f6ed50f4a169289f4ff Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 16:27:15 -0400 Subject: [PATCH 1/4] updating homepage colors --- src/components/homepage/index-styles.js | 30 ++++++++++++------------- src/style/colors.js | 10 +++++++-- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index caaa1d1..39653bd 100644 --- 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` 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` @@ -298,7 +298,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; @@ -314,12 +314,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` @@ -328,7 +328,7 @@ export const NodeLine = styled.div` left: -80px; margin-top: 64px; z-index: 0; - background-color: ${colors.orange900}; + background-color: ${colors.seafoam900}; @media (min-width: ${dimensions.maxwidthDesktop}px) { width: 70%; @@ -344,7 +344,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/style/colors.js b/src/style/colors.js index caf71eb..7b15bb7 100644 --- a/src/style/colors.js +++ b/src/style/colors.js @@ -13,7 +13,13 @@ const colors = { lighterblue900: "#6EA8C0", softblue900: "#ECF3F7", gray900: "#585858", - black_overlay: "rgb(0, 0, 0, 0.55)" + black_overlay: "rgb(0, 0, 0, 0.55)", + ocean900: "#00667B", + seafoam900: "#5AC7AC", + solar900: "#FFB729", + grass900: "#B2DD8E", + frost900: "#ECF3F7", + stone900: "#585858", } -export default colors \ No newline at end of file +export default colors From bdbc4f7fe57195fd9b2e92d9dfba20efe3abe72f Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 16:30:45 -0400 Subject: [PATCH 2/4] updating colors on about --- src/templates/use-case-styles.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/templates/use-case-styles.js b/src/templates/use-case-styles.js index 1b05c02..f5687dd 100644 --- a/src/templates/use-case-styles.js +++ b/src/templates/use-case-styles.js @@ -44,7 +44,7 @@ export const IntroTextSection = styled.div` ` export const IntroHeader = styled.div` - color: ${colors.blue900}; + color: ${colors.ocean900}; ` export const ImageTwo = styled.div` @@ -87,7 +87,7 @@ export const WhyHeader = styled.div` margin-top: 118px; margin-bottom: 88px; - color: ${colors.blue900}; + color: ${colors.ocean900}; @media (min-width: ${dimensions.maxwidthTablet}px) { margin-top: 152px; @@ -116,7 +116,7 @@ export const SpecificImage = styled.div` export const SpecificReasonHeading = styled.div` text-align: center; - color: ${colors.blue900}; + color: ${colors.ocean900}; @media (min-width: ${dimensions.maxwidthTablet}px) { } @@ -135,7 +135,7 @@ export const WhyCTA = styled.div` justify-content: center; a { - background-color: ${colors.orange900}; + background-color: ${colors.seafoam900}; text-transform: uppercase; color: ${colors.white900}; padding-left: 48px; @@ -181,6 +181,6 @@ iframe { export const DemoHeading = styled.div` -color: ${colors.blue900}; +color: ${colors.ocean900}; ` From 5f5e5f5bda46171c58093c379079c6b0dd90d3ed Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 17:07:28 -0400 Subject: [PATCH 3/4] updating icons --- src/components/footer/footer-styles.js | 20 ++++------ src/components/homepage/index-styles.js | 2 +- src/components/solutions/solutions-styles.js | 15 ++++--- src/templates/use-case-styles.js | 42 ++++++++------------ src/vectors/circle.svg | 2 +- src/vectors/old.svg | 17 ++++++++ src/vectors/plant-icon.svg | 15 +++---- src/vectors/renewable-tree-icon.svg | 37 +++++++++++------ src/vectors/solar-panel.svg | 22 +++++----- src/vectors/sun-icon.svg | 2 +- 10 files changed, 95 insertions(+), 79 deletions(-) create mode 100644 src/vectors/old.svg diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js index c6afa5c..80486e4 100644 --- a/src/components/footer/footer-styles.js +++ b/src/components/footer/footer-styles.js @@ -23,7 +23,6 @@ export const SocialSection = styled.div` padding-left: 80px; padding-top: 50px; - @media (max-width: ${dimensions.maxwidthTablet}px) { padding-left: 32px; } @@ -96,7 +95,7 @@ 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) { @@ -104,7 +103,7 @@ export const EmailSection = styled.div` width: 80%; height: 36px; margin-top: 10px; - border: solid ${colors.blue900} 1px; + border: solid ${colors.ocean900} 1px; } } @@ -167,7 +166,6 @@ export const FooterSection = styled.div` export const SockContainer = styled.div` z-index: 1; position: relative; - ` export const SockContent = styled.div` @@ -184,9 +182,7 @@ export const SockContent = styled.div` ` export const ConnectTitle = styled.div` -color: ${colors.blue900}; - - + color: ${colors.ocean900}; ` export const SockEmailForm = styled.form` @@ -198,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) { @@ -211,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}; } ` @@ -237,7 +233,7 @@ export const SockCTA = 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}; ` diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js index 39653bd..4087733 100644 --- a/src/components/homepage/index-styles.js +++ b/src/components/homepage/index-styles.js @@ -328,7 +328,7 @@ export const NodeLine = styled.div` left: -80px; margin-top: 64px; z-index: 0; - background-color: ${colors.seafoam900}; + background-color: ${colors.grass900}; @media (min-width: ${dimensions.maxwidthDesktop}px) { width: 70%; diff --git a/src/components/solutions/solutions-styles.js b/src/components/solutions/solutions-styles.js index 0a42ce2..9479bfb 100644 --- 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/templates/use-case-styles.js b/src/templates/use-case-styles.js index f5687dd..a0d80a9 100644 --- a/src/templates/use-case-styles.js +++ b/src/templates/use-case-styles.js @@ -148,39 +148,31 @@ export const WhyCTA = styled.div` ` export const DemoVideoSection = styled.div` -margin-top: 75px; -margin-bottom: 75px; - -@media (min-width: ${dimensions.maxwidthTablet}px) { - margin-top: 192px; - margin-bottom: 192px; - justify-content: center; - display: flex; -} - - + margin-top: 75px; + margin-bottom: 75px; + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-top: 192px; + margin-bottom: 192px; + justify-content: center; + display: flex; + } ` export const DemoVideo = styled.div` - -iframe { - width: 72vw; - height: 562px; -} - -@media (max-width: ${dimensions.maxwidthTablet}px) { iframe { - width: 100%; - height: 173px; + width: 72vw; + height: 562px; } -} + @media (max-width: ${dimensions.maxwidthTablet}px) { + iframe { + width: 100%; + height: 173px; + } + } ` - export const DemoHeading = styled.div` - -color: ${colors.ocean900}; - + color: ${colors.ocean900}; ` diff --git a/src/vectors/circle.svg b/src/vectors/circle.svg index feb8825..fc26665 100644 --- a/src/vectors/circle.svg +++ b/src/vectors/circle.svg @@ -1,3 +1,3 @@ - + diff --git a/src/vectors/old.svg b/src/vectors/old.svg new file mode 100644 index 0000000..fb9f112 --- /dev/null +++ b/src/vectors/old.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/vectors/plant-icon.svg b/src/vectors/plant-icon.svg index 630d513..3bb1140 100644 --- a/src/vectors/plant-icon.svg +++ b/src/vectors/plant-icon.svg @@ -1,8 +1,9 @@ - - - - - - - + + + + + + + + diff --git a/src/vectors/renewable-tree-icon.svg b/src/vectors/renewable-tree-icon.svg index 75ed21b..8a1c8d2 100644 --- a/src/vectors/renewable-tree-icon.svg +++ b/src/vectors/renewable-tree-icon.svg @@ -1,20 +1,31 @@ - - - + + + + + + + + - - - + + + - - - - - + + + + + - - + + + + + + + + diff --git a/src/vectors/solar-panel.svg b/src/vectors/solar-panel.svg index f34794c..4f36b0c 100644 --- a/src/vectors/solar-panel.svg +++ b/src/vectors/solar-panel.svg @@ -1,12 +1,12 @@ - - - - - - - - - - - + + + + + + + + + + + diff --git a/src/vectors/sun-icon.svg b/src/vectors/sun-icon.svg index f32b261..9f4fd05 100644 --- a/src/vectors/sun-icon.svg +++ b/src/vectors/sun-icon.svg @@ -1,3 +1,3 @@ - + From 995aca84082a37f13f95304fe22c32c65282978a Mon Sep 17 00:00:00 2001 From: samgildea Date: Fri, 7 May 2021 17:18:34 -0400 Subject: [PATCH 4/4] #updating svg colors --- src/components/contact/contact-styles.js | 8 ++++---- src/components/faq/faq-question/FAQQuestion.styles.js | 4 ++-- src/components/faq/topics-picker/TopicsPicker.styles.js | 8 ++++---- src/style/colors.js | 2 ++ src/vectors/close.svg | 4 ++-- src/vectors/open.svg | 6 +++--- 6 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js index 63dcbea..557f373 100644 --- a/src/components/contact/contact-styles.js +++ b/src/components/contact/contact-styles.js @@ -54,7 +54,7 @@ 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}; @@ -62,7 +62,7 @@ export const ContactButton = styled.a` 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 index d65db58..fd138be 100644 --- 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 index 9c1c834..990166d 100644 --- 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/style/colors.js b/src/style/colors.js index 17df1ba..f02c54b 100644 --- a/src/style/colors.js +++ b/src/style/colors.js @@ -21,6 +21,8 @@ const colors = { grass900: "#B2DD8E", frost900: "#ECF3F7", stone900: "#585858", + seafoam900_transparent: "rgb(90, 199, 172, .07)", + } export default colors diff --git a/src/vectors/close.svg b/src/vectors/close.svg index c3cf8cd..8d56ce5 100644 --- a/src/vectors/close.svg +++ b/src/vectors/close.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/vectors/open.svg b/src/vectors/open.svg index 733b2d2..7b85b27 100644 --- a/src/vectors/open.svg +++ b/src/vectors/open.svg @@ -1,5 +1,5 @@ - - - + + +