alert box for reset macros

src/js/macros.js

@@ -10,7 +10,7 @@ module.exports = {
   data: function () {
     return {
       tab: "1",
-      confirmShow: false,
+      confirmReset: false,
     };
   },
   components: {
@@ -92,7 +92,7 @@ module.exports = {
     },
     cancelMacros: function (id) {
       document.getElementById(`macros-name-${id}`).value = "";
-      document.getElementById(`macros-color-${id}`).value = "#fff";
+      document.getElementById(`macros-color-${id}`).value = "#ffffff";
     },
     resetConfig: async function () {
       this.config.macros = [
@@ -137,6 +137,7 @@ module.exports = {
         await api.put("config/save", this.config);
         console.log("Successfully flushed");
         this.$dispatch("update");
+        this.confirmReset = false;
       } catch (error) {
         console.error("Restore Failed: ", error);
         alert("Restore failed");

src/pug/templates/macros.pug

@@ -1,16 +1,16 @@
 script#macros-template(type="text/x-template")
   #macros
-    message(:show.sync="confirmUpload")
-      h3(slot="header") Upload Firmware?
+    message(:show.sync="confirmReset")
+      h3(slot="header") Reset All Macros?
       div(slot="body")
-        p Are you sure you want to upload firmware #[em {{firmwareName}}]?
+        p Are you sure you want to reset all macros?
 
       div(slot="footer")
-        button.pure-button(@click="confirmUpload=false") Cancel
-        button.pure-button.pure-button-primary(@click="saveMacros(0)")
-          | Upload
+        button.pure-button(@click="confirmReset=false") Cancel
+        button.pure-button.pure-button-primary(@click="resetConfig")
+          | Reset
     h1 Macros Configuration
-    button.pure-button(title="Print config.", @click="resetConfig",
+    button.pure-button(title="Print config.", @click="confirmReset='true'",
         style="height:50px;width:170px;font-weight:normal;color:#fff;background-color:#5a9ad7;display:flex;align-items:center;justify-content:space-around") Reset Macros
         .fa.fa-rotate-right
     .warning-box

src/stylus/style.styl

@@ -633,11 +633,9 @@ span.unit
 
 .warning-box
   display flex
-  background-color #ced512
+  background-color #F3FF00
   border-radius 5px
   border 0
-  padding 4px
-  margin-top 5px
   margin-bottom 10px
   margin-top 10px
   align-items center