feat: responsive auth page

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>

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" &&

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="/">

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,
             )}