From a89c38117105978633d78bf98813a7db4145f2ac Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Sat, 15 Feb 2025 18:00:29 +0000
Subject: [PATCH] feat: responsive auth page

---
 apps/web/src/components/AuthForm.tsx     | 43 ++++++++++----------
 apps/web/src/components/Button.tsx       |  5 ++-
 apps/web/src/components/Dashboard.tsx    |  2 +-
 apps/web/src/components/Input.tsx        |  2 +-
 apps/web/src/views/auth/login/index.tsx  | 49 ++++++++++++++---------
 apps/web/src/views/auth/signup/index.tsx | 51 ++++++++++++++----------
 6 files changed, 89 insertions(+), 63 deletions(-)

diff --git a/apps/web/src/components/AuthForm.tsx b/apps/web/src/components/AuthForm.tsx
index 16efc148..b1a6dfa2 100644
--- a/apps/web/src/components/AuthForm.tsx
+++ b/apps/web/src/components/AuthForm.tsx
@@ -3,7 +3,8 @@ import { useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
 import { z } from "zod";
 
-import LoadingSpinner from "~/components/LoadingSpinner";
+import Button from "~/components/Button";
+import Input from "~/components/Input";
 import { api } from "~/utils/api";
 
 interface FormValues {
@@ -36,7 +37,7 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
 
   const loginWithOAuth = api.auth.loginWithOAuth.useMutation({
     onSuccess: (data) => {
-      if (data?.url) window.open(data.url);
+      if (data.url) window.open(data.url);
     },
   });
 
@@ -53,21 +54,24 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
   return (
     <div className="space-y-6">
       <div>
-        <button
-          type="button"
+        <Button
           onClick={() => loginWithOAuth.mutate({ provider: "google" })}
-          className="flex w-full items-center justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold leading-6 text-dark-50 shadow-sm focus-visible:outline focus-visible:outline-2"
+          iconLeft={<FaGoogle />}
+          fullWidth
+          size="lg"
         >
-          <FaGoogle className="mr-2" /> Continue with Google
-        </button>
+          Continue with Google
+        </Button>
       </div>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="mb-[1.5rem] h-[1px] w-full bg-dark-600" />
-        <input
+        <div className="mb-[1.5rem] flex w-full items-center gap-4">
+          <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
+          <span className="text-sm text-light-900 dark:text-dark-900">or</span>
+          <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
+        </div>
+        <Input
           {...register("email", { required: true })}
           placeholder="Enter your email address"
-          autoComplete="email"
-          className="block w-full rounded-md border-0 bg-dark-500 bg-white/5 py-2 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-600 focus:ring-inset focus:ring-dark-800 sm:text-sm sm:leading-6"
         />
         {!loginWithEmail.error && !loginWithOAuth.error && errors.email && (
           <p className="mt-2 text-xs text-red-400">
@@ -82,17 +86,14 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
         ) : null}
 
         <div className="mt-[1.5rem]">
-          <button
-            type="submit"
-            disabled={loginWithEmail.isPending}
-            className="flex w-full items-center justify-center rounded-md bg-dark-600 px-3 py-2 text-sm font-semibold leading-6 text-dark-1000 shadow-sm focus-visible:outline focus-visible:outline-2"
+          <Button
+            isLoading={loginWithEmail.isPending}
+            fullWidth
+            size="lg"
+            variant="secondary"
           >
-            {loginWithEmail.isPending ? (
-              <LoadingSpinner />
-            ) : (
-              "Continue with email"
-            )}
-          </button>
+            Continue with email
+          </Button>
         </div>
       </form>
     </div>
diff --git a/apps/web/src/components/Button.tsx b/apps/web/src/components/Button.tsx
index 312ff266..228a8965 100644
--- a/apps/web/src/components/Button.tsx
+++ b/apps/web/src/components/Button.tsx
@@ -10,6 +10,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   iconLeft?: React.ReactNode;
   iconRight?: React.ReactNode;
   href?: string;
+  fullWidth?: boolean;
   openInNewTab?: boolean;
 }
 
@@ -21,13 +22,15 @@ const Button = ({
   isLoading,
   variant = "primary",
   href,
+  fullWidth,
   openInNewTab,
   ...props
 }: ButtonProps) => {
   const classes = twMerge(
     "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none",
     size === "sm" && "text-xs",
-    size === "lg" && "px-4 py-3 text-lg",
+    size === "lg" && "py-[0.65rem]",
+    fullWidth && "w-full",
     variant === "primary" &&
       "bg-light-1000 dark:bg-dark-1000 dark:text-dark-50",
     variant === "secondary" &&
diff --git a/apps/web/src/components/Dashboard.tsx b/apps/web/src/components/Dashboard.tsx
index 8533c1f2..959a75b6 100644
--- a/apps/web/src/components/Dashboard.tsx
+++ b/apps/web/src/components/Dashboard.tsx
@@ -15,7 +15,7 @@ export default function Dashboard(props: { children: React.ReactNode }) {
           overflow: hidden;
         }
       `}</style>
-      <div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
+      <div className="flex h-screen min-w-[800px] flex-col items-center bg-light-100 dark:bg-dark-50">
         <div className="m-auto flex h-16 min-h-16 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400">
           <div className="my-auto flex w-full items-center justify-between">
             <Link href="/">
diff --git a/apps/web/src/components/Input.tsx b/apps/web/src/components/Input.tsx
index fbf106f2..911dbabd 100644
--- a/apps/web/src/components/Input.tsx
+++ b/apps/web/src/components/Input.tsx
@@ -58,7 +58,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             ref={ref}
             onChange={onChange}
             className={twMerge(
-              "block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6",
+              "block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-sm shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:leading-6",
               prefix && "rounded-l-none",
               className && className,
             )}
diff --git a/apps/web/src/views/auth/login/index.tsx b/apps/web/src/views/auth/login/index.tsx
index 6b338311..74b608fe 100644
--- a/apps/web/src/views/auth/login/index.tsx
+++ b/apps/web/src/views/auth/login/index.tsx
@@ -1,8 +1,10 @@
+import Link from "next/link";
 import { useState } from "react";
 
 // import { useRouter } from "next/navigation";
 import { Auth } from "~/components/AuthForm";
 import { PageHead } from "~/components/PageHead";
+import PatternedBackground from "~/components/PatternedBackground";
 
 // import { api } from "~/utils/api";
 
@@ -29,27 +31,36 @@ export default function LoginPage() {
   return (
     <>
       <PageHead title="Login | kan.bn" />
-      <main className="h-screen bg-dark-50">
-        <div className="flex h-full flex-col items-center justify-center">
-          <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
-            kan.bn
-          </h1>
-          <p className="mb-10 text-3xl text-dark-1000">
-            {isMagicLinkSent ? "Check your inbox" : "Welcome back"}
-          </p>
-          {isMagicLinkSent ? (
-            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-              <p className="text-md mt-2 text-center text-dark-1000">
-                {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
-              </p>
-            </div>
-          ) : (
-            <div className="w-full rounded-lg border border-dark-400 bg-dark-200 px-10 py-10 sm:max-w-md">
+      <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
+        <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
+          <div className="z-10 flex w-full flex-col items-center">
+            <h1 className="mb-6 text-lg font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              kan.bn
+            </h1>
+            <p className="mb-10 text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              {isMagicLinkSent ? "Check your inbox" : "Welcome back"}
+            </p>
+            {isMagicLinkSent ? (
               <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-                <Auth setIsMagicLinkSent={handleMagicLinkSent} />
+                <p className="text-md mt-2 text-center text-light-1000 dark:text-dark-1000">
+                  {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
+                </p>
               </div>
-            </div>
-          )}
+            ) : (
+              <div className="w-full rounded-lg border border-light-500 bg-light-300 px-4 py-10 dark:border-dark-400 dark:bg-dark-200 sm:max-w-md lg:px-10">
+                <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+                  <Auth setIsMagicLinkSent={handleMagicLinkSent} />
+                </div>
+              </div>
+            )}
+            <p className="mt-4 text-sm text-light-1000 dark:text-dark-1000">
+              Don't have an account?{" "}
+              <span className="underline">
+                <Link href="/signup">Sign up</Link>
+              </span>
+            </p>
+          </div>
+          <PatternedBackground />
         </div>
       </main>
     </>
diff --git a/apps/web/src/views/auth/signup/index.tsx b/apps/web/src/views/auth/signup/index.tsx
index b5777aa4..5dd3c7b5 100644
--- a/apps/web/src/views/auth/signup/index.tsx
+++ b/apps/web/src/views/auth/signup/index.tsx
@@ -1,8 +1,10 @@
+import Link from "next/link";
 import { useState } from "react";
 
 // import { useRouter } from "next/navigation";
 import { Auth } from "~/components/AuthForm";
 import { PageHead } from "~/components/PageHead";
+import PatternedBackground from "~/components/PatternedBackground";
 
 // import { api } from "~/utils/api";
 
@@ -28,28 +30,37 @@ export default function SignupPage() {
 
   return (
     <>
-      <PageHead title="Signup | kan.bn" />
-      <main className="h-screen bg-dark-50">
-        <div className="flex h-full flex-col items-center justify-center">
-          <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
-            kan.bn
-          </h1>
-          <p className="mb-10 text-3xl text-dark-1000">
-            {isMagicLinkSent ? "Check your inbox" : "Get started"}
-          </p>
-          {isMagicLinkSent ? (
-            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-              <p className="text-md mt-2 text-center text-dark-1000">
-                {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
-              </p>
-            </div>
-          ) : (
-            <div className="w-full rounded-lg border border-dark-400 bg-dark-200 px-10 py-10 sm:max-w-md">
+      <PageHead title="Login | kan.bn" />
+      <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
+        <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
+          <div className="z-10 flex w-full flex-col items-center">
+            <h1 className="mb-6 text-lg font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              kan.bn
+            </h1>
+            <p className="mb-10 text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
+              {isMagicLinkSent ? "Check your inbox" : "Create your account"}
+            </p>
+            {isMagicLinkSent ? (
               <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-                <Auth setIsMagicLinkSent={handleMagicLinkSent} />
+                <p className="text-md mt-2 text-center text-light-1000 dark:text-dark-1000">
+                  {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
+                </p>
               </div>
-            </div>
-          )}
+            ) : (
+              <div className="w-full rounded-lg border border-light-500 bg-light-300 px-4 py-10 dark:border-dark-400 dark:bg-dark-200 sm:max-w-md lg:px-10">
+                <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+                  <Auth setIsMagicLinkSent={handleMagicLinkSent} />
+                </div>
+              </div>
+            )}
+            <p className="mt-4 text-sm text-light-1000 dark:text-dark-1000">
+              Already have an account?{" "}
+              <span className="underline">
+                <Link href="/login">Sign in</Link>
+              </span>
+            </p>
+          </div>
+          <PatternedBackground />
         </div>
       </main>
     </>