💄 - redesigned form and updated color pallete

Devaunch · Mar 31, 2024 · 7a18dbf · 7a18dbf
1 parent 2e747b3
commit 7a18dbf
Show file tree

Hide file tree

Showing 15 changed files with 342 additions and 288 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@internationalized/date": "^3.5.2",
 		"@neondatabase/serverless": "^0.9.0",
 		"@prisma/adapter-neon": "^5.11.0",
 		"@prisma/client": "5.11.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.css b/src/app.css
@@ -12,13 +12,21 @@ body {
 .field input:valid ~ label,
 .field input:focus ~ label {
 	transform: translateY(-50%);
-	font-size: 15px;
-	color: #fff;
+	font-size: 0.9rem;
 }
 
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
 	transition: all 1000000s ease-in-out 0s;
+}
+
+::-webkit-scrollbar {
+	background-color: theme(colors.slate.800);
+	width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: theme(colors.slate.700);
 }
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="text-dark bg-dark">
+	<body data-sveltekit-preload-data="hover" class="text-white bg-slate-900">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/assets/logo.webp b/src/lib/assets/logo.webp
diff --git a/src/lib/components/LoadingBar.svelte b/src/lib/components/LoadingBar.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <div
-	class="absolute top-0 left-0 bg-primary-light dark:bg-primary-dark h-1 z-50"
+	class="absolute top-0 left-0 bg-primary-500 h-0.5 z-50"
 	style="width: {$styles}%;"
 	bind:this={div}
 />
diff --git a/src/lib/components/VisuallyHidden.svelte b/src/lib/components/VisuallyHidden.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { dev } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	let forceShow = false;
+
+	if (dev) {
+		const shortcut = 'Alt';
+		const handleKeyDown = (ev: KeyboardEvent) => {
+			if (ev.key === shortcut) {
+				forceShow = true;
+			}
+		};
+		const handleKeyUp = (ev: KeyboardEvent) => {
+			if (ev.key === shortcut) {
+				forceShow = false;
+			}
+		};
+
+		onMount(() => {
+			window.addEventListener('keydown', handleKeyDown);
+			window.addEventListener('keyup', handleKeyUp);
+
+			return () => {
+				window.removeEventListener('keydown', handleKeyDown);
+				window.removeEventListener('keyup', handleKeyUp);
+			};
+		});
+	}
+</script>
+
+{#if forceShow}
+	<slot />
+{:else}
+	<span {...$$restProps}>
+		<slot />
+	</span>
+{/if}
+
+<style>
+	span {
+		display: inline-block;
+		position: absolute;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		height: 1px;
+		width: 1px;
+		margin: -1px;
+		padding: 0;
+		border: 0;
+	}
+</style>
diff --git a/src/lib/components/ui/Field/DateField.svelte b/src/lib/components/ui/Field/DateField.svelte