From c3f6b066dc2bff3bdc2f9d1146a9abaa9a17965d Mon Sep 17 00:00:00 2001
From: ComputelessComputer <john@hyprnote.com>
Date: Fri, 27 Mar 2026 20:15:03 -0700
Subject: [PATCH] fix: polish settings account and audio states

- remove the extra divider from the signed-out account section
- give the active audio device rows a subtle green treatment
---
 apps/desktop/src/settings/general/account.tsx |  2 +-
 apps/desktop/src/settings/general/audio.tsx   | 27 +++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/settings/general/account.tsx b/apps/desktop/src/settings/general/account.tsx
index a8c8481bf7..2ccd3c9e9d 100644
--- a/apps/desktop/src/settings/general/account.tsx
+++ b/apps/desktop/src/settings/general/account.tsx
@@ -144,7 +144,7 @@ export function SettingsAccount() {
 
     return (
       <div className="flex flex-col gap-8">
-        <section className="border-b border-neutral-200 pb-4">
+        <section className="pb-4">
           <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
             <div className="flex min-w-0 flex-1 flex-col gap-4">
               <h2 className="font-serif text-lg font-semibold">Account</h2>
diff --git a/apps/desktop/src/settings/general/audio.tsx b/apps/desktop/src/settings/general/audio.tsx
index 4f3db3ee86..fe59293530 100644
--- a/apps/desktop/src/settings/general/audio.tsx
+++ b/apps/desktop/src/settings/general/audio.tsx
@@ -162,16 +162,33 @@ function DeviceItem({
         "flex cursor-grab items-center gap-2 rounded-lg px-3 py-2 active:cursor-grabbing",
         "border transition-colors",
         isTop
-          ? "border-neutral-300 bg-neutral-100"
+          ? "border-green-200 bg-green-50"
           : "border-neutral-200 bg-neutral-50 hover:bg-neutral-100",
       ])}
     >
-      <GripVertical className="h-4 w-4 shrink-0 text-neutral-400" />
-      <span className="w-4 text-xs text-neutral-400">{rank}</span>
-      <span className={cn(["flex-1 truncate text-sm", isTop && "font-medium"])}>
+      <GripVertical
+        className={cn([
+          "h-4 w-4 shrink-0",
+          isTop ? "text-green-500" : "text-neutral-400",
+        ])}
+      />
+      <span
+        className={cn([
+          "w-4 text-xs",
+          isTop ? "text-green-500" : "text-neutral-400",
+        ])}
+      >
+        {rank}
+      </span>
+      <span
+        className={cn([
+          "flex-1 truncate text-sm",
+          isTop && "font-medium text-green-950",
+        ])}
+      >
         {device.name}
       </span>
-      {isTop && <span className="text-xs text-neutral-500">Active</span>}
+      {isTop && <span className="text-xs text-green-700">Active</span>}
     </Reorder.Item>
   );
 }