another stage of client authentication

components/Header.vue

@@ -1,43 +1,42 @@
 <template>
   <div
     @mousedown="() => window.startDragging()"
-    class="cursor-pointer bg-gray-950 flex flex-row pl-4 pr-2 py-2"
+    class="h-10 cursor-pointer bg-gray-950 flex flex-row justify-between"
   >
-    <div class="grow inline-flex items-center gap-x-10">
-      <Wordmark class="h-8 mb-1" />
-      <nav class="inline-flex items-center">
-        <ol class="inline-flex items-center gap-x-6">
-          <li
-            class="transition text-gray-300 hover:text-gray-100 uppercase font-display font-semibold text-md"
-            v-for="(nav, navIdx) in navigation"
-          >
-            {{ nav.label }}
+    <div class="flex flex-row grow items-center justify-between px-2 py-3">
+      <div class="inline-flex items-center gap-x-10">
+        <Wordmark class="h-8 mb-0.5" />
+        <nav class="inline-flex items-center mt-0.5">
+          <ol class="inline-flex items-center gap-x-6">
+            <li
+              class="transition text-gray-300 hover:text-gray-100 uppercase font-display font-semibold text-md"
+              v-for="(nav, navIdx) in navigation"
+            >
+              {{ nav.label }}
+            </li>
+          </ol>
+        </nav>
+      </div>
+      <div class="inline-flex items-center">
+        <ol class="inline-flex gap-3">
+          <li v-for="(item, itemIdx) in quickActions">
+            <HeaderWidget
+              @click="item.action"
+              :notifications="item.notifications"
+            >
+              <component class="h-5" :is="item.icon" />
+            </HeaderWidget>
           </li>
+          <HeaderUserWidget />
         </ol>
-      </nav>
-    </div>
-    <div class="inline-flex items-center">
-      <ol class="inline-flex gap-3">
-        <li v-for="(item, itemIdx) in quickActions">
-          <HeaderWidget
-            @click="item.action"
-            :notifications="item.notifications"
-          >
-            <component class="h-5" :is="item.icon" />
-          </HeaderWidget>
-        </li>
-        <HeaderUserWidget />
-      </ol>
-      <WindowControl class="ml-3" />
+      </div>
     </div>
+    <WindowControl />
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  BellIcon,
-  UserGroupIcon,
-} from "@heroicons/vue/16/solid";
+import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
 import type { NavigationItem, QuickActionNav } from "./types";
 import HeaderWidget from "./HeaderWidget.vue";
 import { getCurrentWindow } from "@tauri-apps/api/window";

components/HeaderButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <button class="transition h-full aspect-square text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100">
+    <button class="transition h-10 w-10 text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100 p-2">
         <slot />
     </button>
 </template>

components/HeaderWidget.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="transition inline-flex items-center cursor-pointer rounded-sm px-4 py-2 bg-zinc-900 text-zinc-600 hover:bg-zinc-800 hover:text-zinc-300 relative">
+    <div class="transition inline-flex items-center cursor-pointer rounded-sm px-4 py-1.5 bg-zinc-900 text-zinc-600 hover:bg-zinc-800 hover:text-zinc-300 relative">
         <slot />
         <div v-if="props.notifications !== undefined"
             class="text-zinc-900 absolute top-0 right-0 translate-x-[30%] translate-y-[-30%] text-xs bg-blue-300 rounded-full w-3.5 h-3.5 text-center">

components/MiniHeader.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     @mousedown="() => window.startDragging()"
-    class="cursor-pointer flex flex-row items-center justify-between bg-zinc-950 px-3 py-2"
+    class="h-10 cursor-pointer flex flex-row items-center justify-between bg-zinc-950"
   >
-    <div>
-      <Wordmark />
+    <div class="px-5 py-3">
+      <Wordmark class="mt-1" />
     </div>
     <WindowControl />
   </div>

components/WindowControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex items-center h-6 gap-x-2">
+  <div class="inline-flex items-center gap-x-2">
     <HeaderButton @click="() => window.minimize()">
       <MinusIcon />
     </HeaderButton>