fix(ui): refine dark toolbar controls

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')"
           >