diff --git a/src/components/process/process-styles.js b/src/components/process/process-styles.js index ec67cba..5039da1 100644 --- 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 index 7194552..95a9cb2 100644 --- a/src/components/process/process.js +++ b/src/components/process/process.js @@ -37,22 +37,28 @@ export default function Process({ data }) { { - data.prismicProcessPage.data.how_images[howNumber].how_paragraph[0] - .text + data.prismicProcessPage.data.how_images[howNumber] + .how_paragraph[0].text } {data.prismicProcessPage.data.how_images.map((how_button, id) => { - return howNumber === id ? setHowNumber(id)} /> : setHowNumber(id)} /> + return howNumber === id ? ( + setHowNumber(id)} /> + ) : ( + setHowNumber(id)} /> + ) })} diff --git a/src/style/colors.js b/src/style/colors.js index 929e416..f02c54b 100644 --- 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