💄 Restyled header/nav to include border

lukecarr · Apr 4, 2022 · 8522ffb · 8522ffb
1 parent 7ddd982
commit 8522ffb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
@@ -1,11 +1,13 @@
 import Header from 'src/components/Header'
 import Router from 'src/components/Router'
+import Welcome from 'src/components/Welcome'
 
 export function App() {
   return (
-    <div class="container max-w-screen-md min-h-screen py-8">
+    <div class="min-h-screen">
       <Header />
-      <main class="mt-8">
+      <main class="container max-w-screen-md my-8">
+        <Welcome />
         <Router />
       </main>
     </div>

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,15 +1,15 @@
 import type { FunctionalComponent } from 'preact'
-import Welcome from './Welcome'
 
 const Header: FunctionalComponent = () => {
-  return <header>
-    <h1 class="font-extrabold text-3xl">tiny-todo</h1>
-    <Welcome />
-    <nav class="mt-4">
-      <a href="/">todo</a>
-      <span> &#9679; </span>
-      <a href="/about">about</a>
-    </nav>
+  return <header class="border-b-1 border-gray-400 py-8">
+    <div class="container max-w-screen-md">
+      <h1 class="font-extrabold text-3xl">tiny-todo</h1>
+      <nav class="mt-4">
+        <a href="/">todo</a>
+        <span> &#9679; </span>
+        <a href="/about">about</a>
+      </nav>
+    </div>
   </header>
 }
 

diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
@@ -7,7 +7,7 @@ const Welcome: FunctionalComponent = () => {
 
   if (hidden) return null
 
-  return <section class="mt-4 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
+  return <section class="mb-4 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
     <h3>Welcome to tiny-todo!</h3>
     <p>A simple todo app that's: tiny 🐜, lightweight 🔦🏋️‍♀️, and performant ⚡. Built using Go &amp; Preact!</p>
     <button class="text-sm font-semibold hover:font-bold underline underline-dotted underline-black" onClick={() => setHidden(true)}>don't show again</button>