owen/svidentity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major UI revamp, follow standard scheme

Browse Source
This commit is contained in:
owen
2025-01-24 21:36:33 -06:00
parent 75f6123aab
commit f3b769bc65
4 changed files with 155 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+80 -72
View File
@@ -1,78 +1,86 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 0 0% 3.9%; --foreground: 0 0% 3.9%;
--muted: 0 0% 96.1%; --muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%; --muted-foreground: 0 0% 45.1%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%; --popover-foreground: 0 0% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 0 0% 3.9%; --card-foreground: 0 0% 3.9%;
--border: 0 0% 89.8%; --border: 0 0% 89.8%;
--input: 0 0% 89.8%; --input: 0 0% 89.8%;
--primary: 0 0% 9%; --primary: 0 0% 9%;
--primary-foreground: 0 0% 98%; --primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%; --secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%; --secondary-foreground: 0 0% 9%;
--accent: 0 0% 96.1%; --accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%; --accent-foreground: 0 0% 9%;
--destructive: 0 72.2% 50.6%; --destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--ring: 0 0% 3.9%; --ring: 0 0% 3.9%;
--radius: 0.5rem; --radius: 0.5rem;
} }
.dark { .dark {
--background: 0 0% 3.9%; --background: 0 0% 0%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--muted: 0 0% 14.9%; --muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%; --muted-foreground: 0 0% 63.9%;
--popover: 0 0% 3.9%; --popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%; --popover-foreground: 0 0% 98%;
--card: 0 0% 3.9%; --card: 0 0% 3.9%;
--card-foreground: 0 0% 98%; --card-foreground: 0 0% 98%;
--border: 0 0% 14.9%; --border: 0 0% 14.9%;
--input: 0 0% 14.9%; --input: 0 0% 14.9%;
--primary: 0 0% 98%; --primary: 0 0% 98%;
--primary-foreground: 0 0% 9%; --primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%; --secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0 0% 98%;
--accent: 0 0% 14.9%; --accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--ring: 0 0% 83.1%; --ring: 0 0% 83.1%;
} }
} }
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
}
.content {
@apply col-span-2 p-6 border-l border-neutral-900;
}
.background {
@apply col-span-3;
}
}
src/routes/+layout.svelte
+30 -2
View File
@@ -6,6 +6,34 @@
<ModeWatcher /> <ModeWatcher />
<div class="w-screen h-screen flex flex-col items-center justify-center"> <div class="w-screen h-screen font-mono">
{@render children()} <!-- Mobile: Single Column, Larger Screens: 5 Columns -->
<div class="flex flex-row w-full h-full">
<div
class="background hidden sm:flex w-full h-full flex-col items-center justify-center select-none"
>
<pre>
______________
/ /|
/ / |
/____________ / |
| ___________ | |
|| || |
|| Hello || |
|| World || |
||___________|| |
| _______ | /
/| (_______) | /
( |_____________|/
\
.=======================.
| :::::::::::::::: ::: |
| ::::::::::::::[] ::: |
| ----------- ::: |
`-----------------------'</pre>
</div>
<div class="content">
{@render children()}
</div>
</div>
</div> </div>
src/routes/login/+page.svelte
+21 -29
View File
@@ -2,7 +2,6 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/state'; import { page } from '$app/state';
import { Button } from '$lib/components/ui/button/index.js'; import { Button } from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import { Input } from '$lib/components/ui/input/index.js'; import { Input } from '$lib/components/ui/input/index.js';
import { Label } from '$lib/components/ui/label/index.js'; import { Label } from '$lib/components/ui/label/index.js';
@@ -40,33 +39,26 @@
}; };
</script> </script>
<Card.Root class="w-[350px]"> <form class=" gap-4 flex flex-col h-full" on:submit|preventDefault={login}>
<form on:submit={login}> <div class="mb-4">
<Card.Header> <h1 class="text-2xl font-bold">Welcome back</h1>
<Card.Title>Login to Account</Card.Title> <h3 class="text-sm">Please login to your account to access the application</h3>
<Card.Description>Please enter your credentials below to login.</Card.Description> </div>
<Card.Description>You will be redirected to .</Card.Description> <!-- Display success or error message -->
</Card.Header> {#if successMessage}
<Card.Content> <p class="text-green-500 mb-4">{successMessage}</p>
<!-- Display success or error message --> {:else if errorMessage}
{#if successMessage} <p class="text-red-500 mb-4">{errorMessage}</p>
<p class="text-green-500 mb-4">{successMessage}</p> {/if}
{:else if errorMessage} <Label for="email">Email:</Label>
<p class="text-red-500 mb-4">{errorMessage}</p> <Input id="email" type="email" bind:value={email} required />
{/if}
<Label for="email">Email:</Label>
<Input id="email" type="email" bind:value={email} required />
<Label for="password">Password:</Label> <Label for="password">Password:</Label>
<Input id="password" type="password" bind:value={password} required /> <Input id="password" type="password" bind:value={password} required />
<!-- Submit button within the form --> <!-- Submit button within the form -->
</Card.Content> <Button class="mt-auto" type="submit">Login</Button>
<Card.Footer class="flex justify-between"> <Button variant="outline" on:click={() => goto(`/register?redirect=${redirectUrl}`)}
<Button variant="outline" on:click={() => goto(`/register?redirect=${redirectUrl}`)} >Register</Button
>Register</Button >
> </form>
<Button type="submit">Login</Button>
</Card.Footer>
</form>
</Card.Root>
src/routes/register/+page.svelte
+24 -29
View File
@@ -50,35 +50,30 @@
} }
</script> </script>
<Card.Root class="w-[350px]"> <form class=" gap-4 flex flex-col h-full" on:submit|preventDefault={submitForm}>
<form on:submit|preventDefault={submitForm}> <div class="mb-4">
<Card.Header> <h1 class="text-2xl font-bold">New here?</h1>
<Card.Title>Register Account</Card.Title> <h3 class="text-sm">Please fill in the details below to create an account.</h3>
<Card.Description>Please fill in the details below to create an account.</Card.Description> </div>
</Card.Header> <!-- Display success or error message -->
<Card.Content> {#if successMessage}
{#if successMessage} <p class="text-green-500">{successMessage}</p>
<p class="text-green-500">{successMessage}</p> {:else if errorMessage}
{:else if errorMessage} <p class="text-red-500">{errorMessage}</p>
<p class="text-red-500">{errorMessage}</p> {/if}
{/if} <Label for="email">Email:</Label>
<Label for="email">Email:</Label> <Input id="email" type="email" bind:value={email} required />
<Input id="email" type="email" bind:value={email} required />
<Label for="password">Password:</Label> <Label for="password">Password:</Label>
<Input id="password" type="password" bind:value={password} required /> <Input id="password" type="password" bind:value={password} required />
<Label for="firstName">First Name:</Label> <Label for="firstName">First Name:</Label>
<Input id="firstName" type="text" bind:value={firstName} /> <Input id="firstName" type="text" bind:value={firstName} />
<Label for="lastName">Last Name:</Label> <Label for="lastName">Last Name:</Label>
<Input id="lastName" type="text" bind:value={lastName} /> <Input id="lastName" type="text" bind:value={lastName} />
</Card.Content>
<Card.Footer class="flex justify-between"> <!-- Submit button within the form -->
<Button variant="outline" on:click={() => goto(`/login?redirect=${redirectUrl}`)} <Button class="mt-auto" type="submit">Register</Button>
>Login</Button <Button variant="outline" on:click={() => goto(`/login?redirect=${redirectUrl}`)}>Login</Button>
> </form>
<Button type="submit">Register</Button>
</Card.Footer>
</form>
</Card.Root>