add sign in page

frontend/src/components/App/index.tsx

@@ -4,13 +4,18 @@ import Bootstrap from "~/components/Bootstrap";
 import Error from "~/components/Error";
 import Header from "~/components/Header";
 import Home from "~/components/Home";
+import SignIn from "~/components/SignIn";
+import SignUp from "~/components/SignUp";
+import Sites from "~/components/Sites";
 
 export default function App() {
   return (
     <>
       <Header />
-
       <Switch>
+        <Route component={Sites} path="/sites" />
+        <Route component={SignUp} path="/sign-up" />
+        <Route component={SignIn} path="/sign-in" />
         <Route component={Bootstrap} path="/bootstrap" />
         <Route component={Home} path="/" />
 

frontend/src/components/AuthenticationHeader/AuthenticationHeader.module.css

@@ -0,0 +1,40 @@
+@import "~/styles/media.css";
+
+.authentication-header {
+  text-align: center;
+
+  .action-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 2.5rem;
+  }
+
+  .heading {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 3.5rem;
+    margin-bottom: 0.5rem;
+    transition: font-size 0.2s ease;
+  }
+
+  .summary {
+    color: rgba(var(--color-blue-700-rgb));
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .summary {
+      color: rgba(var(--color-blue-400-rgb));
+    }
+  }
+
+  @media (--min-sm) {
+    .heading {
+      font-size: 3rem;
+    }
+  }
+}

frontend/src/components/AuthenticationHeader/index.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { PropsWithoutRef, ReactNode, JSX } from "react";
+import styles from "./AuthenticationHeader.module.css";
+
+type AuthenticationHeaderProps = Overwrite<Omit<PropsWithoutRef<JSX.IntrinsicElements["div"]>, "children">, {
+  actions?: ReactNode,
+  description: ReactNode,
+  summary: ReactNode,
+  title: ReactNode
+}>
+
+export default function AuthenticationHeader({ actions, className, description, summary, title, ...props }: AuthenticationHeaderProps) {
+  return (
+    <div {...props} className={clsx(styles.authenticationHeader, className)}>
+      <p className={styles.summary}>{summary}</p>
+
+      <h1 className={styles.heading}>
+        {title}
+      </h1>
+
+      <p>
+        {description}
+      </p>
+
+      {actions ? (
+        <div className={styles.actionGroup}>
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/src/components/Bootstrap/Bootstrap.module.css

@@ -1,35 +1,15 @@
-.title {
-  margin-bottom: 2rem;
-  text-align: center;
-
-  .summary {
-    color: rgba(var(--color-blue-700-rgb));
-    font-weight: 700;
-
-    @media (prefers-color-scheme: dark) {
-      color: rgba(var(--color-blue-400-rgb));
-    }
-  }
-
-  .heading {
-    font-size: 3rem;
-    font-weight: 700;
-    line-height: 3.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .button-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-    margin-block: 2rem;
-  }
+.button-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-block: 2rem;
 }
 
 .card {
   margin-inline: auto;
+  margin-top: 2rem;
   max-width: 32rem;
 }
 

frontend/src/components/Bootstrap/index.tsx

@@ -4,6 +4,7 @@ import { useErrorBoundary } from "react-error-boundary";
 import { useForm } from "react-hook-form";
 import { Link } from "wouter";
 import ActivityOverlay from "~/components/ActivityOverlay";
+import AuthenticationHeader from "~/components/AuthenticationHeader";
 import Layout from "~/components/Layout";
 import Title from "~/components/Title";
 import { api } from "~/lib/api";
@@ -59,7 +60,7 @@ export default function Bootstrap() {
         setState((prev) => ({ ...prev, isInProgress: false }));
       }
     }
-
+    
     run();
   }, []);
 
@@ -76,65 +77,53 @@ export default function Bootstrap() {
       ) : state.isAlreadyBootstrapped ? (
         <Layout>
           <div className="container">
-            <div className={styles.title}>
-              <small className={styles.summary}>Bootstrap</small>
-
-              <h2 className={styles.heading}>
-                Already bootstrapped!
-              </h2>
-
-              <p>
-                It looks like PoeticMetric has already been installed.
-              </p>
-
-              <div className={styles.buttonGroup}>
-                <Link className="button button-lg button-blue" to="/">
-                  Return home
-                </Link>
-
-                <a className="button button-lg button-blue-ghost" href="mailto:[email protected]">
-                  Contact support
-                </a>
-              </div>
-            </div>
+            <AuthenticationHeader
+              actions={(
+                <>
+                  <Link className="button button-lg button-blue" to="/">
+                    Return home
+                  </Link>
+
+                  <a className="button button-lg button-blue-ghost" href="mailto:[email protected]">
+                    Contact support
+                  </a>
+                </>
+              )}
+              description="It looks like PoeticMetric has already been initialized."
+              summary="Bootstrap"
+              title="Already bootstrapped!"
+            />
           </div>
         </Layout>
       ) : state.isBootstrapComplete ? (
         <Layout>
           <div className="container">
-            <div className={styles.title}>
-              <small className={styles.summary}>Bootstrap</small>
-
-              <h2 className={styles.heading}>
-                You are all set!
-              </h2>
-
-              <p>
-                PoeticMetric has been successfully installed.
-              </p>
-
-              <div className={styles.buttonGroup}>
-                <Link className="button button-lg button-blue" to="/sites">
-                  Go to dashboard
+            <AuthenticationHeader
+              actions={(
+                <Link className="button button-lg button-blue" to="/sign-up">
+                  Sign up to create dashboard
                 </Link>
-              </div>
-            </div>
+              )}
+              description="PoeticMetric has been successfully initialized."
+              summary="Bootstrap"
+              title="You are all set!"
+            />
           </div>
         </Layout>
       ) : (
         <Layout>
           <div className="container">
-            <div className={styles.title}>
-              <small className={styles.summary}>Bootstrap</small>
-
-              <h1 className={styles.heading}>
-                Welcome to
-                <br />
-                PoeticMetric!
-              </h1>
-
-              <p>Complete PoeticMetric installation to continue.</p>
-            </div>
+            <AuthenticationHeader
+              description="Complete PoeticMetric installation to continue."
+              summary="Bootstrap"
+              title={(
+                <>
+                  Welcome to
+                  <br />
+                  PoeticMetric!
+                </>
+              )}
+            />
 
             <div className={clsx("card", styles.card)}>
               <ActivityOverlay isActive={isSubmitting}>

frontend/src/components/Collapse/Collapse.module.css

@@ -23,4 +23,3 @@
     }
   }
 }
-

frontend/src/components/Error/index.tsx

@@ -1,11 +1,14 @@
+import Layout from "~/components/Layout";
 import Title from "~/components/Title";
 
 export default function Error() {
   return (
     <>
       <Title>An error has occurred</Title>
 
-      <div className="container">An error had occurred.</div>
+      <Layout>
+        <div className="container">An error had occurred.</div>
+      </Layout>
     </>
   );
 }

frontend/src/components/Header/Header.module.css

@@ -9,6 +9,7 @@
   padding-block: 0.5rem;
 
   position: relative;
+  z-index: 1001;
 
   > :global(.container) {
     align-items: center;
@@ -30,13 +31,40 @@
     flex-grow: 1;
   }
 
-  .navbar-nav {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    margin-bottom: 0;
-    padding-left: 0;
+
+  @media (--min-lg) {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+
+    .navbar-collapse {
+      align-items: center;
+      display: flex;
+      flex-basis: auto;
+      flex-direction: row;
+      flex-grow: 1;
+      justify-content: space-between;
+    }
+
+    .navbar-toggler {
+      display: none;
+    }
   }
+}
+
+.auth-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  justify-content: flex-start;
+}
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
 
   .nav-link {
     color: rgba(var(--color-black-rgb) / 0.55);
@@ -60,24 +88,10 @@
   }
 
   @media (--min-lg) {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-
-    .navbar-collapse {
-      flex-basis: auto;
-      flex-grow: inherit;
-    }
+    flex-direction: row;
 
-    .navbar-toggler {
-      display: none;
-    }
-
-    .navbar-nav {
-      flex-direction: row;
-
-      .nav-link {
-        padding-inline: 0.5rem;
-      }
+    .nav-link {
+      padding-inline: 0.5rem;
     }
   }