Styling

web/components/header.js

@@ -2,15 +2,17 @@ import Link from "next/link";
 
 function Header({ user, loading }) {
   return (
-    <header>
-      <nav>
-        <ul>
-          <li>
+    <header className="container mx-auto flex justify-center flex-col">
+      <h1 className="text-4xl mx-auto">forget me not</h1>
+
+      <nav className="mx-auto mt-2">
+        <ul className="flex justify-center flex-row">
+          <li className="mx-3">
             <Link href="/">
               <a>Home</a>
             </Link>
           </li>
-          <li>
+          <li className="mx-3">
             <Link href="/about">
               <a>About</a>
             </Link>
@@ -18,22 +20,22 @@ function Header({ user, loading }) {
           {!loading &&
             (user ? (
               <>
-                <li>
+                <li className="mx-3">
                   <Link href="/profile">
                     <a>Client-rendered profile</a>
                   </Link>
                 </li>
-                <li>
+                <li className="mx-3">
                   <Link href="/advanced/ssr-profile">
                     <a>Server rendered profile (advanced)</a>
                   </Link>
                 </li>
-                <li>
+                <li className="mx-3">
                   <a href="/api/v1/logout">Logout</a>
                 </li>
               </>
             ) : (
-              <li>
+              <li className="mx-3">
                 <a href="/api/v1/login">Login</a>
               </li>
             ))}

web/components/layout.js

@@ -11,13 +11,8 @@ function Layout({ user, loading = false, children }) {
       <Header user={user} loading={loading} />
 
       <main>
-        <div className="container">{children}</div>
+        <div className="container mx-auto">{children}</div>
       </main>
-
-      <style jsx>{`
-      `}</style>
-      <style jsx global>{`
-      `}</style>
     </>
   );
 }

web/components/wanttobutton.js

@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+function WantToButton({ href, text }) {
+  return (
+    <Link href={href}>
+      <a className="py-1 px-2 mr-1 rounded border text-xl">{text}</a>
+    </Link>
+  );
+}
+
+export default WantToButton;