feat(notifications): updated ui of notification component

src/lib/ui/core/Notifications/Notification.svelte

@@ -1,54 +1,51 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, type Snippet } from 'svelte'
   import Svg from '$ui/core/Svg'
   import { cn } from '$ui/utils'
 
   type Props = {
-    icon: string
+    icon: 'info' | 'checkmark-circle' | 'warning' | 'error'
     message: string
-    description: string
-    action: { label: string; onClick: VoidFunction; className?: string }
+    description?: string | Snippet
   }
 
-  const { icon, message, description, action }: Props = $props()
+  const { icon, message, description }: Props = $props()
 
   const dispatch = createEventDispatcher()
 
-  const ICONS_FILL_MAP = {
-    info: 'fill-waterloo',
-    'checkmark-circle': 'fill-green',
-    warning: 'fill-orange',
-    error: 'fill-red',
+  const ICONS_MAP: { [key: string]: { fill: string; h?: number; w?: number } } = {
+    info: { fill: 'fill-waterloo' },
+    'checkmark-circle': { fill: 'fill-green' },
+    warning: { fill: 'fill-orange', h: 14, w: 16 },
+    error: { fill: 'fill-red' },
   }
 </script>
 
 <div
   class={cn(
-    'min-w-[360px] justify-between gap-2 rounded-md border bg-white p-2 row',
-    (description || action) && 'pb-4',
+    'w-[460px] gap-4 rounded-md border bg-white pl-6 pr-2.5 pt-5 row max-sm:w-full',
+    description ? 'pb-6' : 'pb-5',
   )}
 >
-  <div class="flex h-8 w-8 items-center justify-center {ICONS_FILL_MAP[icon]}">
-    <Svg id={icon} w={16} />
-  </div>
+  <figure class={cn('flex h-5 w-4 center', ICONS_MAP[icon].fill)}>
+    <Svg id={icon} w={ICONS_MAP[icon]?.w ?? 16} h={ICONS_MAP[icon]?.h ?? 16} />
+  </figure>
   <div class="flex-1 gap-1 column">
-    <h4 class="text-bleach min-h-8 text-nowrap text-sm font-medium leading-8">{message}</h4>
+    <h4 class="text-bleach self-stretch align-top text-base font-medium">{message}</h4>
     {#if description}
-      <p class="text-sm text-waterloo">{description}</p>
-    {/if}
-    {#if action && action.onClick && action.label}
-      <div>
-        <button
-          class="btn cursor-pointer text-rhino hover:text-green {action.className}"
-          on:click={action.onClick}>{action.label}</button
-        >
-      </div>
+      <p class="text-base text-fiord">
+        {#if typeof description === 'string'}
+          {description}
+        {:else}
+          {@render description()}
+        {/if}
+      </p>
     {/if}
   </div>
   <button
-    class="flex h-8 w-8 items-center justify-center fill-waterloo"
-    on:click={() => dispatch('closeToast')}
+    class="-ml-2 -mt-2.5 flex size-5 rounded fill-waterloo center hover:bg-porcelain max-sm:size-8"
+    onclick={() => dispatch('closeToast')}
   >
-    <Svg id="close" w={12} />
+    <Svg id="close" w={10} />
   </button>
 </div>

src/stories/Design System - Core UI/Notifications/index.svelte

@@ -5,32 +5,35 @@
 
 <Notifications></Notifications>
 
+{#snippet description()}
+  We will check you insight and <a
+    href="https://www.example.com"
+    target="_blank"
+    class="text-green"
+  >
+    publish it very soon
+  </a>
+{/snippet}
+
 <div class="flex flex-col justify-center divide-y p-6">
   <div class="flex gap-4">
     <Button
       variant="border"
       onclick={() =>
         notification.info('Thanks for your thoughts', {
-          description: 'We will check your insight and publish it very soon.',
-        })}>Info</Button
+          description,
+        })}
     >
+      Info
+    </Button>
 
-    <Button
-      variant="border"
-      onclick={() => notification.info('Notification channel settings is changed bla bla bla bla')}
-    >
+    <Button variant="border" onclick={() => notification.info('One line title without decription')}>
       Short Info
     </Button>
 
     <Button
       variant="border"
-      onclick={() =>
-        notification.info('Notification channel settings is changed bla bla bla bla', {
-          action: {
-            label: 'Got it',
-            onClick: () => console.log('!'),
-          },
-        })}
+      onclick={() => notification.info('Notification channel settings is changed')}
     >
       Info with button
     </Button>
@@ -49,10 +52,6 @@
       onclick={() =>
         notification.warning('Event has been created', {
           description: 'We will check your insight and publish it very soon.',
-          action: {
-            label: 'Undo',
-            onClick: () => console.log('!'),
-          },
         })}
       >Warning
     </Button>