From cf01f87894faac8875b808f891fb94f4cb8081b8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 3 Mar 2025 21:36:49 +0100
Subject: [PATCH] update toast

---
 package-lock.json                             |  1 +
 package.json                                  |  1 +
 src/lib/components/Feedback.svelte            | 13 +--
 src/lib/components/Input.svelte               | 53 +-----------
 src/lib/components/LoginPopup.svelte          | 33 ++-----
 src/lib/components/PriceAlert.svelte          |  8 +-
 src/lib/components/Share.svelte               |  2 +-
 .../components/Table/OptionsFlowTable.svelte  | 34 ++++++--
 src/lib/components/Table/Table.svelte         |  2 +-
 src/lib/components/shadcn/sonner/index.ts     |  1 -
 .../components/shadcn/sonner/sonner.svelte    | 20 -----
 src/routes/+layout.svelte                     |  5 +-
 src/routes/dark-pool-flow/+page.svelte        |  3 +-
 src/routes/etf/[tickerID]/+layout.svelte      |  3 +-
 src/routes/heatmap/+page.svelte               |  2 +-
 src/routes/index/[tickerID]/+layout.svelte    |  3 +-
 src/routes/login/+page.svelte                 | 24 ++----
 src/routes/options-flow/+page.svelte          | 23 ++---
 src/routes/price-alert/+page.svelte           | 13 +--
 src/routes/profile/+page.svelte               | 73 ++++------------
 src/routes/register/+page.svelte              | 19 ++--
 src/routes/reset-password/+page.svelte        |  8 +-
 src/routes/stock-screener/+page.svelte        | 50 +++--------
 src/routes/stocks/[tickerID]/+layout.svelte   |  3 +-
 src/routes/update-password/+page.svelte       |  3 +-
 src/routes/watchlist/+layout.svelte           |  4 +-
 src/routes/watchlist/options/+page.svelte     | 12 +--
 src/routes/watchlist/stocks/+page.svelte      | 86 +++++++------------
 28 files changed, 149 insertions(+), 353 deletions(-)
 delete mode 100644 src/lib/components/shadcn/sonner/index.ts
 delete mode 100644 src/lib/components/shadcn/sonner/sonner.svelte

diff --git a/package-lock.json b/package-lock.json
index b60b6619..974f6bc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,6 +76,7 @@
         "tailwind-merge": "^2.5.2",
         "tailwind-variants": "^0.2.1",
         "tailwindcss": "^4.0.9",
+        "tslib": "^2.8.1",
         "typescript": "^5.4.5",
         "util": "^0.12.5",
         "uuid": "^10.0.0",
diff --git a/package.json b/package.json
index 640c6d49..77b0ae99 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "^4.0.9",
+    "tslib": "^2.8.1",
     "typescript": "^5.4.5",
     "util": "^0.12.5",
     "uuid": "^10.0.0",
diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index 32d5b403..a08e702e 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import veryGoodEmoji from "$lib/assets/veryGoodEmoji.svg";
   import goodEmoji from "$lib/assets/goodEmoji.svg";
   import badEmoji from "$lib/assets/badEmoji.svg";
@@ -38,18 +39,12 @@
 
   async function sendFeedback() {
     if (inputValue?.length === 0) {
-      toast.error("Please enter your feedback", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Please enter your feedback");
       return;
     }
 
     if (rating?.length === 0 && category === "general") {
-      toast.error("Please select an emoji", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Please select an emoji");
       return;
     }
 
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index fa5287df..92d00ed2 100644
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@@ -14,12 +14,8 @@
   export let errors;
   export let useTitle = false; // new prop
 
-  let showVideo = false;
-
   let inputValue = value;
 
-  //$: value = useTitle === false ? $linkTitle : '';
-
   let counterColor;
 
   $: {
@@ -32,51 +28,8 @@
 
   function handleInput(event) {
     inputValue = event.target.value;
-    if (inputValue?.toLowerCase()?.includes(".mp4")) {
-      showVideo = true;
-    }
-    /*
-		if (useTitle) {
-			// Check if the input value is a valid URL
-			try {
-			const urlObject = new URL(inputValue);
-			const url = urlObject.href;
-			getTitle(url);
-			
-
-			
-			} catch (error) {
-			// The URL is not valid, so don't do anything
-			console.error(error);
-			}
-		}
-
-		$: value = useTitle === false ? $linkTitle : '';
-		*/
   }
 
-  /*
-	async function getTitle(url) {
-		try {
-
-		
-		const response = await fetch('/api/create-post', {
-			method: 'POST',
-			body: JSON.stringify(url)
-		});
-
-		const output = await response.json();
-		linkTitle.update( value => output);
-		
-
-		}
-		catch(e)
-		{
-			console.log(e)
-		}
-	}
-	*/
-
   $: {
     if (inputValue) {
       errors = null;
@@ -90,7 +43,7 @@
   </label>
   <div class="relative">
     <input
-      class="input input-bordered border border-gray-600 focus:outline-none w-full bg-secondary placeholder-gray-300 text-white whitespace-normal"
+      class=" input input-lg input-bordered border border-gray-600 focus:outline-none w-full bg-secondary placeholder-gray-300 text-white whitespace-normal"
       {type}
       {placeholder}
       {required}
@@ -104,8 +57,8 @@
   </div>
 
   {#if errors}
-    <label for={id} class="label py-0 pt-1">
-      <span class="label-text-alt text-error">
+    <label for={id} class="label py-0 pt-1 text-xs">
+      <span class="text-error">
         {errors}
       </span>
     </label>
diff --git a/src/lib/components/LoginPopup.svelte b/src/lib/components/LoginPopup.svelte
index 49a51432..21c23b57 100644
--- a/src/lib/components/LoginPopup.svelte
+++ b/src/lib/components/LoginPopup.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import Input from "$lib/components/Input.svelte";
   import { screenWidth } from "$lib/store";
   import { page } from "$app/stores";
@@ -18,24 +19,15 @@
         case "success":
         case "redirect":
           isClicked = true;
-          toast.success("Login successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Login successfully!");
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error("Invalid credentials");
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error(result.error.message);
           break;
         default:
           await update();
@@ -65,24 +57,15 @@
         case "success":
         case "redirect":
           isClicked = true;
-          toast.success("Registration successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Registration successfully!");
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error("Invalid credentials");
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error(result.error.message);
           break;
         default:
           await update();
diff --git a/src/lib/components/PriceAlert.svelte b/src/lib/components/PriceAlert.svelte
index 4d463d49..c100c3f1 100644
--- a/src/lib/components/PriceAlert.svelte
+++ b/src/lib/components/PriceAlert.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { openPriceAlert, newPriceAlertData } from "$lib/store";
 
   export let data;
@@ -17,10 +18,7 @@
   async function handleCreateAlert() {
     // Validate input locally.
     if (targetPrice < 0) {
-      toast.error("Target Price must be above zero", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Target Price must be above zero");
       return;
     }
 
diff --git a/src/lib/components/Share.svelte b/src/lib/components/Share.svelte
index 94a3c169..cbc20602 100644
--- a/src/lib/components/Share.svelte
+++ b/src/lib/components/Share.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
 
   export let url;
 
diff --git a/src/lib/components/Table/OptionsFlowTable.svelte b/src/lib/components/Table/OptionsFlowTable.svelte
index a449d8eb..657ce279 100644
--- a/src/lib/components/Table/OptionsFlowTable.svelte
+++ b/src/lib/components/Table/OptionsFlowTable.svelte
@@ -4,7 +4,7 @@
 
   import VirtualList from "svelte-tiny-virtual-list";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
 
   export let data;
   export let optionsWatchlist;
@@ -93,10 +93,7 @@
         // Handle the error appropriately (e.g., show an error message to the user)
       }
     } else {
-      toast.error("Only for Pro Members", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Only for Pro Members");
     }
   }
 
@@ -613,7 +610,7 @@
           id={displayedData[index]?.id}
           on:click|stopPropagation={() =>
             addToWatchlist(displayedData[index]?.id)}
-          class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap {optionsWatchlist.optionsId?.includes(
+          class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {optionsWatchlist.optionsId?.includes(
             displayedData[index]?.id,
           )
             ? 'text-[#FBCE3C]'
@@ -755,3 +752,28 @@
     </VirtualList>
   </div>
 </div>
+
+<style>
+  .heartbeat {
+    animation: heartbeat-animation 0.3s;
+    animation-timing-function: ease-in-out;
+  }
+
+  @keyframes heartbeat-animation {
+    0% {
+      transform: rotate(0deg) scale(0.95);
+    }
+    25% {
+      transform: rotate(10deg) scale(1.05);
+    }
+    50% {
+      transform: rotate(0deg) scale(1.2);
+    }
+    75% {
+      transform: rotate(-10deg) scale(1.05);
+    }
+    100% {
+      transform: rotate(0deg) scale(0.95);
+    }
+  }
+</style>
diff --git a/src/lib/components/Table/Table.svelte b/src/lib/components/Table/Table.svelte
index 9baf394a..4d63ebe5 100644
--- a/src/lib/components/Table/Table.svelte
+++ b/src/lib/components/Table/Table.svelte
@@ -12,7 +12,7 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import DownloadData from "$lib/components/DownloadData.svelte";
   import { page } from "$app/stores";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
 
   export let data;
   export let rawData;
diff --git a/src/lib/components/shadcn/sonner/index.ts b/src/lib/components/shadcn/sonner/index.ts
deleted file mode 100644
index 1ad9f4a2..00000000
--- a/src/lib/components/shadcn/sonner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Toaster } from "./sonner.svelte";
diff --git a/src/lib/components/shadcn/sonner/sonner.svelte b/src/lib/components/shadcn/sonner/sonner.svelte
deleted file mode 100644
index 06bbb15c..00000000
--- a/src/lib/components/shadcn/sonner/sonner.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
-
-	type $$Props = SonnerProps;
-</script>
-
-<Sonner
-	theme={$mode}
-	class="toaster group"
-	toastOptions={{
-		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
-	}}
-	{...$$restProps}
-/>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ba091dca..30e49bd7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,8 +2,8 @@
   import "../app.css";
   import "../app.pcss";
 
-  import { Toaster } from "svelte-french-toast";
-
+  //import { Toaster } from "svelte-french-toast";
+  import { Toaster } from "svelte-sonner";
   import NProgress from "nprogress";
   import "nprogress/nprogress.css";
 
@@ -1205,6 +1205,7 @@
 
               <slot />
               <Toaster />
+
               {#if Cookie && $showCookieConsent === true}
                 <Cookie />
               {/if}
diff --git a/src/routes/dark-pool-flow/+page.svelte b/src/routes/dark-pool-flow/+page.svelte
index 66d93269..f90b9a03 100644
--- a/src/routes/dark-pool-flow/+page.svelte
+++ b/src/routes/dark-pool-flow/+page.svelte
@@ -4,7 +4,8 @@
 
   import { cn, sectorList } from "$lib/utils";
   import { onMount, onDestroy } from "svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { DateFormatter, type DateValue } from "@internationalized/date";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import * as Popover from "$lib/components/shadcn/popover/index.js";
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 194d9443..de053063 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -21,7 +21,8 @@
 
   import { onMount, onDestroy, afterUpdate } from "svelte";
   import { page } from "$app/stores";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { convertTimestamp } from "$lib/utils";
   import PriceAlert from "$lib/components/PriceAlert.svelte";
 
diff --git a/src/routes/heatmap/+page.svelte b/src/routes/heatmap/+page.svelte
index 2b36eae6..c226bffb 100644
--- a/src/routes/heatmap/+page.svelte
+++ b/src/routes/heatmap/+page.svelte
@@ -4,7 +4,7 @@
   import SEO from "$lib/components/SEO.svelte";
   import { setCache, getCache } from "$lib/store";
   import { onDestroy, onMount } from "svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
 
   export let data;
   let isLoaded = false;
diff --git a/src/routes/index/[tickerID]/+layout.svelte b/src/routes/index/[tickerID]/+layout.svelte
index 298c81ec..b3fc52ff 100644
--- a/src/routes/index/[tickerID]/+layout.svelte
+++ b/src/routes/index/[tickerID]/+layout.svelte
@@ -21,7 +21,8 @@
 
   import { onMount, onDestroy, afterUpdate } from "svelte";
   import { page } from "$app/stores";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { convertTimestamp } from "$lib/utils";
   import PriceAlert from "$lib/components/PriceAlert.svelte";
 
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 0505001c..34ba0a90 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import Input from "$lib/components/Input.svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
   import SEO from "$lib/components/SEO.svelte";
 
   export let form;
@@ -24,33 +24,21 @@
             break;
           } else form?.notVerified === false;
           {
-            toast.success("Login successfully!", {
-              style:
-                "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-            });
+            toast.success("Login successfully!");
             await update();
             break;
           }
         case "redirect":
           isClicked = true;
-          toast.success("Login successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Login successfully!");
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error("Invalid credentials");
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error(result.error.message);
           break;
         default:
           await update();
@@ -129,7 +117,7 @@
           {#if !loading && !isClicked}
             <button
               type="submit"
-              class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
+              class="cursor-pointer py-2.5 bg-[#fff] border-none sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
             >
               <span>Login</span>
             </button>
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index b6b9143c..7b46c4b2 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -4,7 +4,8 @@
 
   import { cn } from "$lib/utils";
   import { onMount, onDestroy } from "svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { DateFormatter, type DateValue } from "@internationalized/date";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import * as Popover from "$lib/components/shadcn/popover/index.js";
@@ -228,10 +229,7 @@
 
   function handleAddRule() {
     if (ruleName === "") {
-      toast.error("Please select a rule", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Please select a rule");
       return;
     }
 
@@ -287,11 +285,6 @@
       }
     } else {
       ruleOfList = [...ruleOfList, newRule];
-      /*
-    toast.success('Rule added', {
-      style: 'border-radius: 200px; background: #2A2E39; color: #fff;'
-    });
-    */
 
       shouldLoadWorker.set(true);
     }
@@ -515,10 +508,7 @@
         shouldLoadWorker.set(true);
       }
     } else {
-      toast.error(`Market is closed`, {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error(`Market is closed`);
     }
   }
 
@@ -783,10 +773,7 @@
         }
       }
     } else {
-      toast.error("Only for Pro Members", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Only for Pro Members");
     }
   };
 
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index f858449d..9b230fc9 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -8,7 +8,8 @@
     abbreviateNumber,
   } from "$lib/utils";
   //import { enhance } from '$app/forms';
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { goto } from "$app/navigation";
   import { screenWidth, newPriceAlertData } from "$lib/store";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
@@ -82,15 +83,9 @@
 
   async function handleDeleteTickers() {
     if (numberOfChecked === 0) {
-      toast.error(`You need to select symbols before you can delete them`, {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error(`You need to select symbols before you can delete them`);
     } else {
-      toast.success(`Price alerts deleted successfully`, {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.success(`Price alerts deleted successfully`);
 
       const symbolsToDelete = priceAlertList
         ?.filter((item) => deletePriceAlertList.includes(item.id))
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 9f26700b..1dce5113 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import SEO from "$lib/components/SEO.svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { enhance } from "$app/forms";
   import { isPWAInstalled } from "$lib/utils";
   import {
@@ -37,31 +38,19 @@
     return async ({ result, update }) => {
       switch (result.type) {
         case "success":
-          toast.success("Subscription Cancelled successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Subscription Cancelled successfully!");
           await update();
           break;
         case "redirect":
-          toast.success("Subscription Cancelled successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Subscription Cancelled successfully!");
           await update();
           break;
         case "failure":
-          toast.error("Something went wrong.", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error("Something went wrong.");
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error(result.error.message);
           break;
         default:
           await update();
@@ -83,31 +72,19 @@
     return async ({ result, update }) => {
       switch (result.type) {
         case "success":
-          toast.success("Subscription Reactivate successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Subscription Reactivate successfully!");
           await update();
           break;
         case "redirect":
-          toast.success("Subscription Reactivate successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Subscription Reactivate successfully!");
           await update();
           break;
         case "failure":
-          toast.error("Something went wrong.", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error("Something went wrong.");
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error(result.error.message);
           break;
         default:
           await update();
@@ -129,31 +106,19 @@
     return async ({ result, update }) => {
       switch (result.type) {
         case "success":
-          toast.success("Changing to Annual Plan successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Changing to Annual Plan successfully!");
           await update();
           break;
         case "redirect":
-          toast.success("Changing to Annual Plan successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Changing to Annual Plan successfully!");
           await update();
           break;
         case "failure":
-          toast.error("Something went wrong.", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error("Something went wrong.");
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error(result.error.message);
           break;
         default:
           await update();
@@ -196,15 +161,9 @@
     const output = await subscribeUser();
     if (output?.success === true) {
       isPushSubscribed = true;
-      toast.success("Push notification activated successfully!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.success("Push notification activated successfully!");
     } else {
-      toast.error("Your browser does not support push notifications...", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Your browser does not support push notifications...");
     }
     loading = false;
   }
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 10da3c42..97026159 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -2,7 +2,7 @@
   import { enhance } from "$app/forms";
   import Input from "$lib/components/Input.svelte";
   import SEO from "$lib/components/SEO.svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
 
   export let form;
 
@@ -17,24 +17,15 @@
         case "success":
         case "redirect":
           isClicked = true;
-          toast.success("Registration successfully!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Registration successfully!");
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error("Invalid credentials");
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.error(result.error.message);
           break;
         default:
           await update();
@@ -120,7 +111,7 @@
         {#if !loading && !isClicked}
           <button
             type="submit"
-            class="btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
+            class="py-2.5 cursor-pointer bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 text-black btn-md w-full rounded-md m-auto font-semibold text-[1rem]"
           >
             <span>Register</span>
           </button>
diff --git a/src/routes/reset-password/+page.svelte b/src/routes/reset-password/+page.svelte
index 6bf8dda5..2de37a5d 100644
--- a/src/routes/reset-password/+page.svelte
+++ b/src/routes/reset-password/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { pb } from "$lib/pocketbase";
   import { goto } from "$app/navigation";
   import SEO from "$lib/components/SEO.svelte";
@@ -11,10 +12,7 @@
     event.preventDefault();
     try {
       await pb.collection("users").requestPasswordReset(email);
-      toast.success("Password resetted. Check your emails!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.success("Password resetted. Check your emails!");
       goto("/login");
     } catch (err) {
       toast.error(
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index 67d0eaf1..394d4d7e 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -2,7 +2,8 @@
   import { onMount, onDestroy } from "svelte";
   import { goto } from "$app/navigation";
   import { clearCache, screenWidth, getCache, setCache } from "$lib/store";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import {
     abbreviateNumber,
     sectorList,
@@ -1492,10 +1493,7 @@
     const output = await response.json();
 
     if (output === "success") {
-      toast.success("Strategy deleted successfully!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.success("Strategy deleted successfully!");
 
       strategyList =
         strategyList?.filter((item) => item?.id !== selectedStrategy) ?? [];
@@ -1530,10 +1528,7 @@
           ?.map((rule) => [rule.name, new Set(rule.value)]), // Create Map from filtered rules
       );
     } else if (output === "failure") {
-      toast.error("Something went wrong. Please try again", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Something went wrong. Please try again");
     }
   }
 
@@ -1547,18 +1542,12 @@
     const title = formData.get("title");
 
     if (!title || title.length === 0) {
-      toast.error("Title cannot be empty!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Title cannot be empty!");
       return;
     }
 
     if (title?.length > 100) {
-      toast.error("Title is too long. Keep it simple and concise bruv!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Title is too long. Keep it simple and concise bruv!");
       return;
     }
 
@@ -1579,10 +1568,7 @@
 
     const output = await response?.json();
     if (output?.id && output?.id?.length !== 0) {
-      toast.success("Strategy created successfully!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.success("Strategy created successfully!");
 
       const closePopup = document.getElementById("addStrategy");
       closePopup?.dispatchEvent(new MouseEvent("click"));
@@ -1593,10 +1579,7 @@
       strategyList?.unshift(output);
       selectedPopularStrategy = "";
     } else {
-      toast.error("Something went wrong. Please try again later!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Something went wrong. Please try again later!");
     }
 
     return output;
@@ -1709,10 +1692,7 @@
 
   function handleAddRule() {
     if (ruleName === "") {
-      toast.error("Please select a rule", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Please select a rule");
       return;
     }
 
@@ -1770,11 +1750,6 @@
       }
     } else {
       ruleOfList = [...ruleOfList, newRule];
-      /*
-    toast.success('Rule added', {
-      style: 'border-radius: 200px; background: #2A2E39; color: #fff;'
-    });
-    */
 
       await updateStockScreenerData();
     }
@@ -1929,10 +1904,7 @@ const handleKeyDown = (event) => {
         });
 
         if (printToast === true) {
-          toast.success("Strategy saved!", {
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
+          toast.success("Strategy saved!");
         }
 
         //isSaved = true;
@@ -3289,7 +3261,7 @@ const handleKeyDown = (event) => {
           <li>
             <button
               on:click={() => (displayTableTab = "filters")}
-              class="text-[1rem] sm:text-lg flex flex-row items-center relative block rounded-md px-2 py-1 sm:hover:bg-primary {displayTableTab ===
+              class="cursor-pointer text-[1rem] sm:text-lg flex flex-row items-center relative block rounded-md px-2 py-1 sm:hover:bg-primary {displayTableTab ===
               'filters'
                 ? 'font-semibold bg-primary'
                 : ''} focus:outline-hidden"
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 4daf9861..591528a1 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -22,7 +22,8 @@
 
   import { onMount, onDestroy, afterUpdate } from "svelte";
   import { page } from "$app/stores";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { convertTimestamp } from "$lib/utils";
   import AIScore from "$lib/components/AIScore.svelte";
   import PriceAlert from "$lib/components/PriceAlert.svelte";
diff --git a/src/routes/update-password/+page.svelte b/src/routes/update-password/+page.svelte
index e3dafeb5..86c70a42 100644
--- a/src/routes/update-password/+page.svelte
+++ b/src/routes/update-password/+page.svelte
@@ -1,6 +1,7 @@
 <script ts="lang">
   import { pb } from "$lib/pocketbase";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import Input from "$lib/components/Input.svelte";
   import { updatePasswordSchema } from "$lib/schemas";
   import { goto } from "$app/navigation";
diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte
index 3827f0c8..ef820d56 100644
--- a/src/routes/watchlist/+layout.svelte
+++ b/src/routes/watchlist/+layout.svelte
@@ -45,7 +45,9 @@
             Watchlist
           </h1>
 
-          <nav class=" border-b-[2px] overflow-x-auto whitespace-nowrap">
+          <nav
+            class=" border-b-[2px] border-gray-200 overflow-x-auto whitespace-nowrap"
+          >
             <ul
               class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
             >
diff --git a/src/routes/watchlist/options/+page.svelte b/src/routes/watchlist/options/+page.svelte
index a364d8f2..34aa83be 100644
--- a/src/routes/watchlist/options/+page.svelte
+++ b/src/routes/watchlist/options/+page.svelte
@@ -3,7 +3,7 @@
   import { abbreviateNumber } from "$lib/utils";
   import SEO from "$lib/components/SEO.svelte";
   import { onMount } from "svelte";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
 
   export let data;
   let editMode = false;
@@ -88,15 +88,9 @@
 
   async function handleDelete() {
     if (numberOfChecked === 0) {
-      toast.error(`You need to select symbols before you can delete them`, {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error(`You need to select symbols before you can delete them`);
     } else if (data?.getOptionsWatchlist?.id?.length === 0) {
-      toast.error(`You need to select symbols before you can delete them`, {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error(`You need to select symbols before you can delete them`);
     } else {
       optionsWatchlist = optionsWatchlist?.filter(
         (item) => !deleteOptionsId?.includes(item?.id),
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 9aef1983..cc5e18be 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -9,7 +9,8 @@
     calculateChange,
     removeCompanyStrings,
   } from "$lib/utils";
-  import toast from "svelte-french-toast";
+  import { toast } from "svelte-sonner";
+
   import { onMount, onDestroy, afterUpdate } from "svelte";
   import Input from "$lib/components/Input.svelte";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -19,6 +20,7 @@
   import { goto } from "$app/navigation";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import SEO from "$lib/components/SEO.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
   let timeoutId;
@@ -295,18 +297,12 @@
 
     // Validate the title input
     if (!title || title.toString().trim().length === 0) {
-      toast.error("Title cannot be empty!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Title cannot be empty!");
       return;
     }
 
     if (title.toString().length > 100) {
-      toast.error("Title is too long. Keep it simple and concise bruv!", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Title is too long. Keep it simple and concise bruv!");
       return;
     }
 
@@ -336,19 +332,11 @@
     });
 
     // Use toast.promise to display a loading toast, then a success or error message
-    toast.promise(
-      promise,
-      {
-        loading: "Creating watchlist...",
-        success: "Watchlist created successfully!",
-        error: (err) =>
-          err.message || "Something went wrong. Please try again!",
-      },
-      {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      },
-    );
+    toast.promise(promise, {
+      loading: "Creating watchlist...",
+      success: "Watchlist created successfully!",
+      error: (err) => err.message || "Something went wrong. Please try again!",
+    });
 
     try {
       const output = await promise;
@@ -420,10 +408,7 @@
       }
     } catch (error) {
       console.error("Error:", error);
-      toast.error("An error occurred. Please try again later.", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("An error occurred. Please try again later.");
     }
   }
 
@@ -452,10 +437,7 @@
 
   async function handleDeleteTickers() {
     if (numberOfChecked === 0) {
-      toast.error(`You need to select symbols before you can delete them`, {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error(`You need to select symbols before you can delete them`);
     } else {
       watchList = watchList?.filter(
         (item) => !deleteTickerList?.includes(item?.symbol),
@@ -521,10 +503,7 @@
 
     // Check if the ticker is already in the watchlist.
     if (watchList?.some((item) => item?.symbol === ticker)) {
-      toast.error("This symbol is already in your watchlist", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("This symbol is already in your watchlist");
       inputValue = "";
       return;
     }
@@ -555,18 +534,11 @@
     });
 
     // Use toast.promise to display notifications based on the promise's state.
-    toast.promise(
-      promise,
-      {
-        loading: "Updating watchlist...",
-        success: "Watchlist updated successfully!",
-        error: (err) => err.message || "Failed to update watchlist",
-      },
-      {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      },
-    );
+    toast.promise(promise, {
+      loading: "Updating watchlist...",
+      success: "Watchlist updated successfully!",
+      error: (err) => err.message || "Failed to update watchlist",
+    });
 
     try {
       // Await the promise, which returns the updated watchlist data.
@@ -624,10 +596,7 @@
 
       saveRules();
     } else {
-      toast.error("Only for Pro Members", {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
+      toast.error("Only for Pro Members");
     }
   }
 
@@ -1077,7 +1046,7 @@
 <section
   class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pt-5 pb-40"
 >
-  <div class="w-full overflow-hidden m-auto mt-5">
+  <div class="w-full overflow-hidden m-auto">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
@@ -1105,7 +1074,7 @@
                         class="min-w-[110px] w-full sm:w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2.5 text-white rounded truncate"
                       >
                         <span
-                          class="truncate font-semibold text-white text-sm sm:text-[1rem]"
+                          class="truncate font-medium text-white text-sm sm:text-[1rem]"
                           >{displayWatchList?.title !== undefined
                             ? displayWatchList?.title
                             : "Create Watchlist"}</span
@@ -1265,7 +1234,7 @@
                           stroke-linecap="round"
                           stroke-linejoin="round"
                           stroke-width="3"
-                          stroke="currentColor"
+                          stroke="#fff"
                           viewBox="0 0 24 24"
                           style="max-width: 40px"
                           aria-hidden="true"
@@ -1856,10 +1825,13 @@
                         </div>
                       {/each}
                     {:else}
-                      <span class="text-sm sm:text-[1rem]">
-                        No earnings yet. Add some stocks to the watchlist to see
-                        the latest earnings data.
-                      </span>
+                      <br />
+                      <div class="mt-3 sm:mt-0">
+                        <Infobox
+                          text="No earnings data available. Add some stocks to the watchlist to see
+                        the latest earnings data."
+                        />
+                      </div>
                     {/if}
                   </div>
                 </div>