Fix toast styling on Request side

3 files changed, 18 insertions, 4 deletions

diff --git a/assets/src/components/RequestPage.svelte b/assets/src/components/RequestPage.svelte
index 69981b4..4443e5a 100644
--- a/assets/src/components/RequestPage.svelte
+++ b/assets/src/components/RequestPage.svelte
@@ -24,6 +24,12 @@
         .data-view {
             border: solid 1px #cccccc;
         }
+
+        .toast {
+            color: black;
+            background-color: white;
+            border: solid 1px #cccccc;
+        }
     </style>
 </svelte:head>
 
diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte
index 9c40c67..123f918 100644
--- a/assets/src/components/SharePage.svelte
+++ b/assets/src/components/SharePage.svelte
@@ -33,6 +33,12 @@
         .data-view {
             border: solid 1px #626262;
         }
+
+        .toast {
+            color: white;
+            background-color: black;
+            border: solid 1px #626262;
+        }
     </style>
 </svelte:head>
 
diff --git a/assets/src/components/Toasts.svelte b/assets/src/components/Toasts.svelte
index f909831..2f5b6a9 100644
--- a/assets/src/components/Toasts.svelte
+++ b/assets/src/components/Toasts.svelte
@@ -4,6 +4,9 @@
     import CloseIcon from "./icons/CloseIcon.svelte";
     import FlashIcon from "./icons/FlashIcon.svelte";
     import LightbulbIcon from "./icons/LightbulbIcon.svelte";
+    import { isClientShare } from "../state/constant_state";
+
+    const iconColor = isClientShare() ? "white" : "black";
 
     function trim(str: string) {
         return str.slice(0, 100) + (str.length > 100 ? "..." : "");
@@ -14,14 +17,14 @@
     {#each $toasts as toast (toast.id)}
         <ul class="toast" in:scale out:scale>
             <div class="button" on:click={() => dismissToast(toast)}>
-                <CloseIcon color="white" />
+                <CloseIcon color={iconColor} />
             </div>
 
             <li>
                 {#if toast.type === ToastType.INFO}
-                    <LightbulbIcon color="white" />
+                    <LightbulbIcon color={iconColor} />
                 {:else}
-                    <FlashIcon color="white" />
+                    <FlashIcon color={iconColor} />
                 {/if}
             </li>
 
@@ -47,7 +50,6 @@
 
     .toast {
         width: 300px;
-        background-color: black;
         border: solid 1px #626262;
         padding: 17px 20px;
         font-size: 12px;