Adds styling

web/src/layouts/BlogLayout/BlogLayout.js

@@ -6,28 +6,53 @@ const BlogLayout = ({ children }) => {
 
   return (
     <>
-      <header>
-        <h1>
-          <Link to={routes.home()}>Redwood Blog</Link>
+      <header className="flex justify-between items-center py-4 px-8 bg-blue-700 text-white">
+        <h1 className="text-5xl font-semibold tracking-tight">
+          <Link
+            className="text-blue-400 hover:text-blue-100 transition duration-100"
+            to={routes.home()}
+          >
+            Redwood Blog
+          </Link>
         </h1>
         <nav>
-          <ul>
+          <ul className="relative flex items-center font-light">
             <li>
-              <Link to={routes.about()}>About</Link>
+              <Link
+                className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+                to={routes.about()}
+              >
+                About
+              </Link>
             </li>
             <li>
-              <Link to={routes.contact()}>Contact</Link>
+              <Link
+                className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+                to={routes.contact()}
+              >
+                Contact
+              </Link>
             </li>
             <li>
-              <a href="#" onClick={isAuthenticated ? logOut : logIn}>
+              <a
+                className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+                href="#"
+                onClick={isAuthenticated ? logOut : logIn}
+              >
                 {isAuthenticated ? 'Log Out' : 'Log In'}
               </a>
             </li>
-            {isAuthenticated && <li>{currentUser.email}</li>}
+            {isAuthenticated && (
+              <li className="absolute top-0 right-0 -mt-8 px-4 text-xs text-blue-300">
+                {currentUser.email}
+              </li>
+            )}
           </ul>
         </nav>
       </header>
-      <main>{children}</main>
+      <main className="max-w-4xl mx-auto p-12 bg-white shadow rounded-b">
+        {children}
+      </main>
     </>
   )
 }