Misc UI Fixes

app/[event-code]/edit/loading.tsx

@@ -0,0 +1,26 @@
+import HeaderSpacer from "@/app/ui/components/header/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex animate-pulse flex-col space-y-4 pr-6 pl-6">
+      <HeaderSpacer />
+
+      <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
+        <div className="h-12 w-3/4 rounded-3xl bg-gray-200 md:w-1/2 dark:bg-[#343249]" />
+        <div className="hidden h-10 w-50 rounded-full bg-gray-200 dark:bg-[#343249]" />
+      </div>
+
+      <div className="grid w-full grid-cols-1 grid-rows-[auto] gap-y-4 md:grow md:grid-cols-[200px_auto] md:grid-rows-[auto_auto] md:gap-x-4 md:gap-y-4">
+        <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+        <div className="col-span-3 hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+        <div className="hidden h-20 rounded-3xl bg-gray-200 md:col-start-1 md:row-start-2 md:block dark:bg-[#343249]" />
+        <div className="hidden h-120 rounded-3xl bg-gray-200 md:col-span-10 md:col-start-2 md:row-span-10 md:row-start-2 md:block dark:bg-[#343249]" />
+        <div className="hidden h-60 rounded-3xl bg-gray-200 md:col-start-1 md:row-start-11 md:block dark:bg-[#343249]" />
+
+        <div className="h-20 w-3/4 rounded-3xl bg-gray-200 md:hidden" />
+        <div className="h-20 w-3/4 rounded-3xl bg-gray-200 md:hidden" />
+        <div className="h-100 rounded-3xl bg-gray-200 md:hidden" />
+      </div>
+    </div>
+  );
+}

app/[event-code]/loading.tsx

@@ -0,0 +1,28 @@
+import HeaderSpacer from "@/app/ui/components/header/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex animate-pulse flex-col space-y-4 pr-6 pl-6">
+      <HeaderSpacer />
+
+      <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
+        <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+
+        <div className="h-10 w-40 rounded-full bg-gray-200 dark:bg-[#343249]" />
+      </div>
+
+      <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
+        <div className="h-fit w-full shrink-0 space-y-6 overflow-y-auto md:w-80">
+          <div className="space-y-3">
+            <div className="h-8 w-3/4 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+            <div className="h-8 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+          </div>
+          <div className="hidden h-70 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+          <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        </div>
+
+        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+      </div>
+    </div>
+  );
+}

app/[event-code]/results/loading.tsx

@@ -0,0 +1,26 @@
+import HeaderSpacer from "@/app/ui/components/header/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex animate-pulse flex-col space-y-4 pr-6 pl-6">
+      <HeaderSpacer />
+
+      <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
+        <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+
+        <div className="h-10 w-50 rounded-full bg-gray-200 dark:bg-[#343249]" />
+      </div>
+
+      <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
+        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+
+        <div className="h-fit w-full shrink-0 space-y-4 overflow-y-auto md:w-80">
+          <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+
+          <div className="hidden h-70 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+          <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        </div>
+      </div>
+    </div>
+  );
+}

app/_utils/validate-data.tsx

@@ -9,6 +9,8 @@ export async function validateEventData(
 
   if (!title?.trim()) {
     errors.title = "Please enter an event name.";
+  } else if (title.length > 50) {
+    errors.title = "Event name must be under 50 characters.";
   }
 
   if (customCode) {

app/dashboard/loading.tsx

@@ -0,0 +1,20 @@
+import HeaderSpacer from "@/app/ui/components/header/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex min-h-screen flex-col gap-4 pr-6 pl-6">
+      <HeaderSpacer />
+
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+
+      <div className="flex h-full flex-col gap-4 md:flex-row">
+        <div className="flex flex-col gap-4">
+          <div className="h-10 w-40 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+          <div className="h-10 w-40 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        </div>
+
+        <div className="h-120 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+      </div>
+    </div>
+  );
+}

app/forgot-password/page.tsx

@@ -87,7 +87,7 @@ export default function Page() {
             {/* Email Button */}
             <button
               type="submit"
-              className="mb-2 cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium transition"
+              className="mb-2 cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium text-white transition dark:bg-red"
             >
               Send Link
             </button>

app/globals.css

@@ -20,7 +20,11 @@
   --background: var(--violet);
   --foreground: var(--bone);
   --calendar-accent: var(--color-red);
-  --calendar-accent-background: var(--color-red-200);
+  --calendar-accent-background: color-mix(
+    in srgb,
+    var(--color-red-200) 25%,
+    transparent
+  );
 }
 
 body {
@@ -78,6 +82,7 @@ body {
 .rdp-root {
   --rdp-accent-color: var(--calendar-accent);
   --rdp-accent-background-color: var(--calendar-accent-background);
+  --rdp-day_button-border: 3px solid transparent;
 }
 
 .rdp-months {

app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({
       className={`${modak.variable} ${nunito.variable}`}
     >
       <body className="font-sans antialiased">
-        <div className="flex min-h-dvh flex-col">
+        <div className="mx-auto flex min-h-dvh max-w-[1440px] flex-col">
           <Providers>
             <Header />
             {children}

app/loading.tsx

@@ -1,4 +1,9 @@
 export default function Loading() {
-  // Define the Loading UI here
-  return <div>Loading...</div>;
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <h1 className="font-display mb-4 block text-5xl leading-none text-lion md:text-8xl">
+        loading...
+      </h1>
+    </div>
+  );
 }

app/login/page.tsx

@@ -97,7 +97,7 @@ export default function Page() {
           {/* Login Button */}
           <button
             type="submit"
-            className="mb-2 cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium transition"
+            className="mb-2 cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium text-white transition dark:bg-red"
           >
             Login
           </button>

app/page.tsx

@@ -39,48 +39,50 @@ export default function Home() {
       </section>
 
       {/* Why Plancake Section */}
-      <section className="bg-bone py-16 dark:bg-gray-300">
+      <section className="bg-white py-16 dark:bg-violet">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="grid items-center gap-12 md:grid-cols-2">
-            {/* Pancake emoji - centered on mobile */}
-            <div className="order-1 flex justify-center md:order-1">
-              <div className="text-8xl">🥞</div>
-            </div>
+          <div className="rounded-3xl bg-bone p-8 dark:bg-gray-300">
+            <div className="grid items-center gap-12 md:grid-cols-2">
+              {/* Pancake emoji - centered on mobile */}
+              <div className="order-1 flex justify-center md:order-1">
+                <div className="text-8xl">🥞</div>
+              </div>
 
-            {/* Content - centered on mobile, left-aligned on desktop */}
-            <div className="order-2 text-center md:order-2 md:text-left">
-              <h2 className="bubble-text mb-8 text-4xl text-violet md:text-6xl dark:text-bone">
-                why
-                <br />
-                <span className="text-violet dark:text-bone">plancake?</span>
-              </h2>
-              <div className="space-y-6">
-                <div>
-                  <h3 className="mb-2 text-xl font-semibold text-violet dark:text-bone">
-                    Smart Planning
-                  </h3>
-                  <p className="text-violet dark:text-bone">
-                    Intelligently suggest optimal meeting times based on
-                    everyone&apos;s availability.
-                  </p>
-                </div>
-                <div>
-                  <h3 className="mb-2 text-xl font-semibold text-violet dark:text-bone">
-                    Easy Coordination
-                  </h3>
-                  <p className="text-violet dark:text-bone">
-                    Share a simple link and watch as responses stack up without
-                    the back-and-forth.
-                  </p>
-                </div>
-                <div>
-                  <h3 className="mb-2 text-xl font-semibold text-violet dark:text-bone">
-                    Perfect Results
-                  </h3>
-                  <p className="text-violet dark:text-bone">
-                    Get the ideal meeting time that works for everyone with an
-                    intuitive graph view.
-                  </p>
+              {/* Content - centered on mobile, left-aligned on desktop */}
+              <div className="order-2 text-center md:order-2 md:text-left">
+                <h2 className="bubble-text mb-8 text-4xl text-violet md:text-6xl dark:text-bone">
+                  why
+                  <br />
+                  <span className="text-violet dark:text-bone">plancake?</span>
+                </h2>
+                <div className="space-y-6">
+                  <div>
+                    <h3 className="mb-2 text-xl font-semibold text-violet dark:text-bone">
+                      Smart Planning
+                    </h3>
+                    <p className="text-violet dark:text-bone">
+                      Intelligently suggest optimal meeting times based on
+                      everyone&apos;s availability.
+                    </p>
+                  </div>
+                  <div>
+                    <h3 className="mb-2 text-xl font-semibold text-violet dark:text-bone">
+                      Easy Coordination
+                    </h3>
+                    <p className="text-violet dark:text-bone">
+                      Share a simple link and watch as responses stack up
+                      without the back-and-forth.
+                    </p>
+                  </div>
+                  <div>
+                    <h3 className="mb-2 text-xl font-semibold text-violet dark:text-bone">
+                      Perfect Results
+                    </h3>
+                    <p className="text-violet dark:text-bone">
+                      Get the ideal meeting time that works for everyone with an
+                      intuitive graph view.
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
@@ -141,9 +143,11 @@ export default function Home() {
       </section>
 
       {/* Plan Today Section */}
-      <section className="bg-bone py-16 text-violet dark:bg-gray-300">
+      <section className="py-16">
         <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
-          <h2 className="bubble-text mb-8 text-6xl md:text-8xl">PLAN TODAY</h2>
+          <h2 className="bubble-text mb-8 text-6xl text-lion md:text-8xl">
+            PLAN TODAY
+          </h2>
           <div className="mt-8">
             <Link
               href="/new-event"

app/register/page.tsx

@@ -150,7 +150,7 @@ export default function Page() {
         <div className="flex w-full">
           <button
             type="submit"
-            className="mb-2 ml-auto cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium transition"
+            className="mb-2 ml-auto cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium text-white transition dark:bg-red"
           >
             Register
           </button>

app/reset-password/page.tsx

@@ -143,7 +143,7 @@ export default function Page() {
         <div className="flex w-full">
           <button
             type="submit"
-            className="mb-2 ml-auto cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium transition"
+            className="mb-2 ml-auto cursor-pointer gap-2 rounded-full bg-blue px-4 py-2 font-medium text-white transition dark:bg-red"
           >
             reset password
           </button>

app/ui/components/date-range/date-range-drawer.tsx

@@ -31,13 +31,13 @@ export default function DateRangeDrawer({
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <button className="cursor-pointer" aria-label="Open date range picker">
+        <div className="cursor-pointer" aria-label="Open date range picker">
           <DateRangeDrawerSelector
             eventRange={eventRange}
             setEventType={setEventType}
             tooManyDays={tooManyDays}
           />
-        </button>
+        </div>
       </Dialog.Trigger>
 
       <Dialog.Portal>
@@ -52,8 +52,9 @@ export default function DateRangeDrawer({
               className="sticky mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300"
             />
             <Dialog.Title className="mb-2 flex flex-row items-center justify-between text-lg font-semibold">
-              <label htmlFor="date-range-type">Select Date Range</label>
+              <label htmlFor="event-type-select">Select Date Range</label>
               <EventTypeSelect
+                id="event-type-select"
                 eventType={rangeType}
                 onEventTypeChange={setEventType}
                 disabled={editing}
@@ -115,11 +116,7 @@ const DateRangeDrawerSelector = ({
   }
   return (
     <div className="flex flex-col space-y-2">
-      {!displayCalendar && (
-        <label className="text-start" htmlFor="date-range">
-          Dates
-        </label>
-      )}
+      {!displayCalendar && <label className="text-start">Dates</label>}
       <WeekdayCalendar
         selectedDays={
           eventRange?.weekdays ?? {
@@ -133,6 +130,7 @@ const DateRangeDrawerSelector = ({
           }
         }
         onChange={setWeekdayRange}
+        inDrawer={true}
       />
     </div>
   );

app/ui/components/date-range/date-range-input.tsx

@@ -15,8 +15,11 @@ export default function DateRangeInput({
     <form className="flex w-full flex-col gap-y-2 md:flex-row md:gap-4">
       {/* Start Date */}
       <div className="flex w-fit items-center space-x-4">
-        <label className="text-gray-400 md:hidden">FROM</label>
+        <label htmlFor="start-date" className="text-gray-400 md:hidden">
+          FROM
+        </label>
         <span
+          id="start-date"
           className="bg-transparent text-blue focus:outline-none dark:text-red"
           aria-label="Start date"
         >
@@ -28,8 +31,11 @@ export default function DateRangeInput({
 
       {/* End Date */}
       <div className="flex w-fit items-center space-x-4">
-        <label className="text-gray-400 md:hidden">UNTIL</label>
+        <label htmlFor="end-date" className="text-gray-400 md:hidden">
+          UNTIL
+        </label>
         <span
+          id="end-date"
           className="bg-transparent text-blue focus:outline-none md:text-end dark:text-red"
           aria-label="End date"
         >

app/ui/components/date-range/date-range-selector.tsx

@@ -42,9 +42,10 @@ export default function DateRangeSelector({
   } else {
     return (
       <div className="mb-4 flex w-full flex-row gap-8">
-        <div className="flex flex-col">
-          <label htmlFor="date-range-type">Type</label>
+        <div className="flex flex-col gap-2">
+          <label htmlFor="event-type-select">Type</label>
           <EventTypeSelect
+            id="event-type-select"
             eventType={rangeType}
             disabled={editing}
             onEventTypeChange={setEventType}
@@ -53,7 +54,7 @@ export default function DateRangeSelector({
         <div className="flex w-full flex-col justify-center gap-2">
           {eventRange?.type === "specific" ? (
             <>
-              <label className="flex items-center gap-2" htmlFor="date-range">
+              <label className="flex items-center gap-2">
                 Possible Dates
                 {tooManyDays && (
                   <ExclamationTriangleIcon className="h-4 w-4 text-[#ED7183]" />