Auto refresh button is not a switch
### Expected Behavior

_No response_

### Actual Behaviour

At first it looks like the auto refresh button is a switch cause when we click on it the background color stays purple. However it is only due to button keeping focus effect afterwards. If you click anywhere else on the page then you have no feedback of whether or not the auto refresh is active.

Also, it is even worst when the local storage kicks in as it retrieves the previous state from the local storage. However when we come on a page with the auto refresh being active due to local storage, since we didn't click on it we don't have the "on focus" effect, which make the auto refresh looking disabled while it is active.

I think we should use the [checkbox element](https://element-plus.org/en-US/component/checkbox.html) instead.

### Steps To Reproduce

_No response_

### Environment Information

- Kestra Version: 0.11.0-SNAPSHOT
- Operating System (OS / Docker / Kubernetes):
- Java Version (If not docker):


### Example flow

_No response_
ui/src/components/layout/RefreshButton.vue
ui/src/components/layout/RefreshButton.vue
diff --git a/ui/src/components/layout/RefreshButton.vue b/ui/src/components/layout/RefreshButton.vue
index 9fa6677b69..d5e8d6ee48 100644
--- a/ui/src/components/layout/RefreshButton.vue
+++ b/ui/src/components/layout/RefreshButton.vue
@@ -1,8 +1,8 @@
 <template>
     <el-button-group>
-        <el-button @click="toggleAutoRefresh" :pressed="autoRefresh">
+        <el-button :active="autoRefresh" @click="toggleAutoRefresh">
             <kicon :tooltip="$t('toggle periodic refresh each 10 seconds')" placement="bottom">
-                <clock />
+                <component :is="autoRefresh ? 'auto-renew' : 'auto-renew-off'" class="auto-refresh-icon" />
             </kicon>
         </el-button>
         <el-button @click="triggerRefresh">
@@ -14,10 +14,11 @@
 </template>
 <script>
     import Refresh from "vue-material-design-icons/Refresh.vue";
-    import Clock from "vue-material-design-icons/Clock.vue";
+    import AutoRenew from "vue-material-design-icons/Autorenew.vue";
+    import AutoRenewOff from "vue-material-design-icons/AutorenewOff.vue";
     import Kicon from "../Kicon.vue"
     export default {
-        components: {Refresh, Clock, Kicon},
+        components: {Refresh, AutoRenew, AutoRenewOff, Kicon},
         emits: ["refresh"],
         data() {
             return {
@@ -32,12 +33,6 @@
             toggleAutoRefresh() {
                 this.autoRefresh = !this.autoRefresh;
                 localStorage.setItem("autoRefresh", this.autoRefresh ? "1" : "0");
-                if (this.autoRefresh) {
-                    this.refreshHandler = setInterval(this.triggerRefresh, 10000);
-                    this.triggerRefresh()
-                } else {
-                    this.stopRefresh();
-                }
             },
             triggerRefresh() {
                 this.$emit("refresh");
@@ -51,7 +46,29 @@
         },
         beforeUnmount() {
             this.stopRefresh();
+        },
+        watch: {
+            autoRefresh(newValue) {
+                if (newValue) {
+                    this.refreshHandler = setInterval(this.triggerRefresh, 10000);
+                    this.triggerRefresh()
+                } else {
+                    this.stopRefresh();
+                }
+            }
         }
     };
 </script>
-
+<style scoped lang="scss">
+    button[active=true] .auto-refresh-icon {
+        animation: rotate 10s linear infinite;
+    }
+    @keyframes rotate {
+        0% {
+            rotate: 0deg;
+        }
+        100% {
+            rotate: 360deg;
+        }
+    }
+</style>
\ No newline at end of file
