From 184feb41e4a560a373862b25c4a97a3babba5cfc Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 6 Jan 2024 00:24:15 +0100
Subject: [PATCH] better on new version popup

---
 public/assets/loading-white.svg |  4 ++++
 src/components/LiteLoading.vue  | 21 ++++++++++++++++++++-
 src/components/NewVersion.vue   |  6 +++++-
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 public/assets/loading-white.svg

diff --git a/public/assets/loading-white.svg b/public/assets/loading-white.svg
new file mode 100644
index 0000000..61e0fe3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/LiteLoading.vue b/src/components/LiteLoading.vue
index 846322e..1941495 100644
--- a/src/components/LiteLoading.vue
+++ b/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>
 
diff --git a/src/components/NewVersion.vue b/src/components/NewVersion.vue
index fed8760..d3ab276 100644
--- a/src/components/NewVersion.vue
+++ b/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>