better on new version popup

public/assets/loading-white.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise" width="24" height="24" viewBox="0 0 24 24" stroke="#ffffff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>

src/components/LiteLoading.vue

@@ -1,6 +1,25 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+withDefaults(
+  defineProps<{
+    light: boolean
+  }>(),
+  {
+    light: false
+  }
+)
+</script>
+
 <template>
   <div class="lite-loading">
-    <img class="is-loading" src="/assets/loading.svg" alt="loading..." />
+    <img
+      v-if="light"
+      class="is-loading"
+      src="/assets/loading-white.svg"
+      alt="loading..."
+    />
+    <img v-else class="is-loading" src="/assets/loading.svg" alt="loading..." />
   </div>
 </template>
 

src/components/NewVersion.vue

@@ -34,7 +34,7 @@ const reload = () => {
     </div>
     <div class="buttons">
       <button v-if="needRefresh" class="button is-primary" @click="reload">
-        <LiteLoading v-if="isLoading" />
+        <LiteLoading v-if="isLoading" light />
         <span v-else>Reload</span>
       </button>
       <button class="button" @click="close">Close</button>
@@ -55,4 +55,8 @@ const reload = () => {
   border-radius: 4px;
   background-color: var(--background-color);
 }
+
+button {
+  flex: 1;
+}
 </style>