ui: overhaul home page, style guide, account settings - Home page: bg-background, border-based org cards, material icons, compact typography - Style guide: new header with back button, rounded-xl swatches, consistent section headings - Account settings: replace bg-background rounded-[32px] with border-based rounded-xl cards - svelte-check: 0 errors, vitest: 112/112 passed
This commit is contained in:
AlacrisDevs
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
import { Button, Card, Modal, Input } from "$lib/components/ui";
|
||||
import { Button, Modal, Input } 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";
|
||||
@@ -58,108 +58,53 @@
|
||||
<title>Organizations | Root</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen bg-dark">
|
||||
<header class="border-b border-light/10 bg-surface">
|
||||
<div
|
||||
class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"
|
||||
>
|
||||
<h1 class="text-xl font-bold text-light">Root Org</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/style" class="text-sm text-light/60 hover:text-light"
|
||||
>Style Guide</a
|
||||
>
|
||||
<div class="min-h-screen bg-background">
|
||||
<!-- 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>
|
||||
<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 variant="tertiary" size="sm" type="submit">Sign Out</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-6 py-8">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<main class="max-w-5xl mx-auto px-6 py-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-light">
|
||||
Your Organizations
|
||||
</h2>
|
||||
<p class="text-light/50 mt-1">
|
||||
Select an organization to get started
|
||||
</p>
|
||||
<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 onclick={() => (showCreateModal = true)}>
|
||||
<svg
|
||||
class="w-4 h-4 mr-2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
New Organization
|
||||
</Button>
|
||||
<Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>New Organization</Button>
|
||||
</div>
|
||||
|
||||
{#if organizations.length === 0}
|
||||
<Card>
|
||||
<div class="p-12 text-center">
|
||||
<svg
|
||||
class="w-16 h-16 mx-auto mb-4 text-light/30"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-light mb-2">
|
||||
No organizations yet
|
||||
</h3>
|
||||
<p class="text-light/50 mb-6">
|
||||
Create your first organization to start collaborating
|
||||
</p>
|
||||
<Button onclick={() => (showCreateModal = true)}
|
||||
>Create Organization</Button
|
||||
>
|
||||
</div>
|
||||
</Card>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<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">
|
||||
<Card
|
||||
class="h-full hover:ring-1 hover:ring-primary/50 transition-all"
|
||||
>
|
||||
<div class="p-6">
|
||||
<div
|
||||
class="flex items-start justify-between mb-4"
|
||||
>
|
||||
<div
|
||||
class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center text-primary font-bold text-lg"
|
||||
>
|
||||
{org.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-light/10 rounded text-light/60 capitalize"
|
||||
>
|
||||
{org.role}
|
||||
</span>
|
||||
<div class="bg-dark/30 border border-light/5 hover:border-light/10 rounded-xl 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>
|
||||
<h3
|
||||
class="text-lg font-semibold text-light group-hover:text-primary transition-colors"
|
||||
>
|
||||
{org.name}
|
||||
</h3>
|
||||
<p class="text-sm text-light/40 mt-1">
|
||||
/{org.slug}
|
||||
</p>
|
||||
<span class="text-[10px] px-2 py-0.5 bg-light/5 rounded-md text-light/40 capitalize font-body">{org.role}</span>
|
||||
</div>
|
||||
</Card>
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user