fix(web): tail of loading icon in button

ItsNotGoodName · Apr 29, 2022 · 8a95916 · 8a95916
1 parent ac91e63
commit 8a95916
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/left/web/src/App.vue b/left/web/src/App.vue
@@ -98,15 +98,15 @@ const refresh = () => {
         <div class="grow flex gap-2">
           <hamburger-menu :page="page" :set-page="setPage" />
           <div class="grow flex">
-            <radios-discover class="btn-primary w-12 rounded-none rounded-l-md" />
+            <radios-discover class="btn-primary w-14 rounded-none rounded-l-md" />
             <select v-model="radioUUID" :disabled="radiosLoading" class="grow select select-primary rounded-none">
               <option disabled selected value="">Select Radio</option>
               <template v-if="radios">
                 <option :key="r.uuid" v-for="r in radios" :value="r.uuid">{{ r.name }}</option>
               </template>
             </select>
             <div class="tooltip" data-tip="Refresh">
-              <d-button class="btn-primary w-12 rounded-none rounded-r-md" aria-label="Refresh" :loading="refreshing"
+              <d-button class="btn-primary w-14 rounded-none rounded-r-md" aria-label="Refresh" :loading="refreshing"
                 @click="refresh">
                 <v-icon name="fa-redo" />
               </d-button>

diff --git a/left/web/src/components/RadioPower.vue b/left/web/src/components/RadioPower.vue
@@ -14,11 +14,11 @@ const { mutate, isLoading } = useRadioMutation()
 </script>
 
 <template>
-  <d-button v-if="radio.power" class="btn-success w-12" aria-label="Powered ON" :loading="isLoading"
+  <d-button v-if="radio.power" class="btn-success w-14" aria-label="Powered ON" :loading="isLoading"
     @click="() => mutate({ uuid: radio.uuid, power: false })">
     <v-icon name="fa-power-off" />
   </d-button>
-  <d-button v-else class="btn-error w-12" aria-label="Powered OFF" :loading="isLoading"
+  <d-button v-else class="btn-error w-14" aria-label="Powered OFF" :loading="isLoading"
     @click="() => mutate({ uuid: radio.uuid, power: true })">
     <v-icon name="fa-power-off" />
   </d-button>

diff --git a/left/web/src/components/RadioVolume.vue b/left/web/src/components/RadioVolume.vue
@@ -16,14 +16,14 @@ const { mutate: refreshVolume, isLoading: refreshVolumeLoading } = useRadioVolum
 
 <template>
   <div v-if="!radio.is_muted" class="btn-group">
-    <d-button class="btn-info w-12" aria-label="Volume Down" :loading="isLoading"
+    <d-button class="btn-info w-14" aria-label="Volume Down" :loading="isLoading"
       @click="mutate({ uuid: radio.uuid, volume: radio.volume - 5 })">
       <v-icon name="fa-volume-down" />
     </d-button>
-    <d-button class="btn-info px-0 w-10" :loading="refreshVolumeLoading" @click="() => refreshVolume(radio.uuid)">
+    <d-button class="btn-info px-0 w-12" :loading="refreshVolumeLoading" @click="() => refreshVolume(radio.uuid)">
       {{ radio.volume }}%
     </d-button>
-    <d-button class="btn-info w-12" aria-label="Volume Up" :loading="isLoading"
+    <d-button class="btn-info w-14" aria-label="Volume Up" :loading="isLoading"
       @click="mutate({ uuid: radio.uuid, volume: radio.volume + 5 })">
       <v-icon name="fa-volume-up" />
     </d-button>