From a1342e4fda174249cc3f04315496a477ff0007c7 Mon Sep 17 00:00:00 2001
From: MaticIvesic <matic.ivesic@gmail.com>
Date: Sun, 2 Aug 2026 21:23:13 +0200
Subject: [PATCH] Dashboard polish: banner brand, borderless forms, fix sidebar
 clipping

- Use intelidom_banner.svg as the sidebar brand instead of text
- Remove borders from admin cards, inputs, user rows, login inputs and
  ghost buttons (subtle fills / focus outlines instead)
- Fix sidebar clipping: height:100vh + padding overflowed the viewport;
  add box-sizing:border-box (+ overflow-y safety), drop divider borders

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app.css                                   | 10 +++---
 src/routes/admin/(dashboard)/+layout.svelte   | 31 +++++++++++--------
 .../admin/(dashboard)/users/+page.svelte      |  1 -
 src/routes/admin/login/+page.svelte           |  7 ++++-
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/app.css b/src/app.css
index 180d75f..8fb6adf 100644
--- a/src/app.css
+++ b/src/app.css
@@ -40,7 +40,6 @@ body {
 }
 .admin-card {
     background: #11161a;
-    border: 1px solid rgba(229, 228, 234, 0.12);
     border-radius: 12px;
     padding: 1.4em;
     display: flex;
@@ -56,7 +55,7 @@ body {
 }
 .admin-input {
     background: #0a0d0f;
-    border: 1px solid rgba(229, 228, 234, 0.2);
+    border: none;
     border-radius: 8px;
     padding: 0.6em 0.7em;
     color: #e5e4ea;
@@ -65,6 +64,10 @@ body {
     width: 100%;
     box-sizing: border-box;
 }
+.admin-input:focus-visible {
+    outline: 2px solid rgba(66, 175, 56, 0.6);
+    outline-offset: 1px;
+}
 .admin-btn {
     background: #42af38;
     color: #06210a;
@@ -86,9 +89,8 @@ body {
     color: #fff;
 }
 .admin-btn-ghost {
-    background: transparent;
+    background: rgba(255, 255, 255, 0.08);
     color: #e5e4ea;
-    border: 1px solid rgba(229, 228, 234, 0.3);
 }
 .admin-msg {
     margin: 0;
diff --git a/src/routes/admin/(dashboard)/+layout.svelte b/src/routes/admin/(dashboard)/+layout.svelte
index 5764824..196be51 100644
--- a/src/routes/admin/(dashboard)/+layout.svelte
+++ b/src/routes/admin/(dashboard)/+layout.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/state';
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types';
+	import intelidom_banner from '$lib/assets/intelidom_banner.svg';
 
 	let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
@@ -23,7 +24,7 @@
 <div class="dash">
 	<aside class="sidebar">
 		<div class="brand">
-			<a href="/">InteliDom</a>
+			<a href="/"><img src={intelidom_banner} alt="InteliDom" /></a>
 			<span>Admin</span>
 		</div>
 
@@ -70,7 +71,7 @@
 
 	.sidebar {
 		background: #11161a;
-		border-bottom: 1px solid rgba(229, 228, 234, 0.1);
+		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
 		gap: 1em;
@@ -79,20 +80,25 @@
 
 	.brand {
 		display: flex;
-		align-items: baseline;
-		gap: 0.5em;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.25em;
 	}
 
 	.brand a {
-		color: #42af38;
-		font-weight: 700;
-		font-size: 1.2em;
-		text-decoration: none;
+		display: block;
+		line-height: 0;
+	}
+
+	.brand img {
+		width: 100%;
+		max-width: 150px;
+		display: block;
 	}
 
 	.brand span {
 		color: #9aa0a6;
-		font-size: 0.8em;
+		font-size: 0.75em;
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 	}
@@ -150,9 +156,9 @@
 	}
 
 	.logout {
-		background: transparent;
+		background: rgba(255, 255, 255, 0.08);
 		color: #e5e4ea;
-		border: 1px solid rgba(229, 228, 234, 0.3);
+		border: none;
 		border-radius: 8px;
 		padding: 0.5em 1em;
 		font-family: inherit;
@@ -179,11 +185,10 @@
 		.sidebar {
 			width: 220px;
 			flex-shrink: 0;
-			border-bottom: none;
-			border-right: 1px solid rgba(229, 228, 234, 0.1);
 			position: sticky;
 			top: 0;
 			height: 100vh;
+			overflow-y: auto;
 		}
 
 		nav {
diff --git a/src/routes/admin/(dashboard)/users/+page.svelte b/src/routes/admin/(dashboard)/users/+page.svelte
index 94f2723..d4447a7 100644
--- a/src/routes/admin/(dashboard)/users/+page.svelte
+++ b/src/routes/admin/(dashboard)/users/+page.svelte
@@ -120,7 +120,6 @@
 
 	.user-row {
 		background: #11161a;
-		border: 1px solid rgba(229, 228, 234, 0.12);
 		border-radius: 10px;
 		padding: 0.9em 1em;
 		display: flex;
diff --git a/src/routes/admin/login/+page.svelte b/src/routes/admin/login/+page.svelte
index 93b2cbd..15f69b3 100644
--- a/src/routes/admin/login/+page.svelte
+++ b/src/routes/admin/login/+page.svelte
@@ -74,7 +74,7 @@
 
 	input {
 		background: #0a0d0f;
-		border: 1px solid rgba(229, 228, 234, 0.2);
+		border: none;
 		border-radius: 8px;
 		padding: 0.6em 0.7em;
 		color: #e5e4ea;
@@ -82,6 +82,11 @@
 		font-size: 1em;
 	}
 
+	input:focus-visible {
+		outline: 2px solid rgba(66, 175, 56, 0.6);
+		outline-offset: 1px;
+	}
+
 	button {
 		background: #42af38;
 		color: #06210a;