#56 updating process styles

Scout-NU · May 8, 2021 · 005e4f0 · 005e4f0
1 parent 7813118
commit 005e4f0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/src/components/process/process-styles.js b/src/components/process/process-styles.js
@@ -15,7 +15,7 @@ export const HowItWorks = styled.div`
 
 export const HowHeader = styled.div`
   padding-top: 216px;
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
 `
 
 export const HowImage = styled.div`
@@ -126,11 +126,11 @@ export const FindImage = styled.div`
 export const FindText = styled.div`
   position: relative;
   z-index: 1;
-  color: ${colors.blue900};
+  color: ${colors.ocean900};
   padding-top: 350px;
 `
 export const FindButton = styled.a`
-  background-color: ${colors.orange900};
+  background-color: ${colors.seafoam900};
   text-transform: uppercase;
   color: ${colors.white900};
   padding-left: 48px;
@@ -159,8 +159,6 @@ export const StepImage = styled.div`
 `
 
 export const StepText = styled.div`
-  padding-left: 98px;
-
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     padding-left: 238px;
     width: 32vw;

diff --git a/src/components/process/process.js b/src/components/process/process.js
@@ -37,22 +37,28 @@ export default function Process({ data }) {
         <HowCarousel>
           <HowImage>
             <img
-              src={data.prismicProcessPage.data.how_images[howNumber].how_image.url}
+              src={
+                data.prismicProcessPage.data.how_images[howNumber].how_image.url
+              }
             />
           </HowImage>
           <HowText>
             <HowParagraph>
               <Body>
                 {
-                  data.prismicProcessPage.data.how_images[howNumber].how_paragraph[0]
-                    .text
+                  data.prismicProcessPage.data.how_images[howNumber]
+                    .how_paragraph[0].text
                 }
               </Body>
             </HowParagraph>
 
             <Indicators>
               {data.prismicProcessPage.data.how_images.map((how_button, id) => {
-                return howNumber === id ? <SolidCircle onClick={() => setHowNumber(id)} /> : <Circle onClick={() => setHowNumber(id)} />
+                return howNumber === id ? (
+                  <SolidCircle onClick={() => setHowNumber(id)} />
+                ) : (
+                  <Circle onClick={() => setHowNumber(id)} />
+                )
               })}
             </Indicators>
           </HowText>

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