starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-22 00:35:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implemented settings page

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-19 03:12:04 +03:00
parent 1609b5f24d
commit 834a615883
21 changed files with 1780 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/forms/FormButton.svelte
View File

@@ -9,13 +9,13 @@
<button
on:click
class={classNames(
'p-1.5 px-4 text-sm text-zinc-200 rounded-lg border border-zinc-800',
'p-1.5 px-4 text-sm text-zinc-200 rounded-lg border',
'hover:bg-opacity-30 transition-colors',
'flex items-center gap-2',
{
'bg-green-600 bg-opacity-20 text-green-200 border-green-800': type === 'success',
'bg-red-600 bg-opacity-20 text-red-200 border-red-800': type === 'error',
'bg-zinc-600 bg-opacity-20': type === 'base',
'bg-green-500 bg-opacity-20 text-green-200 border-green-900': type === 'success',
'bg-red-500 bg-opacity-20 text-red-200 border-red-900': type === 'error',
'bg-zinc-600 border-zinc-800 bg-opacity-20': type === 'base',
'cursor-not-allowed opacity-75 pointer-events-none': disabled || loading
},
$$restProps.class

2
src/lib/components/forms/Input.svelte
View File

@@ -6,7 +6,7 @@
export let placeholder = '';
const baseStyles =
'appearance-none p-1 px-3 selectable border border-zinc-800 rounded-lg bg-zinc-600 bg-opacity-20 text-zinc-200';
'appearance-none p-1 px-3 selectable border border-zinc-800 rounded-lg bg-zinc-600 bg-opacity-20 text-zinc-200 placeholder:text-zinc-700';
</script>
<div class="relative">

13
src/lib/components/forms/Select.svelte
View File

@@ -4,18 +4,23 @@
export let value: any = '';
export let disabled = false;
export let loading = false;
</script>
<div
class={classNames('relative w-max min-w-[8rem]', {
'opacity-50': disabled
})}
class={classNames(
'relative w-max min-w-[8rem] h-min bg-zinc-600 bg-opacity-20 rounded-lg overflow-hidden',
{
'opacity-50': disabled,
'animate-pulse pointer-events-none': loading
}
)}
>
<select
on:change
bind:value
class={classNames(
'appearance-none p-1 pl-3 pr-8 selectable border border-zinc-800 rounded-lg bg-zinc-600 bg-opacity-20 w-full',
'relative appearance-none p-1 pl-3 pr-8 selectable border border-zinc-800 bg-transparent rounded-lg w-full z-[1]',
{
'cursor-not-allowed pointer-events-none': disabled
}