From 93be06d10ffeb0ab224fef4cf3351e989c80f95f Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Tue, 9 Nov 2021 16:54:37 +0100
Subject: [PATCH] Make form submit button bold by default, add optional reset
 button

---
 src/assets/views/utils/Form.svelte | 38 +++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/assets/views/utils/Form.svelte b/src/assets/views/utils/Form.svelte
index 6102a42..ff1e714 100644
--- a/src/assets/views/utils/Form.svelte
+++ b/src/assets/views/utils/Form.svelte
@@ -11,6 +11,8 @@
     export let submitText: string;
     export let submitIcon: string;
     export let submitClass: string = undefined;
+    export let isBoldSubmit: boolean = true;
+    export let resetButton: boolean = false;
     export let confirm: string = undefined;
 
     const formId = nextAvailableFormId++;
@@ -23,17 +25,35 @@
     }
 </script>
 
+<style lang="scss">
+    .form-controls {
+        display: flex;
+        justify-content: space-between;
+
+        > :last-child:not(* + :last-child) {
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+</style>
+
 <form {action} method="POST" id="{formId}-form" on:submit={handleSubmit}>
     <CsrfTokenField/>
     <slot/>
-    <button type="submit" class={submitClass}>
-        {#if submitIcon}
-            <Icon name={submitIcon}/>
+    <div class="form-controls">
+        {#if resetButton}
+            <button type="reset"><Icon name="trash"/>Reset</button>
         {/if}
-        {#if button}
-            <span class="tip">{submitText}</span>
-        {:else}
-            {submitText}
-        {/if}
-    </button>
+
+        <button type="submit" class={submitClass} class:bold={isBoldSubmit}>
+            {#if submitIcon}
+                <Icon name={submitIcon}/>
+            {/if}
+            {#if button}
+                <span class="tip">{submitText}</span>
+            {:else}
+                {submitText}
+            {/if}
+        </button>
+    </div>
 </form>