Add info and warning notification icons (#76)

* Add info and warning notification icons

* Switch over to icon map

src/components/icons/InfoThinIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let color: string
+</script>
+
+<svg
+  width="36"
+  height="36"
+  viewBox="0 0 36 36"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M19.8333 25.3333H18V18H16.1667M18 10.6667H18.0183M34.5 18C34.5 27.1127 27.1127 34.5 18 34.5C8.8873 34.5 1.5 27.1127 1.5 18C1.5 8.8873 8.8873 1.5 18 1.5C27.1127 1.5 34.5 8.8873 34.5 18Z"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

src/components/icons/WarningThinIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let color: string
+</script>
+
+<svg
+  width="36"
+  height="32"
+  viewBox="0 0 36 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M17.9998 12.5V16.1667M17.9998 23.5H18.0182M5.29811 30.8333H30.7015C33.5241 30.8333 35.2883 27.7778 33.877 25.3333L21.1752 3.33333C19.7639 0.888889 16.2357 0.888889 14.8244 3.33333L2.12269 25.3333C0.711386 27.7778 2.47551 30.8333 5.29811 30.8333Z"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

src/components/notifications/Notification.svelte

@@ -4,9 +4,38 @@
   import { themeStore } from '../../stores'
   import type { Notification } from '$lib/notifications'
   import CheckThinIcon from '$components/icons/CheckThinIcon.svelte'
+  import InfoThinIcon from '$components/icons/InfoThinIcon.svelte'
+  import WarningThinIcon from '$components/icons/WarningThinIcon.svelte'
   import XThinIcon from '$components/icons/XThinIcon.svelte'
 
   export let notification: Notification
+
+  const iconMap = {
+    info: {
+      component: InfoThinIcon,
+      props: {
+        color: '#1e3a8a'
+      }
+    },
+    error: {
+      component: XThinIcon,
+      props: {
+        color: $themeStore === 'light' ? '#ffd6d7' : '#fec3c3'
+      }
+    },
+    success: {
+      component: CheckThinIcon,
+      props: {
+        color: $themeStore === 'light' ? '#b8ffd3' : '#002e12'
+      }
+    },
+    warning: {
+      component: WarningThinIcon,
+      props: {
+        color: '#7c2d12'
+      }
+    }
+  }
 </script>
 
 <div
@@ -18,13 +47,10 @@
 >
   <div class="alert alert-{notification.type} text-sm mb-3 peer-last:mb-0">
     <div>
-      {#if notification.type === 'success'}
-        <CheckThinIcon
-          color={$themeStore === 'light' ? '#b8ffd3' : '#002e12'}
-        />
-      {:else if notification.type === 'error'}
-        <XThinIcon color={$themeStore === 'light' ? '#ffd6d7' : '#fec3c3'} />
-      {/if}
+      <svelte:component
+        this={iconMap[notification.type].component}
+        {...iconMap[notification.type].props}
+      />
       <span class="pl-1">{@html notification.msg}</span>
     </div>
   </div>

tailwind.config.cjs

@@ -12,7 +12,7 @@ module.exports = {
           secondary: "#30aadd",
           accent: "#00ffc6",
           neutral: "#282828",
-          info: "#bfdbfe",
+          info: "#93c5fd",
           success: "#22c55e",
           warning: "#fdba74",
           error: "#ef4444",
@@ -31,7 +31,7 @@ module.exports = {
           neutral: "#e5e5e5",
           info: "#bfdbfe",
           success: "#15803d",
-          warning: "#fdba74",
+          warning: "#fed7aa",
           error: "#b91c1c",
           "base-content": "#0f172a", // Base text content color
           "base-100": "#f8fafc", // Base background color