From a643350165862c08ae278172d186543ffb9b7d0f Mon Sep 17 00:00:00 2001
From: FizboZ <elie_simard@live.fr>
Date: Wed, 21 Aug 2024 17:06:17 -0400
Subject: [PATCH 1/2] Put the toast styling into its own css file and imported
 it into donate and sucess popup files, success notif is now the same style as
 donate

---
 src/lib/AddOverlay.svelte  |  6 +++-
 src/lib/DonatePopup.svelte | 61 ++-----------------------------------
 src/lib/toast.css          | 62 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 60 deletions(-)
 create mode 100644 src/lib/toast.css

diff --git a/src/lib/AddOverlay.svelte b/src/lib/AddOverlay.svelte
index ae090ca..35436f3 100644
--- a/src/lib/AddOverlay.svelte
+++ b/src/lib/AddOverlay.svelte
@@ -13,6 +13,7 @@
   } from '@svelte-put/cloudflare-turnstile';
   import { PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY } from '$env/static/public';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+  import './toast.css'; 
 
   let momentDescription = '';
   let captchaToken = '';
@@ -31,7 +32,9 @@
       'Your story was successfully submitted. It will appear publicly on the map once it has been approved by our moderators.',
       {
         theme: {
-          '--toastBarHeight': 0
+          '--toastBackground': 'black',
+          '--toastBarHeight': 0,
+          '--toastColor': 'var(--color-pink)',
         },
 
         duration: 5000
@@ -66,6 +69,7 @@
     } else {
       const result = await response.json();
       alert(`Error: ${result.error}`);
+      showSubmissionSuccessNotification();
     }
   }
 
diff --git a/src/lib/DonatePopup.svelte b/src/lib/DonatePopup.svelte
index 032fadf..3ac4d8b 100644
--- a/src/lib/DonatePopup.svelte
+++ b/src/lib/DonatePopup.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
+  import './toast.css'; 
 
   const showToast = writable(true);
 
@@ -24,62 +25,4 @@
       ></button>
     </div>
   </div>
-{/if}
-
-<style>
-  .toast-container {
-    position: fixed;
-    bottom: 0px;
-    left: 9px;
-    right: 70px;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    pointer-events: none;
-    z-index: 9999;
-  }
-  .toast {
-    width: fit-content;
-    min-height: 3.5rem;
-    margin-bottom: 0.5rem;
-    padding: 0;
-    background: black;
-    color: #fff;
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    border: 1px solid var(--color-pink);
-    border-radius: 0.125rem;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    pointer-events: all;
-    cursor: pointer;
-    z-index: 999;
-    position: relative;
-  }
-  .toast-message {
-    padding: 0.75rem 3rem 0.75rem 0.5rem;
-    flex: 1;
-  }
-  .toast-message a {
-    color: var(--color-pink);
-    text-decoration: unset;
-  }
-  .toast-message a span {
-    text-decoration: underline;
-  }
-  .toast-close {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    background: none;
-    border: none;
-    color: var(--color-pink);
-    cursor: pointer;
-    font: 1rem sans-serif;
-  }
-  .toast-close::after {
-    content: '✕';
-  }
-</style>
+{/if}
\ No newline at end of file
diff --git a/src/lib/toast.css b/src/lib/toast.css
new file mode 100644
index 0000000..61fc8b9
--- /dev/null
+++ b/src/lib/toast.css
@@ -0,0 +1,62 @@
+.toast-container {
+    position: fixed;
+    bottom: 0px;
+    left: 9px;
+    right: 70px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    pointer-events: none;
+    z-index: 9999;
+  }
+  
+  .toast {
+    width: fit-content;
+    min-height: 3.5rem;
+    margin-bottom: 0.5rem;
+    padding: 0;
+    background: black;
+    color: var(--color-pink);
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: 1px solid var(--color-pink);
+    border-radius: 0.125rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    pointer-events: all;
+    cursor: pointer;
+    z-index: 999;
+    position: relative;
+  }
+  
+  .toast-message {
+    padding: 0.75rem 3rem 0.75rem 0.5rem;
+    flex: 1;
+  }
+  
+  .toast-message a {
+    color: var(--color-pink);
+    text-decoration: unset;
+  }
+  
+  .toast-message a span {
+    text-decoration: underline;
+  }
+  
+  .toast-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: none;
+    border: none;
+    color: var(--color-pink);
+    cursor: pointer;
+    font: 1rem sans-serif;
+  }
+  
+  .toast-close::after {
+    content: '✕';
+  }
+  
\ No newline at end of file

From 53952bd2051904a9de41c427cbc90639a44edcad Mon Sep 17 00:00:00 2001
From: Elie <104814268+Elie-Simard@users.noreply.github.com>
Date: Wed, 21 Aug 2024 17:38:23 -0400
Subject: [PATCH 2/2] Update AddOverlay.svelte

Remove line used for personal testing
---
 src/lib/AddOverlay.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/AddOverlay.svelte b/src/lib/AddOverlay.svelte
index 35436f3..bad11d4 100644
--- a/src/lib/AddOverlay.svelte
+++ b/src/lib/AddOverlay.svelte
@@ -69,7 +69,6 @@
     } else {
       const result = await response.json();
       alert(`Error: ${result.error}`);
-      showSubmissionSuccessNotification();
     }
   }