From 2a99f910992940b70b87d00a2afa10b85be2e294 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Fri, 24 Jul 2026 23:50:40 +0800
Subject: [PATCH] fix(ui): refine dark toolbar controls

---
 apps/desktop/src/components/grid/DataGrid.vue        | 2 +-
 apps/desktop/src/components/layout/EditorToolbar.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 970b11f77..343c3efe3 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -7615,7 +7615,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
             <div class="data-grid-topbar flex items-stretch relative" :class="{ 'data-grid-topbar--compact': compactDataGridToolbar }">
               <div v-if="useTransaction && editable && hasDataGridSaveTarget" class="flex items-center px-2 py-0.5 border-r shrink-0">
                 <Select :model-value="rowStatusFilter" @update:model-value="(value: any) => setRowStatusFilter(String(value))">
-                  <SelectTrigger class="h-5 max-w-28 border-0 bg-transparent px-0 py-0 text-xs font-medium text-foreground/70 shadow-none focus-visible:ring-0 data-[state=open]:text-foreground [&_svg]:size-3">
+                  <SelectTrigger class="h-5 max-w-28 border-0 bg-transparent px-0 py-0 text-xs font-medium text-foreground/70 shadow-none focus-visible:ring-0 data-[state=open]:text-foreground dark:bg-transparent dark:hover:bg-transparent [&_svg]:size-3">
                     <SelectValue :placeholder="t('grid.filterRows')" />
                   </SelectTrigger>
                   <SelectContent position="popper">
diff --git a/apps/desktop/src/components/layout/EditorToolbar.vue b/apps/desktop/src/components/layout/EditorToolbar.vue
index 21fe1a229..e0979369b 100644
--- a/apps/desktop/src/components/layout/EditorToolbar.vue
+++ b/apps/desktop/src/components/layout/EditorToolbar.vue
@@ -218,11 +218,11 @@ function databaseOptionIsProduction(database: string): boolean {
             variant="ghost"
             size="icon"
             class="h-6 w-6"
-            :class="isTransactionActive || autoCommit === false ? 'text-orange-600 bg-orange-100 dark:text-orange-300 dark:bg-orange-900/30' : 'text-muted-foreground/50'"
+            :class="isTransactionActive || autoCommit === false ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-300' : 'text-orange-600/70 hover:bg-orange-500/10 hover:text-orange-700 dark:text-orange-300/70 dark:hover:text-orange-200'"
             :disabled="activeTab.isExecuting || activeTab.isExplaining"
             @click="emit('update:autoCommit', autoCommit === false)"
           >
-            <span class="font-bold" style="font-size: 9px">Tx</span>
+            <span class="text-xs font-bold leading-none">Tx</span>
           </Button>
         </TooltipTrigger>
         <TooltipContent>{{ transactionTooltip }}</TooltipContent>
@@ -267,8 +267,8 @@ function databaseOptionIsProduction(database: string): boolean {
           <Button
             variant="ghost"
             size="icon"
-            class="h-6 w-6 font-mono text-[11px] leading-none"
-            :class="keywordCaseIsLower ? 'bg-amber-500/10 text-amber-700 hover:bg-amber-500/20 hover:text-amber-800 dark:text-amber-300 dark:hover:text-amber-200' : 'text-muted-foreground hover:bg-muted hover:text-foreground'"
+            class="h-6 w-6 font-mono text-sm font-semibold leading-none"
+            :class="keywordCaseIsLower ? 'bg-amber-500/10 text-amber-700 hover:bg-amber-500/20 hover:text-amber-800 dark:text-amber-300 dark:hover:text-amber-200' : 'text-amber-600/70 hover:bg-amber-500/10 hover:text-amber-700 dark:text-amber-300/70 dark:hover:text-amber-200'"
             :aria-label="keywordCaseToggleTooltip"
             @click="emit('toggleSqlKeywordCase')"
           >