fix: ui for /new

Author: lalitm1004

frontend/src/lib/components/BorderButton.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let {
+        disabled = $bindable(false),
+        class: buttonClass = "",
+        borderStyle = "",
+        onclick = () => {},
+        children
+    } = $props();
+</script>
+
+<div class={`relative h-fit w-fit`}>
+    <button
+        class={twMerge(
+            'bg-white text-black px-6 py-3 font-raleway font-medium rounded-lg',
+            buttonClass
+        )}
+        onclick={() => onclick()}
+    >
+        {@render children()}
+    </button>
+
+    <div class={twMerge(
+        `-z-10 absolute top-[6px] left-[6px] h-full w-full rounded-lg border-2 border-white`,
+        borderStyle
+    )}></div>
+</div>

frontend/src/lib/components/Modal.svelte

@@ -3,7 +3,11 @@
     import { fade } from "svelte/transition";
     import { twMerge } from "tailwind-merge";
 
-    let { isOpen = $bindable(), class: modalClass = "", children} = $props();
+    let {
+        isOpen = $bindable(),
+        class: modalClass = "",
+        children
+    } = $props();
     const closeModal = () => isOpen = false;
 </script>
 
@@ -12,7 +16,13 @@
         in:fade={{ duration: 50 }}
         class={`fixed top-0 left-0 z-30 h-screen w-screen grid place-items-center bg-neutral-800/60 backdrop-blur-sm`}
     >
-        <div class={twMerge(`relative z-40 grid place-items-center px-8 py-4 bg-white rounded-md`, modalClass)} use:clickOutside={() => closeModal()}>
+        <div
+            class={twMerge(
+                `relative z-40 grid place-items-center px-8 py-4 bg-white rounded-md`,
+                modalClass
+            )}
+            use:clickOutside={() => closeModal()}
+        >
             <!-- Close modal button -->
             <button class={`absolute top-2 right-2`} aria-label={`Close Modal`} onclick={() => closeModal()}>
                 <svg class={`h-[24px] aspect-square fill-none stroke-current stroke-2 lucide lucide-x-icon lucide-x`} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">

frontend/src/lib/components/SpellSymbols.svelte

@@ -6,7 +6,7 @@ export enum ValidationOptions {
     NUMERIC = '0123456789',
     SPACE = ' ',
     SPECIAL_CHARACTERS = ',.!?;:_<>',
-    ALL = ' ,.!?;:_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+    ALL = ' ,.!?;:_<>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
 }
 
 export interface IValidationConfig {

frontend/src/lib/directives/validateInput.svelte.ts

@@ -57,4 +57,9 @@
         src={`/assets/images/splash.webp`}
         alt={`SplashScreen`}
     />
-{/if}
+{/if}
+
+<svelte:head>
+    <title>Labyrinth</title>
+    <meta name="description" content="Dive into Labyrinth 2025 — a Scott Pilgrim-inspired treasure hunt across Shiv Nadar University. Battle riddles, defeat evil exes, and race for a ₹50,000 prize. Register now!">
+</svelte:head>

frontend/src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
+    import BorderButton from "$lib/components/BorderButton.svelte";
     import { validateInput, ValidationOptions } from "$lib/directives/validateInput.svelte";
     import { LoadingStore } from "$lib/stores/LoadingStore";
-    import { UserStore } from "$lib/stores/SupabaseStore";
     import { setTeam, type ITeamData } from "$lib/stores/TeamStore";
     import { addToast } from "$lib/stores/ToastStore";
     import { fetchWithAuth } from "$lib/utils/fetchWithAuth";
@@ -12,7 +12,7 @@
 
     type PageState = 'create' | 'join';
 
-    let pageState: PageState = $state('create');
+    let pageState: PageState = $state('join');
     let teamName: string = $state('');
     let teamId: string = $state('');
 
@@ -133,54 +133,91 @@
     }
 </script>
 
-<main class={`h-screen w-screen flex flex-col justify-center items-center py-4`}>
-    <div class={`w-[90%] flex flex-col p-4 border-2 rounded-lg`}>
-        <div class={`h-fit w-full gap-3 flex justify-center items-center p-4`}>
-            <button class={`px-4 py-2 rounded-lg border-2 ${pageState === 'create' && 'border-green-500'}`} onmousedown={() => pageState = 'create'}>Create Team</button>
-            <button class={`px-4 py-2 rounded-lg border-2 ${pageState === 'join' && 'border-green-500'}`} onmousedown={() => pageState = 'join'}>Join Team</button>
+<main class={`h-screen w-screen flex flex-col justify-center gap-2 pt-16 pb-8 px-4`}>
+    <hgroup>
+        <h1 class={`font-neue-machina font-black text-3xl`}>Registration</h1>
+        <p class={`text-sm`}>Team up in groups of 4 and dive head first into defeating 7 evil exes!</p>
+    </hgroup>
+
+    <div class={`flex flex-col justify-center items-center mt-4`}>
+        <div class={`flex w-full justify-between items-center gap-1 p-1 bg-neutral-800 rounded-full text-lg text-black font-medium`}>
+            <button
+                onclick={() => pageState = 'join'}
+                class={`w-1/2 flex justify-center items-center py-2 px-2 rounded-full transition-colors duration-300 ${pageState === 'join' ? 'text-black bg-white' : 'text-white'}`}
+            >
+                Join
+            </button>
+
+            <button
+                onclick={() => pageState = 'create'}
+                class={`w-1/2 flex justify-center items-center py-2 px-2 rounded-full transition-colors duration-300 ${pageState !== 'join' ? 'text-black bg-white' : 'text-white'}`}
+            >
+                Create
+            </button>
         </div>
+    </div>
 
-        {#if pageState === 'create'}
-            <div class={`flex flex-col gap-4`}>
-                <label for={`team_name`}>Team Name</label>
-                <input
-                    type={`text`}
-                    id={`team_name`}
-                    bind:value={teamName}
-                    class={`w-full border-2 p-2 rounded-lg`}
-                />
-
-                <button onclick={() => createTeam()} class={`w-full border-2 p-2 rounded-lg`}>
-                    Create Team
-                </button>
-            </div>
-        {:else if pageState === 'join'}
-            <div class={`flex flex-col gap-4`}>
-                <label for={`team_name`}>Team Code</label>
-                <input
-                    type={`text`}
-                    id={`team_name`}
-                    bind:value={teamId}
-                    use:validateInput={{
-                        allowed: [ValidationOptions.NUMERIC],
-                        maxLength: 6
-                    }}
-                    class={`w-full border-2 p-2 rounded-lg`}
-                    placeholder="e.g, 123456"
-                />
-
-                <button onclick={() => joinTeam()} class={`w-full border-2 p-2 rounded-lg`}>
-                    Join Team
-                </button>
-            </div>
+    <div class={`flex flex-col justify-center items-center gap-2 mt-2`}>
+        {#if pageState === 'join'}
+            <input
+                id={`team_id`}
+                name={`team_id`}
+                class={`w-[80%] py-4 px-4 text-lg bg-neutral-800 border-2 border-neutral-600 rounded-lg mb-2`}
+                use:validateInput={{
+                    maxLength: 6,
+                    allowed: [ValidationOptions.NUMERIC]
+                }}
+                bind:value={teamId}
+                placeholder={`Team Code`}
+            />
+
+            <BorderButton onclick={() => joinTeam()} class={`px-8 active:bg-neutral-400 flex justify-center items-center gap-2`}>
+                <p class={`font-semibold`}>Join Team</p>
+                <svg xmlns="http://www.w3.org/2000/svg" class={`h-[18px] aspect-square fill-none stroke-3 stroke-current lucide lucide-user-plus-icon lucide-user-plus`} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+                    <circle cx="9" cy="7" r="4"/>
+                    <line x1="19" x2="19" y1="8" y2="14"/>
+                    <line x1="22" x2="16" y1="11" y2="11"/>
+                </svg>
+            </BorderButton>
+        {:else}
+            <input
+                id={`team_id`}
+                name={`team_id`}
+                class={`w-[80%] py-4 px-4 text-lg bg-neutral-800 border-2 border-neutral-600 rounded-lg mb-2`}
+                use:validateInput={{
+                    maxLength: 18,
+                    allowed: [ValidationOptions.ALL]
+                }}
+                bind:value={teamName}
+                placeholder={`Team Name`}
+            />
+
+            <BorderButton onclick={() => createTeam()} class={`px-8 active:bg-neutral-400 flex justify-center items-center gap-1`}>
+                <p class={`font-semibold`}>Create Team</p>
+                <svg xmlns="http://www.w3.org/2000/svg" class={`h-[18px] aspect-square fill-none stroke-current stroke-3 lucide lucide-plus-icon lucide-plus`} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M5 12h14"/>
+                    <path d="M12 5v14"/>
+                </svg>
+            </BorderButton>
         {/if}
     </div>
 
 
-    <div class={`flex flex-col`}>
-        <p>{$UserStore?.email}</p>
-        <button onclick={() => handleSignOut()} class={`border-2 px-4 py-2 rounded-lg`}>
+    <div class={`flex flex-col justify-center items-center text-center gap-2 mt-16`}>
+        <div class={`border-t-2 border-white/20 h-[0.5px] w-full`}></div>
+        <div class={`mt-1`}>
+            <p>Logged in with email</p>
+            <p>{user!.email}</p>
+        </div>
+
+        <button class={`active:bg-neutral-700 border-2 border-labyrinth-red bg-neutral-800/60 transition-colors duration-200 text-labyrinth-neutral-200 px-4 py-2 rounded-lg`}>
             Sign Out
         </button>
     </div>
-</main>
+</main>
+
+<svelte:head>
+    <title>Labyrinth | Team Registration</title>
+    <meta name="description" content="Create or join a team and dive into Labyrinth 2025!">
+</svelte:head>