Too tired

components/heading.js

@@ -3,6 +3,8 @@ import Link from "next/link";
 import axios from "axios";
 import { useStoreState, useStoreActions } from "easy-peasy";
 
+import css from "./heading.scss";
+
 const Heading = props => {
   const [username, setUsername] = useState();
   const setGlobalUsername = useStoreActions(
@@ -24,55 +26,29 @@ const Heading = props => {
   });
 
   return (
-    <>
-      <header>
-        <div>
-          <span className="branding">
-            <Link href="/">
-              <a>Quoke</a>
-            </Link>
-          </span>
-        </div>
-        <div className={"nav"}>
-          {/* <Link href="/about">
+    <header className={css.root}>
+      <div>
+        <span className={css.branding}>
+          <Link href="/">
+            <a>Quoke</a>
+          </Link>
+        </span>
+      </div>
+      <div className={css.nav}>
+        {/* <Link href="/about">
             <a>About</a>
           </Link> */}
-          {user ? (
-            <Link href={"/[username]"} as={"/" + user}>
-              <a>{user}</a>
-            </Link>
-          ) : (
-            <Link href="/login">
-              <a>Login</a>
-            </Link>
-          )}
-        </div>
-      </header>
-
-      <style jsx>{`
-        header {
-          font-family: "Inconsolata", monospace;
-          display: flex;
-          justify-content: space-between;
-          font-size: 14px;
-          padding: 4px 16px;
-          background-color: black;
-          color: white;
-        }
-        a {
-          color: white;
-        }
-        .branding {
-        }
-        .branding a {
-          text-decoration: none;
-        }
-        .nav a {
-          margin-left: 6px;
-          text-decoration: none;
-        }
-      `}</style>
-    </>
+        {user ? (
+          <Link href={"/[username]"} as={"/" + user}>
+            <a>{user}</a>
+          </Link>
+        ) : (
+          <Link href="/login">
+            <a>Login</a>
+          </Link>
+        )}
+      </div>
+    </header>
   );
 };
 

components/heading.scss

@@ -0,0 +1,18 @@
+.root {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 8px 16px;
+  border-radius: 8px;
+
+  a {
+    color: #666;
+  }
+}
+.branding a {
+  text-decoration: none;
+}
+.nav a {
+  margin-left: 6px;
+  text-decoration: none;
+}

components/layout.js

@@ -23,7 +23,7 @@ const Layout = props => {
       </Head>
 
       <div className={css.container}>
-        {/* <Heading /> */}
+        <Heading />
         {children}
         {/* <Footer /> */}
       </div>

components/layout.scss

@@ -51,20 +51,4 @@
     display: flex;
     justify-content: center;
   }
-  .grid-item {
-    max-width: 300px;
-  }
-  .quotation-mark {
-    font-size: 38px;
-    font-family: "Paytone One", sans-serif;
-  }
-  .list-quote {
-    margin-top: 2em;
-    margin-bottom: 4em;
-  }
-  .pseudo-link {
-    cursor: pointer;
-    text-decoration: underline;
-    color: black;
-  }
 }

next.config.example.js

@@ -1,8 +1,19 @@
-module.exports = {
-  env: {
-    dbUser: "quoke",
-    dbPassword: "change me",
-    jwtSecret: "a long secret that only you know",
-    recaptchaSecret: "a reCAPTCHA secret token"
+const withSass = require("@zeit/next-sass");
+
+module.exports = withSass({
+  cssModules: true,
+  cssLoaderOptions: {
+    importLoaders: 1,
+    localIdentName: "[local]___[hash:base64:5]"
   }
-};
+  /**
+   * Environment variables are now handled
+   * in the Zeit Now environment.
+   */
+  // env: {
+  //   dbUser: "quoke",
+  //   dbPassword: "change me",
+  //   jwtSecret: "a long secret that only you know",
+  //   recaptchaSecret: "a reCAPTCHA secret token"
+  // }
+});

pages/index.js

@@ -11,18 +11,15 @@ import css from "./index.scss";
 const Home = props => {
   return (
     <main className={css.root}>
-      <section>
-        <div className={css.title}>{props.randomQuote.text}</div>
-      </section>
+      <div className={css.title}>{props.randomQuote.text}</div>
     </main>
   );
 };
 
 Home.getInitialProps = async ({ req, query }) => {
   const { origin } = absoluteUrl(req);
-  const apiOrigin = `${origin}`;
 
-  const fetched = await fetch(apiOrigin + "/api/random");
+  const fetched = await fetch(origin + "/api/random");
   const data = await fetched.json();
 
   return {