update toast

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",

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",

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", {
+      toast.error("Please enter your feedback");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       return;
     }
 
     if (rating?.length === 0 && category === "general") {
-      toast.error("Please select an emoji", {
+      toast.error("Please select an emoji");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       return;
     }
 

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,50 +28,7 @@
 
   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) {
@@ -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">
+    <label for={id} class="label py-0 pt-1 text-xs">
-      <span class="label-text-alt text-error">
+      <span class="text-error">
         {errors}
       </span>
     </label>

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!", {
+          toast.success("Login successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
+          toast.error("Invalid credentials");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
+          toast.error(result.error.message);
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           break;
         default:
           await update();
@@ -65,24 +57,15 @@
         case "success":
         case "redirect":
           isClicked = true;
-          toast.success("Registration successfully!", {
+          toast.success("Registration successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
+          toast.error("Invalid credentials");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
+          toast.error(result.error.message);
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           break;
         default:
           await update();

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", {
+      toast.error("Target Price must be above zero");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       return;
     }
 

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;
 

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", {
+      toast.error("Only for Pro Members");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
   }
 
@@ -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>

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;

src/lib/components/shadcn/sonner/index.ts

@@ -1 +0,0 @@
-export { default as Toaster } from "./sonner.svelte";

src/lib/components/shadcn/sonner/sonner.svelte

@@ -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}
-/>

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}

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";

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";
 

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;

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";
 

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!", {
+            toast.success("Login successfully!");
-              style:
-                "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-            });
             await update();
             break;
           }
         case "redirect":
           isClicked = true;
-          toast.success("Login successfully!", {
+          toast.success("Login successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
+          toast.error("Invalid credentials");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
+          toast.error(result.error.message);
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           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>

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", {
+      toast.error("Please select a rule");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       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`, {
+      toast.error(`Market is closed`);
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
   }
 
@@ -783,10 +773,7 @@
         }
       }
     } else {
-      toast.error("Only for Pro Members", {
+      toast.error("Only for Pro Members");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
   };
 

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`, {
+      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;",
-      });
     } else {
-      toast.success(`Price alerts deleted successfully`, {
+      toast.success(`Price alerts deleted successfully`);
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
 
       const symbolsToDelete = priceAlertList
         ?.filter((item) => deletePriceAlertList.includes(item.id))

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!", {
+          toast.success("Subscription Cancelled successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "redirect":
-          toast.success("Subscription Cancelled successfully!", {
+          toast.success("Subscription Cancelled successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "failure":
-          toast.error("Something went wrong.", {
+          toast.error("Something went wrong.");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
+          toast.error(result.error.message);
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           break;
         default:
           await update();
@@ -83,31 +72,19 @@
     return async ({ result, update }) => {
       switch (result.type) {
         case "success":
-          toast.success("Subscription Reactivate successfully!", {
+          toast.success("Subscription Reactivate successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "redirect":
-          toast.success("Subscription Reactivate successfully!", {
+          toast.success("Subscription Reactivate successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "failure":
-          toast.error("Something went wrong.", {
+          toast.error("Something went wrong.");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
+          toast.error(result.error.message);
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           break;
         default:
           await update();
@@ -129,31 +106,19 @@
     return async ({ result, update }) => {
       switch (result.type) {
         case "success":
-          toast.success("Changing to Annual Plan successfully!", {
+          toast.success("Changing to Annual Plan successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "redirect":
-          toast.success("Changing to Annual Plan successfully!", {
+          toast.success("Changing to Annual Plan successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "failure":
-          toast.error("Something went wrong.", {
+          toast.error("Something went wrong.");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
+          toast.error(result.error.message);
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           break;
         default:
           await update();
@@ -196,15 +161,9 @@
     const output = await subscribeUser();
     if (output?.success === true) {
       isPushSubscribed = true;
-      toast.success("Push notification activated successfully!", {
+      toast.success("Push notification activated successfully!");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     } else {
-      toast.error("Your browser does not support push notifications...", {
+      toast.error("Your browser does not support push notifications...");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
     loading = false;
   }

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!", {
+          toast.success("Registration successfully!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "failure":
-          toast.error("Invalid credentials", {
+          toast.error("Invalid credentials");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           await update();
           break;
         case "error":
-          toast.error(result.error.message, {
+          toast.error(result.error.message);
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
           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>

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!", {
+      toast.success("Password resetted. Check your emails!");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       goto("/login");
     } catch (err) {
       toast.error(

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!", {
+      toast.success("Strategy deleted successfully!");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
 
       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", {
+      toast.error("Something went wrong. Please try again");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
   }
 
@@ -1547,18 +1542,12 @@
     const title = formData.get("title");
 
     if (!title || title.length === 0) {
-      toast.error("Title cannot be empty!", {
+      toast.error("Title cannot be empty!");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       return;
     }
 
     if (title?.length > 100) {
-      toast.error("Title is too long. Keep it simple and concise bruv!", {
+      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;",
-      });
       return;
     }
 
@@ -1579,10 +1568,7 @@
 
     const output = await response?.json();
     if (output?.id && output?.id?.length !== 0) {
-      toast.success("Strategy created successfully!", {
+      toast.success("Strategy created successfully!");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
 
       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!", {
+      toast.error("Something went wrong. Please try again later!");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
 
     return output;
@@ -1709,10 +1692,7 @@
 
   function handleAddRule() {
     if (ruleName === "") {
-      toast.error("Please select a rule", {
+      toast.error("Please select a rule");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       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!", {
+          toast.success("Strategy saved!");
-            style:
-              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-          });
         }
 
         //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"

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";

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";

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"
             >

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`, {
+      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;",
-      });
     } else if (data?.getOptionsWatchlist?.id?.length === 0) {
-      toast.error(`You need to select symbols before you can delete them`, {
+      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;",
-      });
     } else {
       optionsWatchlist = optionsWatchlist?.filter(
         (item) => !deleteOptionsId?.includes(item?.id),

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!", {
+      toast.error("Title cannot be empty!");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       return;
     }
 
     if (title.toString().length > 100) {
-      toast.error("Title is too long. Keep it simple and concise bruv!", {
+      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;",
-      });
       return;
     }
 
@@ -336,19 +332,11 @@
     });
 
     // Use toast.promise to display a loading toast, then a success or error message
-    toast.promise(
+    toast.promise(promise, {
-      promise,
-      {
       loading: "Creating watchlist...",
       success: "Watchlist created successfully!",
-        error: (err) =>
+      error: (err) => err.message || "Something went wrong. Please try again!",
-          err.message || "Something went wrong. Please try again!",
+    });
-      },
-      {
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      },
-    );
 
     try {
       const output = await promise;
@@ -420,10 +408,7 @@
       }
     } catch (error) {
       console.error("Error:", error);
-      toast.error("An error occurred. Please try again later.", {
+      toast.error("An error occurred. Please try again later.");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
   }
 
@@ -452,10 +437,7 @@
 
   async function handleDeleteTickers() {
     if (numberOfChecked === 0) {
-      toast.error(`You need to select symbols before you can delete them`, {
+      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;",
-      });
     } 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", {
+      toast.error("This symbol is already in your watchlist");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
       inputValue = "";
       return;
     }
@@ -555,18 +534,11 @@
     });
 
     // Use toast.promise to display notifications based on the promise's state.
-    toast.promise(
+    toast.promise(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;",
-      },
-    );
 
     try {
       // Await the promise, which returns the updated watchlist data.
@@ -624,10 +596,7 @@
 
       saveRules();
     } else {
-      toast.error("Only for Pro Members", {
+      toast.error("Only for Pro Members");
-        style:
-          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
-      });
     }
   }
 
@@ -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]">
+                      <br />
-                        No earnings yet. Add some stocks to the watchlist to see
+                      <div class="mt-3 sm:mt-0">
-                        the latest earnings data.
+                        <Infobox
-                      </span>
+                          text="No earnings data available. Add some stocks to the watchlist to see
+                        the latest earnings data."
+                        />
+                      </div>
                     {/if}
                   </div>
                 </div>