From 146bae82cb584c253a42ed4565d423d9cded93a6 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 6 Nov 2025 06:24:39 -0600
Subject: [PATCH] fix(desktop): button styles

---
 packages/desktop/src/pages/layout.tsx | 9 +++------
 packages/ui/src/components/button.css | 8 +++-----
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index 1d966960..85f55e8b 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -3,7 +3,6 @@ import { createMemo, For, ParentProps, Show } from "solid-js"
 import { getFilename } from "@/utils"
 import { DateTime } from "luxon"
 import { useSync } from "@/context/sync"
-import { VList } from "virtua/solid"
 import { A, useParams } from "@solidjs/router"
 
 export default function Layout(props: ParentProps) {
@@ -19,11 +18,9 @@ export default function Layout(props: ParentProps) {
             <span class="text-14-regular overflow-hidden text-ellipsis">{getFilename(sync.data.path.directory)}</span>
           </div>
           <div class="flex flex-col items-start gap-4 self-stretch flex-1 py-4 px-3 overflow-hidden">
-            <A href="/session" class="w-full">
-              <Button class="w-full" size="large" icon="edit-small-2">
-                New Session
-              </Button>
-            </A>
+            <Button as={A} href="/session" class="w-full" size="large" icon="edit-small-2">
+              New Session
+            </Button>
             <div class="w-full h-full overflow-y-auto no-scrollbar flex flex-col flex-1">
               <nav class="w-full">
                 <For each={sync.data.session}>
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 112d648e..f5a08067 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -62,15 +62,13 @@
     color: var(--text-strong);
 
     &:hover:not(:disabled) {
-      background-color: var(--surface-hover);
+      background-color: var(--button-ghost-hover);
     }
     &:active:not(:disabled) {
-      border-color: var(--border-active);
-      background-color: var(--surface-active);
+      background-color: var(--button-ghost-hover-2);
     }
     &:focus:not(:disabled) {
-      border-color: var(--border-focus);
-      background-color: var(--surface-focus);
+      background-color: var(--button-ghost-hover);
     }
   }