From e307d667da12adabcc84208e7fac21ab3a3f9960 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 15 Mar 2025 16:09:14 +0800
Subject: [PATCH] style(stage-web|stage-tamagotchi): better settings for
 ElevenLabs

---
 .../pages/settings/providers/elevenlabs.vue   | 150 ++++++++++--------
 .../pages/settings/providers/elevenlabs.vue   | 150 ++++++++++--------
 .../src/components/Form/Range/Range.vue       |   2 +-
 3 files changed, 171 insertions(+), 131 deletions(-)

diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
index 035812706..780c9da1c 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
@@ -195,20 +195,22 @@ onUnmounted(() => {
             </div>
           </div>
           <div max-w-full>
-            <label grid="~ cols-2 gap-4">
+            <label flex="~ col gap-4">
               <div>
                 <div class="flex items-center gap-1 text-sm font-medium">
                   API Key
                   <span class="text-red-500">*</span>
                 </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400" text-nowrap>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
                   API Key for {{ providerMetadata?.localizedName }}
                 </div>
               </div>
               <input
                 v-model="apiKey" type="password"
-                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out"
+                w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+                bg="neutral-200 dark:neutral-800"
                 placeholder="..."
               >
             </label>
@@ -220,79 +222,89 @@ onUnmounted(() => {
         <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
           Voice Settings
         </h2>
-        <div flex="~ col gap-6">
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Similarity Boost
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Voice similarity adherence
+        <div flex="~ col gap-4">
+          <label flex="~ col gap-2">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Similarity Boost
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Voice similarity adherence
+                </div>
               </div>
+              <span font-mono>{{ similarityBoost.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="similarityBoost" :min="0" :max="1" :step="0.01" w-full />
-              <span class="text-xs">{{ similarityBoost.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Stability
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Voice stability and randomness
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Stability
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Voice stability and randomness
+                </div>
               </div>
+              <span font-mono>{{ stability.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="stability" :min="0" :max="1" :step="0.01" w-full />
-              <span class="text-xs">{{ stability.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Speed
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Speech generation speed
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Speed
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Speech generation speed
+                </div>
               </div>
+              <span font-mono>{{ speed.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="speed" :min="0.7" :max="1.2" :step="0.01" w-full />
-              <span class="text-xs">{{ speed.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Style
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Voice style exaggeration
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Style
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Voice style exaggeration
+                </div>
               </div>
+              <span font-mono>{{ style.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="style" :min="0" :max="1" :step="0.01" w-full />
-              <span class="text-xs">{{ style.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Speaker Boost
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Enhance speaker similarity
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Speaker Boost
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Enhance speaker similarity
+                </div>
               </div>
+              <span font-mono>{{ useSpeakerBoost ? 'On' : 'Off' }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <input v-model="useSpeakerBoost" type="checkbox">
-              <span class="text-xs">{{ useSpeakerBoost ? 'Enabled' : 'Disabled' }}</span>
             </div>
           </label>
         </div>
@@ -315,27 +327,30 @@ onUnmounted(() => {
             </button>
           </template>
           <div mt-4>
-            <label grid="~ cols-2 gap-4">
+            <label flex="~ col gap-4">
               <div>
                 <div class="flex items-center gap-1 text-sm font-medium">
                   Base URL
-                </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  <span class="text-red-500">*</span>
+                </div>Base URL
+                <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
                   Custom base URL (optional)
                 </div>
               </div>
               <input
-                v-model="baseUrl" type="text"
-                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                v-model="apiKey" type="password"
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out"
+                w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+                bg="neutral-200 dark:neutral-800"
                 :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
               >
             </label>
 
             <div mt-4>
               <button
-                border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
-                py-2 text-sm @click="speechStore.resetVoiceSettings"
+                border="neutral-300 dark:neutral-800 solid 1" transition="border duration-250 ease-in-out" rounded
+                px-4 py-2 text-sm @click="speechStore.resetVoiceSettings"
               >
                 Reset Voice Settings
               </button>
@@ -352,8 +367,10 @@ onUnmounted(() => {
         <div flex="~ col gap-4">
           <textarea
             v-model="testText" placeholder="Enter text to test the voice..."
-            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-            transition="border duration-250 ease-in-out" h-24 w-full rounded px-3 py-2 text-sm outline-none
+            border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+            transition="border duration-250 ease-in-out"
+            h-24 w-full rounded-lg px-3 py-2 text-sm outline-none
+            bg="neutral-200 dark:neutral-800"
           />
           <div flex="~ col gap-6">
             <label grid="~ cols-2 gap-4">
@@ -361,14 +378,14 @@ onUnmounted(() => {
                 <div class="flex items-center gap-1 text-sm font-medium">
                   Language
                 </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
                   Select voice language
                 </div>
               </div>
               <select
                 v-model="selectedLanguage"
-                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out" w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
               >
                 <option v-for="language in speechStore.availableLanguages" :key="language" :value="language">
                   {{ language }}
@@ -381,13 +398,14 @@ onUnmounted(() => {
                 <div class="flex items-center gap-1 text-sm font-medium">
                   Voice
                 </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
                   Select preferred voice
                 </div>
               </div>
               <select
-                v-model="selectedVoice" border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                v-model="selectedVoice"
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out" w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
               >
                 <option v-for="voice in availableVoices" :key="voice.id" :value="voice.name">
                   {{ voice.name }}
@@ -397,10 +415,12 @@ onUnmounted(() => {
           </div>
           <div flex="~ row" gap-4>
             <button
-              border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
+              border="neutral-800 dark:neutral-200 solid 2"
+              transition="border duration-250 ease-in-out" rounded-lg px-4
+              text="neutral-100 dark:neutral-900"
               py-2 text-sm :disabled="isGenerating || !testText.trim() || !apiKey"
               :class="{ 'opacity-50 cursor-not-allowed': isGenerating || !testText.trim() || !apiKey }"
-              @click="generateTestSpeech"
+              bg="neutral-700 dark:neutral-300" @click="generateTestSpeech"
             >
               <div flex="~ row" items-center gap-2>
                 <div i-solar:play-circle-bold-duotone />
@@ -408,8 +428,8 @@ onUnmounted(() => {
               </div>
             </button>
             <button
-              v-if="audioUrl" border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out"
-              rounded px-4 py-2 text-sm @click="stopTestAudio"
+              v-if="audioUrl" border="primary-300 dark:primary-800 solid 2"
+              transition="border duration-250 ease-in-out" rounded-lg px-4 py-2 text-sm @click="stopTestAudio"
             >
               <div flex="~ row" items-center gap-2>
                 <div i-solar:stop-circle-bold-duotone />
diff --git a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
index 035812706..780c9da1c 100644
--- a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
@@ -195,20 +195,22 @@ onUnmounted(() => {
             </div>
           </div>
           <div max-w-full>
-            <label grid="~ cols-2 gap-4">
+            <label flex="~ col gap-4">
               <div>
                 <div class="flex items-center gap-1 text-sm font-medium">
                   API Key
                   <span class="text-red-500">*</span>
                 </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400" text-nowrap>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
                   API Key for {{ providerMetadata?.localizedName }}
                 </div>
               </div>
               <input
                 v-model="apiKey" type="password"
-                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out"
+                w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+                bg="neutral-200 dark:neutral-800"
                 placeholder="..."
               >
             </label>
@@ -220,79 +222,89 @@ onUnmounted(() => {
         <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
           Voice Settings
         </h2>
-        <div flex="~ col gap-6">
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Similarity Boost
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Voice similarity adherence
+        <div flex="~ col gap-4">
+          <label flex="~ col gap-2">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Similarity Boost
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Voice similarity adherence
+                </div>
               </div>
+              <span font-mono>{{ similarityBoost.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="similarityBoost" :min="0" :max="1" :step="0.01" w-full />
-              <span class="text-xs">{{ similarityBoost.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Stability
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Voice stability and randomness
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Stability
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Voice stability and randomness
+                </div>
               </div>
+              <span font-mono>{{ stability.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="stability" :min="0" :max="1" :step="0.01" w-full />
-              <span class="text-xs">{{ stability.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Speed
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Speech generation speed
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Speed
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Speech generation speed
+                </div>
               </div>
+              <span font-mono>{{ speed.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="speed" :min="0.7" :max="1.2" :step="0.01" w-full />
-              <span class="text-xs">{{ speed.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Style
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Voice style exaggeration
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Style
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Voice style exaggeration
+                </div>
               </div>
+              <span font-mono>{{ style.toFixed(2) }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <Range v-model="style" :min="0" :max="1" :step="0.01" w-full />
-              <span class="text-xs">{{ style.toFixed(2) }}</span>
             </div>
           </label>
 
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                Speaker Boost
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Enhance speaker similarity
+          <label flex="~ col gap-4">
+            <div flex="~ row" items-center gap-2>
+              <div flex="1">
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Speaker Boost
+                </div>
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
+                  Enhance speaker similarity
+                </div>
               </div>
+              <span font-mono>{{ useSpeakerBoost ? 'On' : 'Off' }}</span>
             </div>
             <div flex="~ row" items-center gap-2>
               <input v-model="useSpeakerBoost" type="checkbox">
-              <span class="text-xs">{{ useSpeakerBoost ? 'Enabled' : 'Disabled' }}</span>
             </div>
           </label>
         </div>
@@ -315,27 +327,30 @@ onUnmounted(() => {
             </button>
           </template>
           <div mt-4>
-            <label grid="~ cols-2 gap-4">
+            <label flex="~ col gap-4">
               <div>
                 <div class="flex items-center gap-1 text-sm font-medium">
                   Base URL
-                </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  <span class="text-red-500">*</span>
+                </div>Base URL
+                <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
                   Custom base URL (optional)
                 </div>
               </div>
               <input
-                v-model="baseUrl" type="text"
-                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                v-model="apiKey" type="password"
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out"
+                w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+                bg="neutral-200 dark:neutral-800"
                 :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
               >
             </label>
 
             <div mt-4>
               <button
-                border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
-                py-2 text-sm @click="speechStore.resetVoiceSettings"
+                border="neutral-300 dark:neutral-800 solid 1" transition="border duration-250 ease-in-out" rounded
+                px-4 py-2 text-sm @click="speechStore.resetVoiceSettings"
               >
                 Reset Voice Settings
               </button>
@@ -352,8 +367,10 @@ onUnmounted(() => {
         <div flex="~ col gap-4">
           <textarea
             v-model="testText" placeholder="Enter text to test the voice..."
-            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-            transition="border duration-250 ease-in-out" h-24 w-full rounded px-3 py-2 text-sm outline-none
+            border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+            transition="border duration-250 ease-in-out"
+            h-24 w-full rounded-lg px-3 py-2 text-sm outline-none
+            bg="neutral-200 dark:neutral-800"
           />
           <div flex="~ col gap-6">
             <label grid="~ cols-2 gap-4">
@@ -361,14 +378,14 @@ onUnmounted(() => {
                 <div class="flex items-center gap-1 text-sm font-medium">
                   Language
                 </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
                   Select voice language
                 </div>
               </div>
               <select
                 v-model="selectedLanguage"
-                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out" w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
               >
                 <option v-for="language in speechStore.availableLanguages" :key="language" :value="language">
                   {{ language }}
@@ -381,13 +398,14 @@ onUnmounted(() => {
                 <div class="flex items-center gap-1 text-sm font-medium">
                   Voice
                 </div>
-                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                <div class="text-xs text-neutral-500 dark:text-neutral-400">
                   Select preferred voice
                 </div>
               </div>
               <select
-                v-model="selectedVoice" border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                v-model="selectedVoice"
+                border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+                transition="border duration-250 ease-in-out" w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
               >
                 <option v-for="voice in availableVoices" :key="voice.id" :value="voice.name">
                   {{ voice.name }}
@@ -397,10 +415,12 @@ onUnmounted(() => {
           </div>
           <div flex="~ row" gap-4>
             <button
-              border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
+              border="neutral-800 dark:neutral-200 solid 2"
+              transition="border duration-250 ease-in-out" rounded-lg px-4
+              text="neutral-100 dark:neutral-900"
               py-2 text-sm :disabled="isGenerating || !testText.trim() || !apiKey"
               :class="{ 'opacity-50 cursor-not-allowed': isGenerating || !testText.trim() || !apiKey }"
-              @click="generateTestSpeech"
+              bg="neutral-700 dark:neutral-300" @click="generateTestSpeech"
             >
               <div flex="~ row" items-center gap-2>
                 <div i-solar:play-circle-bold-duotone />
@@ -408,8 +428,8 @@ onUnmounted(() => {
               </div>
             </button>
             <button
-              v-if="audioUrl" border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out"
-              rounded px-4 py-2 text-sm @click="stopTestAudio"
+              v-if="audioUrl" border="primary-300 dark:primary-800 solid 2"
+              transition="border duration-250 ease-in-out" rounded-lg px-4 py-2 text-sm @click="stopTestAudio"
             >
               <div flex="~ row" items-center gap-2>
                 <div i-solar:stop-circle-bold-duotone />
diff --git a/packages/stage-ui/src/components/Form/Range/Range.vue b/packages/stage-ui/src/components/Form/Range/Range.vue
index 47a3a4b7c..9e83c8514 100644
--- a/packages/stage-ui/src/components/Form/Range/Range.vue
+++ b/packages/stage-ui/src/components/Form/Range/Range.vue
@@ -175,7 +175,7 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 .data-gui-range.slider-progress::-webkit-slider-runnable-track {
-  margin-left: var(--track-value-padding);
+  /* margin-left: var(--track-value-padding); */
   margin-right: calc(0 - var(--track-value-padding));
   background:
     linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,