Major UI revamp, follow standard scheme
This commit is contained in:
+80
-72
@@ -1,78 +1,86 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 0 0% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 0 0% 83.1%;
|
||||
}
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 0 0% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 0 0% 83.1%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply col-span-2 p-6 border-l border-neutral-900;
|
||||
}
|
||||
|
||||
.background {
|
||||
@apply col-span-3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,34 @@
|
||||
|
||||
<ModeWatcher />
|
||||
|
||||
<div class="w-screen h-screen flex flex-col items-center justify-center">
|
||||
{@render children()}
|
||||
<div class="w-screen h-screen font-mono">
|
||||
<!-- 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>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
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 { Label } from '$lib/components/ui/label/index.js';
|
||||
|
||||
@@ -40,33 +39,26 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<Card.Root class="w-[350px]">
|
||||
<form on:submit={login}>
|
||||
<Card.Header>
|
||||
<Card.Title>Login to Account</Card.Title>
|
||||
<Card.Description>Please enter your credentials below to login.</Card.Description>
|
||||
<Card.Description>You will be redirected to .</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<!-- Display success or error message -->
|
||||
{#if successMessage}
|
||||
<p class="text-green-500 mb-4">{successMessage}</p>
|
||||
{:else if errorMessage}
|
||||
<p class="text-red-500 mb-4">{errorMessage}</p>
|
||||
{/if}
|
||||
<Label for="email">Email:</Label>
|
||||
<Input id="email" type="email" bind:value={email} required />
|
||||
<form class=" gap-4 flex flex-col h-full" on:submit|preventDefault={login}>
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold">Welcome back</h1>
|
||||
<h3 class="text-sm">Please login to your account to access the application</h3>
|
||||
</div>
|
||||
<!-- Display success or error message -->
|
||||
{#if successMessage}
|
||||
<p class="text-green-500 mb-4">{successMessage}</p>
|
||||
{:else if errorMessage}
|
||||
<p class="text-red-500 mb-4">{errorMessage}</p>
|
||||
{/if}
|
||||
<Label for="email">Email:</Label>
|
||||
<Input id="email" type="email" bind:value={email} required />
|
||||
|
||||
<Label for="password">Password:</Label>
|
||||
<Input id="password" type="password" bind:value={password} required />
|
||||
<Label for="password">Password:</Label>
|
||||
<Input id="password" type="password" bind:value={password} required />
|
||||
|
||||
<!-- Submit button within the form -->
|
||||
</Card.Content>
|
||||
<Card.Footer class="flex justify-between">
|
||||
<Button variant="outline" on:click={() => goto(`/register?redirect=${redirectUrl}`)}
|
||||
>Register</Button
|
||||
>
|
||||
<Button type="submit">Login</Button>
|
||||
</Card.Footer>
|
||||
</form>
|
||||
</Card.Root>
|
||||
<!-- Submit button within the form -->
|
||||
<Button class="mt-auto" type="submit">Login</Button>
|
||||
<Button variant="outline" on:click={() => goto(`/register?redirect=${redirectUrl}`)}
|
||||
>Register</Button
|
||||
>
|
||||
</form>
|
||||
|
||||
@@ -50,35 +50,30 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card.Root class="w-[350px]">
|
||||
<form on:submit|preventDefault={submitForm}>
|
||||
<Card.Header>
|
||||
<Card.Title>Register Account</Card.Title>
|
||||
<Card.Description>Please fill in the details below to create an account.</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if successMessage}
|
||||
<p class="text-green-500">{successMessage}</p>
|
||||
{:else if errorMessage}
|
||||
<p class="text-red-500">{errorMessage}</p>
|
||||
{/if}
|
||||
<Label for="email">Email:</Label>
|
||||
<Input id="email" type="email" bind:value={email} required />
|
||||
<form class=" gap-4 flex flex-col h-full" on:submit|preventDefault={submitForm}>
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold">New here?</h1>
|
||||
<h3 class="text-sm">Please fill in the details below to create an account.</h3>
|
||||
</div>
|
||||
<!-- Display success or error message -->
|
||||
{#if successMessage}
|
||||
<p class="text-green-500">{successMessage}</p>
|
||||
{:else if errorMessage}
|
||||
<p class="text-red-500">{errorMessage}</p>
|
||||
{/if}
|
||||
<Label for="email">Email:</Label>
|
||||
<Input id="email" type="email" bind:value={email} required />
|
||||
|
||||
<Label for="password">Password:</Label>
|
||||
<Input id="password" type="password" bind:value={password} required />
|
||||
<Label for="password">Password:</Label>
|
||||
<Input id="password" type="password" bind:value={password} required />
|
||||
|
||||
<Label for="firstName">First Name:</Label>
|
||||
<Input id="firstName" type="text" bind:value={firstName} />
|
||||
<Label for="firstName">First Name:</Label>
|
||||
<Input id="firstName" type="text" bind:value={firstName} />
|
||||
|
||||
<Label for="lastName">Last Name:</Label>
|
||||
<Input id="lastName" type="text" bind:value={lastName} />
|
||||
</Card.Content>
|
||||
<Card.Footer class="flex justify-between">
|
||||
<Button variant="outline" on:click={() => goto(`/login?redirect=${redirectUrl}`)}
|
||||
>Login</Button
|
||||
>
|
||||
<Button type="submit">Register</Button>
|
||||
</Card.Footer>
|
||||
</form>
|
||||
</Card.Root>
|
||||
<Label for="lastName">Last Name:</Label>
|
||||
<Input id="lastName" type="text" bind:value={lastName} />
|
||||
|
||||
<!-- Submit button within the form -->
|
||||
<Button class="mt-auto" type="submit">Register</Button>
|
||||
<Button variant="outline" on:click={() => goto(`/login?redirect=${redirectUrl}`)}>Login</Button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user