fix: fix toasts again

iotaledger · Mar 13, 2023 · fb222a9 · fb222a9
1 parent 77dc1bd
commit fb222a9
Showing 1 changed file with 14 additions and 18 deletions.
diff --git a/packages/shared/components/Toast.svelte b/packages/shared/components/Toast.svelte
@@ -41,47 +41,43 @@
         },
     }
 
+    $: style = TOAST_STYLE[toast.type]
+
     function onDismissClick(): void {
         removeDisplayNotification(toast.id)
     }
 </script>
 
-{#if alert}
+{#if toast.alert}
     <Alert type={toast.type} message={toast.message} id={toast.id} {showDismiss} />
 {:else}
-    <div class="{classes} flex flex-row items-center bg-{TOAST_STYLE[toast.type].backgroundColor} rounded-lg px-6 py-4">
+    <div class="{classes} flex flex-row items-center bg-{style.backgroundColor} rounded-lg px-6 py-4">
         <div
             style={'width:40px;height:40px'}
-            class="flex flex-shrink-0 justify-center items-center bg-{TOAST_STYLE[toast.type]
-                .iconBackgroundColor} rounded-lg text-{TOAST_STYLE[toast.type].iconColor}"
+            class="flex flex-shrink-0 justify-center items-center bg-{style.iconBackgroundColor} rounded-lg text-{style.iconColor}"
         >
-            {#if TOAST_STYLE[toast.type].logo}
-                <Logo logo={TOAST_STYLE[toast.type].logo} overrideStage="prod" />
+            {#if style.logo}
+                <Logo logo={style.logo} overrideStage="prod" />
             {:else}
-                <Icon icon={TOAST_STYLE[toast.type].icon} />
+                <Icon icon={style.icon} />
             {/if}
         </div>
         <div class="flex flex-auto flex-col px-4">
-            <span class="flex text-12 text-{TOAST_STYLE[type].messageColor}">{toast.message}</span>
+            <span class="flex text-12 text-{style.messageColor}">{toast.message}</span>
             {#if toast.progress !== undefined}
-                <span class="block bg-{TOAST_STYLE[type].subMessageColor}" style={'width:100%;height:2px;margin:4px 0'}>
-                    <span
-                        class="block bg-{TOAST_STYLE[type].messageColor}"
-                        style={`width:${toast.progress}%;height:2px`}
-                    />
+                <span class="block bg-{style.subMessageColor}" style={'width:100%;height:2px;margin:4px 0'}>
+                    <span class="block bg-{style.messageColor}" style={`width:${toast.progress}%;height:2px`} />
                 </span>
             {/if}
-            {#if toast.subMessage}<span class="flex text-11 text-{TOAST_STYLE[type].subMessageColor}"
-                    >{toast.subMessage}</span
-                >{/if}
+            {#if toast.subMessage}<span class="flex text-11 text-{style.subMessageColor}">{toast.subMessage}</span>{/if}
         </div>
         {#if toast.actions.length > 0}
             <div class="flex flex-col" style="min-width:90px">
                 {#each toast.actions as action, actionIndex}
                     <button
                         class="cursor-pointer text-center rounded-lg font-bold text-11 {action.isPrimary
                             ? 'bg-white'
-                            : ''} text-{action.isPrimary ? 'black' : TOAST_STYLE[toast.type].buttonSecondary}"
+                            : ''} text-{action.isPrimary ? 'black' : style.buttonSecondary}"
                         style={'min-width:90px;min-height:32px'}
                         on:click={() => action.callback(toast, actionIndex)}
                     >
@@ -94,7 +90,7 @@
                 type="button"
                 on:click={onDismissClick}
                 class="dismiss-min-wh cursor-pointer text-center rounded-lg
-                font-bold text-11 text-{TOAST_STYLE[toast.type].messageColor}"
+                font-bold text-11 text-{style.messageColor}"
             >
                 {localize('actions.dismiss')}
             </button>