Merge pull request #75 from sparrowapp-dev/astitva/sheet-bugs

feat: updated toast message in auth repo []
sparrowapp-dev · Nov 7, 2024 · a50b41b · a50b41b
2 parents 675d3ca + 36f96c8
commit a50b41b
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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>