From 728861ca470ffa23c65e1abdca859d0e00cdabcb Mon Sep 17 00:00:00 2001
From: JeremyGamer13 <69337718+JeremyGamer13@users.noreply.github.com>
Date: Mon, 31 Jul 2023 20:07:10 -0600
Subject: [PATCH] add cancel button

---
 src/lib/MenuModals/ExtensionColors.svelte | 26 ++++++++++++++++++-----
 src/routes/+page.svelte                   |  4 ++++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/lib/MenuModals/ExtensionColors.svelte b/src/lib/MenuModals/ExtensionColors.svelte
index 3307ce4..0fba56d 100644
--- a/src/lib/MenuModals/ExtensionColors.svelte
+++ b/src/lib/MenuModals/ExtensionColors.svelte
@@ -26,6 +26,9 @@
             color3,
         });
     }
+    function cancel() {
+        dispatch("cancel");
+    }
 
     function getExampleData(color1, color2, color3, color3Included) {
         const tokens = ["[{{COLOR1}}]", "[{{COLOR2}}]", "[{{COLOR3}}]"];
@@ -109,13 +112,25 @@
             </div>
         </div>
         <div class="modal-buttons">
-            <button on:click={event}>OK</button>
+            <button class="button-accept" on:click={event}>OK</button>
+            <div style="margin-left:6px" />
+            <button class="button-cancel" on:click={cancel}>Cancel</button>
         </div>
     </div>
 </div>
 
 <style>
-    button {
+    .button-cancel {
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        background: white;
+        color: black;
+        font-weight: bold;
+        padding: 0.75rem 1rem;
+        border-radius: 0.25rem;
+        font-size: 0.85rem;
+        cursor: pointer;
+    }
+    .button-accept {
         background: #ff4b4b;
         color: white;
         font-weight: bold;
@@ -125,6 +140,7 @@
         border: 0;
         cursor: pointer;
     }
+
     label {
         font-weight: bold;
         font-size: 0.625rem;
@@ -197,14 +213,14 @@
     }
     .modal-content {
         width: 100%;
-        height: 80%;
+        height: 75%;
         overflow: auto;
     }
     .modal-buttons {
         width: 100%;
-        height: 10%;
+        height: 15%;
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         align-items: center;
         justify-content: center;
     }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 701d134..63c33c0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -302,6 +302,10 @@
             extensionMetadata.color3 = colors.detail.color3;
             updateGeneratedCode();
         }}
+        on:cancel={() => {
+            ModalState.extensionColors = false;
+            updateGeneratedCode();
+        }}
     />
 {/if}
 <NavigationBar>