feat: ui tweaks

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>

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>

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>