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>