Use css variables.

pages/_app.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { useStore } from 'redux/store';
+import 'styles/variables.css';
 import 'styles/bootstrap-grid.css';
 import 'styles/index.css';
 

pages/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Layout from 'components/Layout';
 import WebsiteList from 'components/WebsiteList';
-import useUser from 'hooks/useUser';
+import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function HomePage() {
-  const { loading } = useUser();
+  const { loading } = useRequireLogin();
 
   if (loading) {
     return null;

pages/login.js

@@ -1,17 +1,11 @@
 import React from 'react';
-import Link from 'next/link';
 import Layout from 'components/Layout';
 import Login from 'components/Login';
 
 export default function LoginPage() {
   return (
-    <Layout title="Login">
+    <Layout title="login">
       <Login />
-      <p>
-        <Link href="/test">
-          <a>Test page 🡒</a>
-        </Link>
-      </p>
     </Layout>
   );
 }

pages/settings.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Layout from 'components/Layout';
 import Settings from 'components/Settings';
-import useUser from 'hooks/useUser';
+import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function SettingsPage() {
-  const { loading } = useUser();
+  const { loading } = useRequireLogin();
 
   if (loading) {
     return null;

pages/website/[...id].js

@@ -2,10 +2,10 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import Layout from 'components/Layout';
 import WebsiteDetails from 'components/WebsiteDetails';
-import useUser from 'hooks/useUser';
+import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function DetailsPage() {
-  const { loading } = useUser();
+  const { loading } = useRequireLogin();
   const router = useRouter();
   const { id } = router.query;