Styling and restructuring of components, config edit

src/components/Header.js

@@ -1,17 +1,18 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import LogoSaburly from "../images/logo-saburly-white.svg"
+import LogoSaburly from '../images/logo-saburly-white.svg'
 import Button from './Button'
 
-import "./Header.css"
+import './Header.css'
 
-let menuClasses = "no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4"
+let menuClasses =
+  'no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
 
 const Header = () => (
-  <header className="bg-saburly-blue">
+  <header className="bg-saburly-indigo">
     <nav className="container mx-auto flex justify-between lg:p-6 p-4">
       <Link to="/">
-        <img src={LogoSaburly} alt='Saburly Logo' className="max-w-xs" />
+        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
       </Link>
 
       <button className="menu_icon lg:invisible">
@@ -32,7 +33,12 @@ const Header = () => (
             <li className={menuClasses}>BLOG</li>
           </Link>
 
-          <Button text="Contact" standard classes="rounded-full text-white hover:shadow" url="/contact" />
+          <Button
+            text="Contact"
+            standard
+            classes="rounded-full text-white hover:shadow"
+            url="/contact"
+          />
         </ul>
       </div>
     </nav>

src/components/InfoBox.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-const InfoBox = ({ headline, text, classes }) => (
-  <div className={`${classes}`}>
-    <h3>{headline}</h3>
-    <p>{text}</p>
+const InfoBox = ({ ...props }) => (
+  <div className={`${props.classes}`}>
+    <h3>{props.headline}</h3>
+    <p>{props.text}</p>
   </div>
 )
 

src/components/SectionIntro.js

@@ -1,11 +1,31 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-const IntroDefault = ({ intro, headline, text, classes }) => (
-  <div className={`${classes}`}>
-    <h3 className="text-white opacity-50 text-sm font-light uppercase pt-2 pb-2">{intro}</h3>
-    <h1 className="text-white font-light pt-2 pb-2">{headline}</h1>
-    <p className="font-light leading-normal text-white opacity-50">{text}</p>
+let headlineDark = 'text-white'
+let headlineLight = 'text-indigo'
+
+const IntroDefault = ({ ...props }) => (
+  <div className={`${props.classes}`}>
+    <h3
+      className={`
+      ${
+        props.light ? headlineDark : headlineLight
+      } opacity-50 text-sm font-light uppercase pt-2 pb-1`}
+    >
+      {props.intro}
+    </h3>
+    <h1
+      className={`${props.light ? headlineDark : ''}
+     font-light pt-1 pb-2`}
+    >
+      {props.headline}
+    </h1>
+    <p
+      className={`${props.light ? headlineDark : ''} 
+    font-light leading-normal opacity-75`}
+    >
+      {props.text}
+    </p>
   </div>
 )