feat: look nice

2025-10-21 13:16:22 +02:00
parent 4c7ba04cbb
commit c90030075c
7 changed files with 48 additions and 42 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -7,16 +7,16 @@
@custom-variant dark (&:where(.dark, .dark *));

@theme {
-	--color-primary-50: #fff5f2;
-	--color-primary-100: #fff1ee;
-	--color-primary-200: #ffe4de;
-	--color-primary-300: #ffd5cc;
-	--color-primary-400: #ffbcad;
-	--color-primary-500: #fe795d;
-	--color-primary-600: #ef562f;
-	--color-primary-700: #eb4f27;
-	--color-primary-800: #cc4522;
-	--color-primary-900: #a5371b;
+	--color-primary-50: #f0f4f7;
+	--color-primary-100: #dfe4e9;
+	--color-primary-200: #acb4bd;
+	--color-primary-300: #828e9a;
+	--color-primary-400: #596978;
+	--color-primary-500: #46596b;
+	--color-primary-600: #2f4356;
+	--color-primary-700: #263645;
+	--color-primary-800: #1c2834;
+	--color-primary-900: #131b22;

 	--color-secondary-50: #f0f9ff;
 	--color-secondary-100: #e0f2fe;
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
--- a/src/lib/artefact.remote.ts
+++ b/src/lib/artefact.remote.ts
@@ -13,10 +13,10 @@ export const getArtefacts = query(
 		if (tags.length == 0) return a;

 		return a.filter((a) => {
-			for (const tag of a.tags) {
-				if (tags.includes(tag)) return true;
+			for (const tag of tags) {
+				if (!a.tags.includes(tag)) return false;
 			}
-			return false;
+			return true;
 		});
 	}
 );
--- a/src/lib/components/Artefact.svelte
+++ b/src/lib/components/Artefact.svelte
@@ -25,15 +25,15 @@
 	function getStatusColor(status: Status): string {
 		switch (status) {
 			case 'Fehlt':
-				return 'bg-red-500'; // Missing
+				return 'bg-red-600 text-white'; // Missing
 			case 'In Bearbeitung':
-				return 'bg-yellow-400'; // In progress
+				return 'bg-yellow-400 text-black'; // In progress
 			case 'Erledigt':
-				return 'bg-green-500'; // Done
+				return 'bg-green-600 text-white'; // Done
 			case 'Geprüft':
-				return 'bg-green-800'; // Checked
+				return 'bg-green-800 text-white'; // Checked
 			default:
-				return 'bg-red-500'; // Fallback
+				return 'bg-red-500 text-white'; // Fallback
 		}
 	}
 	function tagParts(tag: string): string[] {
@@ -45,8 +45,8 @@
 	}
 </script>

-<Card class="grid min-w-full grid-cols-2 gap-5 p-5">
-	<h1 class="col-span-2 break-words hyphens-auto">{artefact.title}</h1>
+<Card class="flex min-w-full flex-col justify-start gap-5 p-5">
+	<h3 class="col-span-2 break-words hyphens-auto">{artefact.title}</h3>
 	<div class="col-span-2 flex flex-wrap items-start justify-start">
 		{#each artefact.tags as tag}
 			<button
@@ -76,14 +76,16 @@
 			{/await}
 		{/each}
 	</div>
-	<p class="col-span-2 my-5">{artefact.description}</p>
+	<p class="col-span-2 grow-1">{artefact.description}</p>

+	<div class=" grid w-full grid-cols-2 gap-5 self-end">
 		<p
-		class={`flex items-center justify-center rounded-3xl p-2 text-white ${getStatusColor(artefact.status)}`}
+			class={`flex items-center justify-center rounded-lg p-2  ${getStatusColor(artefact.status)}`}
 		>
 			{artefact.status}
 		</p>
 		<Button onclick={() => (edit = true)}>Edit</Button>
+	</div>
 </Card>

 <Modal bind:open={edit}>
--- a/src/lib/components/ArtefactsView.svelte
+++ b/src/lib/components/ArtefactsView.svelte
@@ -2,7 +2,7 @@
 	import { getArtefacts } from '$lib/artefact.remote';
 	import Artefact from '$lib/components/Artefact.svelte';
 	import { Button, Input } from 'flowbite-svelte';
-	import { TrashBinOutline } from 'flowbite-svelte-icons';
+	import { PlusOutline, TrashBinOutline } from 'flowbite-svelte-icons';

 	let { view }: { view: string } = $props();

@@ -17,7 +17,7 @@
 			color="red"
 			onclick={() => {
 				tags = tags.filter((t) => t != tag);
-			}}><TrashBinOutline /></Button
+			}}><TrashBinOutline class="size-10" /></Button
 		>
 	{/each}
 	<Input class="col-span-4" bind:value={newTag}></Input>
@@ -25,7 +25,7 @@
 		onclick={() => {
 			tags.push(newTag);
 			newTag = '';
-		}}>+</Button
+		}}><PlusOutline /></Button
 	>
 </div>

--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,15 +2,18 @@
 	import { views } from '$lib/artefact';
 	import { state } from '$lib/view.svelte';
 	import '../app.css';
-	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Select } from 'flowbite-svelte';
+	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Select, Label } from 'flowbite-svelte';
 	let { children } = $props();

 	$inspect(state.view);
 </script>

-<!-- <svelte:head>Repo Mod</svelte:head> -->
+<svelte:head>
+	<title>Repo Mod</title>
+	<meta name="description" content="This is where the description goes for SEO" />
+</svelte:head>

-<Navbar>
+<Navbar class="shadow">
 	<NavBrand href="/">
 		<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Repo Mod</span
 		>
@@ -29,7 +32,7 @@
 			}))}
 		/>

-		<!-- 	<NavLi href="/">Home</NavLi> -->
+		<NavLi href="/">Projekte</NavLi>
 		<!-- 	<NavLi href="/about">About</NavLi> -->
 		<!-- 	<NavLi href="/docs/components/navbar">Navbar</NavLi> -->
 		<!-- 	<NavLi href="/pricing">Pricing</NavLi> -->
@@ -37,6 +40,6 @@
 	</NavUl>
 </Navbar>

-<main class="mx-10 mt-5 xl:mx-44">
+<main class="mx-10 mt-5 mb-5 xl:mx-44">
 	{@render children?.()}
 </main>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,13 +5,14 @@

 <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
 	{#each state.projects as project (project.uuid)}
-		<Card class="flex min-w-full flex-col  gap-5 p-5">
+		<Card class="flex min-w-full flex-col  justify-between gap-5 p-5">
 			<h1 class="col-span-2 break-words hyphens-auto">{project.name}</h1>
-
+			<div class="flex flex-col justify-between gap-5">
 				<p class={`flex items-center justify-center rounded-3xl p-2 `}>
 					{project.status}%
 				</p>
 				<Button href={`/project/${project.uuid}`}>Edit</Button>
+			</div>
 		</Card>
 	{/each}
 </div>