From 36f96c87bb63df65eea32140722460d0712c8519 Mon Sep 17 00:00:00 2001
From: Astitva Patle <ankurpatle18@gmail.com>
Date: Thu, 7 Nov 2024 17:44:42 +0530
Subject: [PATCH] feat: updated toast message in auth repo []

---
 .../ToastNotification.svelte                  | 121 ++++++++++++++++--
 .../toast-notification/icons/error.svelte     |  10 +-
 .../toast-notification/icons/success.svelte   |  10 +-
 3 files changed, 118 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/toast-notification/ToastNotification.svelte b/src/lib/components/toast-notification/ToastNotification.svelte
index 53496a7..37a0c3d 100644
--- a/src/lib/components/toast-notification/ToastNotification.svelte
+++ b/src/lib/components/toast-notification/ToastNotification.svelte
@@ -6,15 +6,17 @@
     InfoIcon,
     WarningIcon,
     CloseIcon,
-  } from "./icons"
+  } from "./icons";
 </script>
 
-<ToastContainer let:data>
+<ToastContainer width={"fit-content"} let:data>
   <div
-    class="w-100 d-flex border-radius-4 position-relati custom-toast custom-toast-{data.type}"
+    class="d-flex position-relative custom-toast custom-toast-{data.type} toast"
+    style=""
   >
-    <div class="w-100" style="">
-      <span class="p-1">
+    <div class="w-100 content-wrapper">
+      <span class="p-1 icon">
+        <span class="icon-backdrop icon-backdrop-{data.type}" />
         {#if data.type === "success"}
           <SuccessIcon />
         {:else if data.type === "warning"}
@@ -25,8 +27,9 @@
           <InfoIcon />
         {/if}
       </span>
-      <span class="description text-fs-12 mb-0">{data.description}</span>
+      <span class="description mb-0">{data.description}</span>
     </div>
+    <!-- Close Icon -------------------------------------------------------------------------------------->
     <div style="width:24px;">
       <span
         data-notification-btn
@@ -39,30 +42,122 @@
         <CloseIcon /></span
       >
     </div>
+    <!-- Progress Bar -------------------------------------------------------------------------------------->
+    {#if data.duration > 0}
+      <div
+        class="progress-bar progress-bar-{data.type}"
+        style="animation-duration: {data.duration}ms;"
+      ></div>
+    {/if}
   </div>
 </ToastContainer>
 
 <style>
+  .toast {
+    border-radius: 8px;
+    width: 345px;
+  }
+  .icon {
+    margin-right: 18px;
+    position: relative;
+  }
+
+  .icon-backdrop {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 192px;
+    height: 192px;
+    border-radius: 50%;
+    z-index: 1;
+  }
+
+  .icon-backdrop-success {
+    background: radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(0, 237, 81, 0.12) 0%,
+      rgba(0, 237, 123, 0) 100%
+    );
+  }
+
+  .icon-backdrop-error {
+    background: radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(240, 66, 72, 0.13) 0%,
+      rgba(240, 66, 72, 0) 100%
+    );
+  }
+
   :global(.toast-container) {
-    z-index: 1000000 !important; /* Increase the z-index as needed */
+    z-index: 1000000 !important;
     pointer-events: unset !important;
     padding: 0 !important;
   }
 
   .custom-toast {
+    background-color: #272e34;
     padding: 8px;
+    position: relative;
+    min-height: 56px;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 12px;
   }
-  .custom-toast-success {
-    background-color: #252826;
+
+  .description {
+    font-size: 13px;
+    width: 225px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3; /* Limit to 3 lines */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Progress bar style */
+  .progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    border-radius: 0 0 0 8px;
+    transform-origin: left;
+    animation: progress linear forwards;
+    backdrop-filter: blur(4px);
   }
-  .custom-toast-error {
-    background-color: #2b1c1d;
+
+  /* Progress bar colors based on type */
+  .progress-bar-success {
+    background-color: #01e17b;
+    box-shadow: 1px 1px 10px 4px rgba(0, 237, 123, 0.5);
+  }
+
+  .progress-bar-error {
+    background-color: #f04349;
+    box-shadow: 1px 1px 10px 4px rgba(240, 66, 72, 0.5);
   }
-  .custom-toast-info {
+
+  .progress-bar-info {
     background-color: #262114;
   }
+
   .custom-toast-alert {
     background-color: #262114;
   }
-</style>
 
+  /* Progress bar animation */
+  @keyframes progress {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0;
+    }
+  }
+</style>
diff --git a/src/lib/components/toast-notification/icons/error.svelte b/src/lib/components/toast-notification/icons/error.svelte
index e173923..f54c39c 100644
--- a/src/lib/components/toast-notification/icons/error.svelte
+++ b/src/lib/components/toast-notification/icons/error.svelte
@@ -1,12 +1,12 @@
 <svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM8 4C8.41562 4 8.75 4.33437 8.75 4.75V8.25C8.75 8.66562 8.41562 9 8 9C7.58437 9 7.25 8.66562 7.25 8.25V4.75C7.25 4.33437 7.58437 4 8 4ZM7 11C7 10.7348 7.10536 10.4804 7.29289 10.2929C7.48043 10.1054 7.73478 10 8 10C8.26522 10 8.51957 10.1054 8.70711 10.2929C8.89464 10.4804 9 10.7348 9 11C9 11.2652 8.89464 11.5196 8.70711 11.7071C8.51957 11.8946 8.26522 12 8 12C7.73478 12 7.48043 11.8946 7.29289 11.7071C7.10536 11.5196 7 11.2652 7 11Z"
-    fill="#FE8C98"
+    d="M6.4 15L10 11.4L13.6 15L15 13.6L11.4 10L15 6.4L13.6 5L10 8.6L6.4 5L5 6.4L8.6 10L5 13.6L6.4 15ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z"
+    fill="#F04248"
   />
 </svg>
diff --git a/src/lib/components/toast-notification/icons/success.svelte b/src/lib/components/toast-notification/icons/success.svelte
index 20955aa..fbd9a7d 100644
--- a/src/lib/components/toast-notification/icons/success.svelte
+++ b/src/lib/components/toast-notification/icons/success.svelte
@@ -1,12 +1,12 @@
 <svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M8 1.5C9.72391 1.5 11.3772 2.18482 12.5962 3.40381C13.8152 4.62279 14.5 6.27609 14.5 8C14.5 9.72391 13.8152 11.3772 12.5962 12.5962C11.3772 13.8152 9.72391 14.5 8 14.5C6.27609 14.5 4.62279 13.8152 3.40381 12.5962C2.18482 11.3772 1.5 9.72391 1.5 8C1.5 6.27609 2.18482 4.62279 3.40381 3.40381C4.62279 2.18482 6.27609 1.5 8 1.5ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125C11.825 6.2375 11.825 5.7625 11.5312 5.47188C11.2375 5.18125 10.7625 5.17813 10.4719 5.47188L7.00313 8.94063L5.53438 7.47188C5.24063 7.17813 4.76562 7.17813 4.475 7.47188C4.18437 7.76562 4.18125 8.24063 4.475 8.53125L6.475 10.5312C6.76875 10.825 7.24375 10.825 7.53438 10.5312L11.5312 6.53125Z"
-    fill="#8DC599"
+    d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z"
+    fill="#00DF80"
   />
 </svg>