#13 updating color file

Scout-NU · Apr 13, 2021 · 3edc42d · 3edc42d
1 parent 48d0009
commit 3edc42d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js
@@ -1,5 +1,6 @@
 import styled from "styled-components"
 import dimensions from "../../style/dimensions"
+import colors from "../../style/colors"
 import {
   layoutPaddingDesktop,
   layoutPaddingMobile,
@@ -8,7 +9,7 @@ import {
 export const FooterContainer = styled.div`
   background-color: rgb(0, 0, 0, 0.55);
   width: 100%;
-  color: #ffffff;
+  color: ${colors.white900};
   position: absolute;
   bottom:
 `
@@ -45,7 +46,7 @@ export const SocialIcons = styled.div`
 export const SocialPlaceholder = styled.div`
   width: 24px;
   height: 24px;
-  background-color: #a4a4a4;
+  background-color: ${colors.gray_icon};
   border-radius: 8px;
   margin-right: 16px;
 `
@@ -73,7 +74,7 @@ export const LinkSection = styled.div`
 
   a {
     text-decoration: none;
-    color: #ffffff;
+    color: ${colors.white900};
   }
 
   ul {
@@ -96,15 +97,15 @@ export const EmailSection = styled.div`
     width: 20vw;
     height: 36px;
     margin-top: 10px;
-    border: solid #626262 1px;
+    border: solid ${colors.blue900} 1px;
   }
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     input {
       width: 80%;
       height: 36px;
       margin-top: 10px;
-      border: solid #626262 1px;
+      border: solid ${colors.blue900} 1px;
     }
   }
 
@@ -153,7 +154,7 @@ export const AddressSection = styled.div`
 `
 export const ScoutSection = styled.div`
   margin-top: 65px;
-  color: #ffffff;
+  color: ${colors.white900};
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     padding-bottom: 48px;
@@ -184,7 +185,11 @@ export const SockContent = styled.div`
   }
 `
 
-export const ConnectTitle = styled.div``
+export const ConnectTitle = styled.div`
+color: ${colors.blue900};
+
+
+`
 
 export const SockEmailForm = styled.form`
   margin-top: 32px;
@@ -195,7 +200,11 @@ export const SockEmailForm = styled.form`
     background: transparent;
     border: none;
     width: 36vw;
-    border-bottom: 4px solid #302f51;
+    border-bottom: 4px solid ${colors.blue900};
+  }
+
+  input[type="text"]::placeholder {
+    color: ${colors.blue900};
   }
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
@@ -204,14 +213,14 @@ export const SockEmailForm = styled.form`
       background: transparent;
       border: none;
       width: 100%;
-      border-bottom: 4px solid #302f51;
+      border-bottom: 4px solid ${colors.blue900};
     }
   }
 
   input[type="text"],
   select {
     font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1440 - 320)));
-    color: #302f51;
+    color: ${colors.blue900};
   }
 `
 
@@ -230,9 +239,9 @@ export const SockCTA = styled.a`
   padding-left: 60px;
   padding-top: 16px;
   padding-bottom: 16px;
-  background-color: #f36135;
+  background-color: ${colors.orange900};
   text-transform: uppercase;
-  color: #ffffff;
+  color: ${colors.white900};
 `
 export const FooterImage = styled.div`
   position: absolute;

diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -7,7 +7,6 @@ import {
   SocialSection,
   FooterHeader,
   SocialIcons,
-  SocialPlaceholder,
   LinkSection,
   LinkColumn,
   EmailSection,
@@ -24,7 +23,7 @@ import {
 } from "./footer-styles"
 import BackgroundImage from "gatsby-background-image"
 
-import { Sub1, H3, Body } from "../../style/type-styles"
+import { Sub1, Body } from "../../style/type-styles"
 
 export default function footer({ data }) {
   return (
@@ -52,7 +51,7 @@ export default function footer({ data }) {
       render={data => (
         <FooterSection>
           <FooterImage>
-            <img src={data.prismicFooter.data.footer_image.url} />
+            <img alt="footer background image" src={data.prismicFooter.data.footer_image.url} />
           </FooterImage>
           <SockContainer>
             <SockContent>
@@ -114,7 +113,7 @@ export default function footer({ data }) {
                   {data.prismicFooter.data.social_media.map(social => {
                     return (
                       <a href={social.social_link}>
-                        <img src={social.social_icon.url} />
+                        <img alt="social icon" src={social.social_icon.url} />
                       </a>
                     )
                   })}

diff --git a/src/style/colors.js b/src/style/colors.js
@@ -4,8 +4,15 @@ const colors = {
   gray_icon: "#A4A4A4",
   gray_CTA: "#646464",
 
-  black900: "#000000",
+  black900: "#253253",
   white900: "#FFFFFF",
+
+  orange900: "#F27A28",
+  blue900: "#245373",
+  lightblue900: "#6480A5",
+  lighterblue900: "#6EA8C0",
+  softblue900: "#ECF3F7",
+  gray900: "#585858",
 }
 
-export default colors
+export default colors