Add reset all button

src/locales/en.json

@@ -434,6 +434,10 @@
       "string": "Preview",
       "context": "Button to preview the project"
     },
+    "resetAll": {
+      "string": "Reset All",
+      "context": "Button that resets all settings"
+    },
     "download": {
       "string": "Download {filename} ({size}MB)",
       "context": "Download link"
@@ -476,7 +480,11 @@
     },
     "confirm": {
       "string": "Are you sure you want to reset these settings? This cannot be undone.",
-      "context": "Prompt to confirm user wants to reset settings"
+      "context": "Prompt to confirm user wants to reset a specific subsection's settings"
+    },
+    "confirmAll": {
+      "string": "Are you sure you want to reset ALL settings? This cannot be undone.",
+      "context": "Prompt to confirm user wants to reset ALL settings for the current project"
     }
   },
   "preview": {

src/p4/Button.svelte

@@ -1,8 +1,14 @@
 <script>
   import {ACCENT_COLOR} from '../packager/brand';
   export let secondary;
+  export let dangerous;
   export let text;
-  const color = secondary ? '#0FBD8C' : ACCENT_COLOR;
+
+  const getColor = () => {
+    if (secondary) return '#0FBD8C';
+    if (dangerous) return '#FF8C1A';
+    return ACCENT_COLOR;
+  };
 </script>
 
 <style>
@@ -42,7 +48,7 @@
   }
 </style>
 
-<button on:click style={`background-color: ${color}`}>
+<button on:click style={`background-color: ${getColor()}`}>
   <div class="dimmer"></div>
   <div class="text">{text}</div>
 </button>

src/p4/PackagerOptions.svelte

@@ -160,6 +160,15 @@
     $options = $options;
   };
 
+  const resetAll = () => {
+    if (confirm($_('reset.confirmAll'))) {
+      resetOptions(Object.keys($options));
+      $icon = null;
+      $customCursorIcon = null;
+      $loadingScreenImage = null;
+    }
+  };
+
   onDestroy(() => {
     if (result) {
       URL.revokeObjectURL(result.url);
@@ -206,6 +215,15 @@
     padding: 10px;
     border-radius: 10px;
   }
+  .buttons {
+    display: flex;
+  }
+  .button {
+    margin-right: 4px;
+  }
+  .reset-button {
+    margin-left: auto;
+  }
 </style>
 
 <Section
@@ -801,8 +819,17 @@
 {/if}
 
 <Section>
-  <Button on:click={pack} text={$_('options.package')} />
-  <Button on:click={preview} secondary text={$_('options.preview')} />
+  <div class="buttons">
+    <div class="button">
+      <Button on:click={pack} text={$_('options.package')} />
+    </div>
+    <div clas="button">
+      <Button on:click={preview} secondary text={$_('options.preview')} />
+    </div>
+    <div class="reset-button">
+      <Button on:click={resetAll} dangerous text={$_('options.resetAll')} />
+    </div>
+  </div>
 </Section>
 
 {#if result}