Mega push vol 7 mvp lesgoooo

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from "svelte";
-    import { Button, Modal, Input } from "$lib/components/ui";
+    import { Modal } from "$lib/components/ui";
     import { createOrganization, generateSlug } from "$lib/api/organizations";
     import { toasts } from "$lib/stores/toast.svelte";
     import type { SupabaseClient } from "@supabase/supabase-js";
@@ -24,6 +24,7 @@
 
     const supabase = getContext<SupabaseClient<Database>>("supabase");
 
+    // svelte-ignore state_referenced_locally
     let organizations = $state(data.organizations);
     $effect(() => {
         organizations = data.organizations;
@@ -62,14 +63,15 @@
     <!-- Header -->
     <header class="border-b border-light/5">
         <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
-            <div class="flex items-center gap-3">
-                <span class="material-symbols-rounded text-primary" style="font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 28;">hub</span>
-                <span class="font-heading text-h4 text-white">Root</span>
+            <div class="flex items-center gap-2.5">
+                <div class="w-8 h-8 bg-primary/10 rounded-xl flex items-center justify-center">
+                    <span class="material-symbols-rounded text-primary" style="font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 18;">hub</span>
+                </div>
+                <span class="font-heading text-body text-white">Root</span>
             </div>
             <div class="flex items-center gap-2">
-                <a href="/style" class="px-3 py-1.5 text-[12px] text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors">Style Guide</a>
                 <form method="POST" action="/auth/logout">
-                    <Button variant="tertiary" size="sm" type="submit">Sign Out</Button>
+                    <button type="submit" class="px-3 py-1.5 text-body-sm text-light/40 hover:text-white hover:bg-dark/50 rounded-xl transition-colors">Sign Out</button>
                 </form>
             </div>
         </div>
@@ -81,26 +83,37 @@
                 <h2 class="font-heading text-h3 text-white">Your Organizations</h2>
                 <p class="text-body-sm text-light/40 mt-1">Select an organization to get started</p>
             </div>
-            <Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>New Organization</Button>
+            <button
+                class="flex items-center gap-1.5 px-3 py-2 bg-primary text-background rounded-xl text-body-sm font-body hover:bg-primary-hover transition-colors"
+                onclick={() => (showCreateModal = true)}
+            >
+                <span class="material-symbols-rounded" style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;">add</span>
+                New Organization
+            </button>
         </div>
 
         {#if organizations.length === 0}
-            <div class="bg-dark/30 border border-light/5 rounded-xl p-12 text-center">
-                <span class="material-symbols-rounded text-light/20 mb-3 block" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">groups</span>
+            <div class="bg-dark/30 border border-light/5 rounded-2xl p-12 text-center">
+                <div class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-light/5 flex items-center justify-center">
+                    <span class="material-symbols-rounded text-light/20" style="font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 28;">groups</span>
+                </div>
                 <h3 class="font-heading text-body text-white mb-1">No organizations yet</h3>
                 <p class="text-body-sm text-light/40 mb-6">Create your first organization to start collaborating</p>
-                <Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>Create Organization</Button>
+                <button
+                    class="px-4 py-2 bg-primary text-background rounded-xl text-body-sm font-body hover:bg-primary-hover transition-colors"
+                    onclick={() => (showCreateModal = true)}
+                >Create Organization</button>
             </div>
         {:else}
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                 {#each organizations as org}
                     <a href="/{org.slug}" class="block group">
-                        <div class="bg-dark/30 border border-light/5 hover:border-light/10 rounded-xl p-5 transition-all h-full">
+                        <div class="bg-dark/30 border border-light/5 hover:border-primary/30 rounded-2xl p-5 transition-all h-full">
                             <div class="flex items-start justify-between mb-3">
                                 <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body">
                                     {org.name.charAt(0).toUpperCase()}
                                 </div>
-                                <span class="text-[10px] px-2 py-0.5 bg-light/5 rounded-md text-light/40 capitalize font-body">{org.role}</span>
+                                <span class="text-[10px] px-2 py-0.5 bg-light/5 rounded-lg text-light/40 capitalize font-body">{org.role}</span>
                             </div>
                             <h3 class="font-heading text-body-sm text-white group-hover:text-primary transition-colors">{org.name}</h3>
                             <p class="text-[11px] text-light/30 mt-0.5 font-body">/{org.slug}</p>
@@ -117,29 +130,32 @@
     onClose={() => (showCreateModal = false)}
     title="Create Organization"
 >
-    <div class="space-y-4">
-        <Input
-            label="Organization Name"
-            bind:value={newOrgName}
-            placeholder="e.g. Acme Inc"
-        />
+    <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-1.5">
+            <label for="org-name" class="text-body-sm text-light/60 font-body">Organization Name</label>
+            <input
+                id="org-name"
+                type="text"
+                bind:value={newOrgName}
+                placeholder="e.g. Acme Inc"
+                class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+            />
+        </div>
         {#if newOrgName}
-            <p class="text-sm text-light/50">
-                URL: <span class="text-light/70"
-                    >/{generateSlug(newOrgName)}</span
-                >
+            <p class="text-body-sm text-light/40">
+                URL: <span class="text-white font-body">/{generateSlug(newOrgName)}</span>
             </p>
         {/if}
-        <div class="flex justify-end gap-2 pt-2">
-            <Button variant="tertiary" onclick={() => (showCreateModal = false)}
-                >Cancel</Button
-            >
-            <Button
-                onclick={handleCreateOrg}
+        <div class="flex items-center justify-end gap-3 pt-2 border-t border-light/5">
+            <button type="button" class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors" onclick={() => (showCreateModal = false)}>Cancel</button>
+            <button
+                type="button"
                 disabled={!newOrgName.trim() || creating}
+                class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                onclick={handleCreateOrg}
             >
                 {creating ? "Creating..." : "Create"}
-            </Button>
+            </button>
         </div>
     </div>
 </Modal>