From ffba95a411906b1a4a68fa1d6effa7f080199fff Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Wed, 25 Mar 2026 21:31:39 +0100
Subject: [PATCH] feat: ui tweaks

---
 app/components/ConfirmModal.vue |  2 +-
 app/components/LinkModal.vue    |  2 +-
 app/pages/dashboard.vue         | 12 ++++--------
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/components/ConfirmModal.vue b/app/components/ConfirmModal.vue
index f5f4e4b..5f79990 100644
--- a/app/components/ConfirmModal.vue
+++ b/app/components/ConfirmModal.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{ close: [confirmed: boolean] }>();
     <template #footer>
       <div class="flex gap-2 justify-end w-full">
         <UButton variant="ghost" color="neutral" @click="emit('close', false)">Cancel</UButton>
-        <UButton color="error" @click="emit('close', true)">Delete</UButton>
+        <UButton color="error" icon="i-lucide-trash-2" @click="emit('close', true)">Delete</UButton>
       </div>
     </template>
   </UModal>
diff --git a/app/components/LinkModal.vue b/app/components/LinkModal.vue
index 3bbb32e..ae631c6 100644
--- a/app/components/LinkModal.vue
+++ b/app/components/LinkModal.vue
@@ -73,7 +73,7 @@ const onSubmit = async (event: FormSubmitEvent<Schema>) => {
 
         <div class="flex justify-end gap-2 pt-2">
           <UButton variant="ghost" @click="emit('close', false)">Cancel</UButton>
-          <UButton type="submit" :loading="submitting">{{ link ? "Save" : "Create" }}</UButton>
+          <UButton type="submit" variant="subtle" :loading="submitting" :icon="link ? 'i-lucide-save' : 'i-lucide-plus'">{{ link ? "Save" : "Create" }}</UButton>
         </div>
       </UForm>
     </template>
diff --git a/app/pages/dashboard.vue b/app/pages/dashboard.vue
index 9e0b125..d94f3e5 100644
--- a/app/pages/dashboard.vue
+++ b/app/pages/dashboard.vue
@@ -54,9 +54,9 @@ const deleteLink = async (link: Link) => {
 
 <template>
   <UDashboardGroup>
-    <UDashboardSidebar :toggle="false">
+    <UDashboardSidebar :toggle="false" :ui="{ header: 'border-b border-default' }">
       <template #header>
-        <UDashboardNavbar title="pihka.al" :toggle="false" />
+        <span class="font-semibold text-highlighted text-lg">pihka.al</span>
       </template>
 
       <UNavigationMenu
@@ -88,9 +88,7 @@ const deleteLink = async (link: Link) => {
         class="px-2"
       />
       <template #footer>
-        <UButton variant="ghost" icon="i-lucide-log-out" block @click="signOut">
-          Sign out
-        </UButton>
+        <UButton variant="link" icon="i-lucide-log-out" block @click="signOut">Sign out</UButton>
       </template>
     </UDashboardSidebar>
 
@@ -98,9 +96,7 @@ const deleteLink = async (link: Link) => {
       <template #header>
         <UDashboardNavbar :title="category === 'all' ? 'All links' : category === 'active' ? 'Active links' : 'Disabled links'">
           <template #right>
-            <UButton icon="i-lucide-plus" @click="openModal(null)">
-              New link
-            </UButton>
+            <UButton icon="i-lucide-plus" variant="subtle" @click="openModal(null)">New link</UButton>
           </template>
         </UDashboardNavbar>
       </template>