From 6bca300fe583a6af9af55b70dba30a70fd4c820e Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 10 Mar 2025 20:53:09 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/FailToDeliver.svelte       | 100 +++++++++---------
 .../statistics/fail-to-deliver/+layout.svelte |  20 ++--
 .../statistics/fail-to-deliver/+page.svelte   |  32 +++---
 .../statistics/price-reaction/+page.svelte    |  10 +-
 4 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index 8e816972..ff9b4a2e 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -8,6 +8,7 @@
   import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
   import { goto } from "$app/navigation";
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
   export let data;
   export let rawData = [];
@@ -78,21 +79,21 @@
       },
       chart: {
         // Removed global type so each series can define its own type.
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360,
         animation: false,
       },
       title: {
         text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} FTD</h3>`,
         style: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
         },
         useHTML: true,
       },
       plotOptions: {
         series: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
           animation: false, // Disable series animation
           states: {
             hover: {
@@ -118,7 +119,7 @@
         borderRadius: 4,
         formatter: function () {
           // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
+          let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${new Date(
             this?.x,
           ).toLocaleDateString("en-US", {
             year: "numeric",
@@ -128,8 +129,8 @@
 
           // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
-            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+            tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span> 
+          <span class=" font-normal text-sm">${abbreviateNumber(
             point.y,
           )}</span><br>`;
           });
@@ -141,15 +142,13 @@
         endOnTick: false,
         categories: dates,
         crosshair: {
-          color: "#fff", // Set the color of the crosshair line
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
 
         labels: {
-          style: {
-            color: "#fff",
-          },
+          style: { color: $mode === "light" ? "black" : "white" },
           distance: 20, // Increases space between label and axis
           formatter: function () {
             return new Date(this.value).toLocaleDateString("en-US", {
@@ -163,7 +162,7 @@
       yAxis: [
         {
           gridLineWidth: 1,
-          gridLineColor: "#111827",
+          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
           labels: {
             enabled: false,
           },
@@ -174,7 +173,7 @@
         },
         {
           gridLineWidth: 1,
-          gridLineColor: "#111827",
+          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
           labels: {
             enabled: false,
           },
@@ -207,7 +206,7 @@
           name: "Price",
           type: "line",
           data: priceList,
-          color: "#fff",
+          color: $mode === "light" ? "#2C6288" : "#fff",
           marker: {
             enabled: false,
             states: {
@@ -225,29 +224,31 @@
   }
 
   $: {
-    const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
-    if (ticker) {
-      if (rawData?.length > 0) {
-        weightedFTD = (
-          (rawData?.slice(-1)?.at(0)?.failToDeliver /
-            data?.getStockQuote?.avgVolume) *
-          100
-        )?.toFixed(2);
-        config = getPlotOptions();
+    if ($stockTicker || $etfTicker || $mode) {
+      const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
+      if (ticker) {
+        if (rawData?.length > 0) {
+          weightedFTD = (
+            (rawData?.slice(-1)?.at(0)?.failToDeliver /
+              data?.getStockQuote?.avgVolume) *
+            100
+          )?.toFixed(2);
+          config = getPlotOptions();
+        }
       }
     }
   }
 </script>
 
-<section class="overflow-hidden text-white h-full pb-8">
+<section class="overflow-hidden h-full pb-8">
   <main class="overflow-hidden">
     <div class="flex flex-row items-center w-full mt-3">
-      <h1 class="text-xl sm:text-2xl text-white font-bold">FTD Chart</h1>
+      <h1 class="text-xl sm:text-2xl font-bold">FTD Chart</h1>
     </div>
 
     {#if rawData?.length !== 0}
       <div class="w-full flex flex-col items-start">
-        <div class="text-white text-[1rem] mt-2 mb-2 w-full">
+        <div class=" text-[1rem] mt-2 mb-2 w-full">
           Over the past year, {$displayCompanyName} has seen a monthly average of
           <span class="font-semibold"
             >{avgFailToDeliver?.toLocaleString("en-US")}
@@ -256,22 +257,20 @@
       </div>
 
       <div
-        class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
+        class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
         use:highcharts={config}
       ></div>
 
       <div
-        class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-800 sm:pt-2 sm:pb-2"
+        class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-300 dark:border-gray-800 sm:pt-2 sm:pb-2"
       >
-        <h3 class="text-xl sm:text-2xl text-white font-bold mb-2 sm:mb-0">
-          FTD History
-        </h3>
+        <h3 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-0">FTD History</h3>
 
         <div
           class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
         >
           <div
-            class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
+            class="bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
           >
             {#each tabs as item, i}
               {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@@ -286,7 +285,7 @@
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24"
                       ><path
-                        fill="#A3A3A3"
+                        fill="currentColor"
                         d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                       /></svg
                     >
@@ -307,7 +306,7 @@
                     class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
                     i
                       ? 'text-black'
-                      : 'text-white'}"
+                      : ''}"
                   >
                     {item.title}
                   </span>
@@ -320,24 +319,23 @@
 
       <div class="w-full overflow-x-auto">
         <table
-          class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto mt-4"
+          class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
         >
-          <thead class="bg-default">
+          <thead class="text-muted dark:text-white">
             <tr>
-              <th class="text-white font-semibold text-start text-sm">Date</th>
-              <th class="text-white font-semibold text-end text-sm">Price</th>
-              <th class="text-white font-semibold text-end text-sm"
-                >FTD Shares</th
-              >
-              <th class="text-white font-semibold text-end text-sm">% Change</th
-              >
+              <th class=" font-semibold text-start text-sm">Date</th>
+              <th class=" font-semibold text-end text-sm">Price</th>
+              <th class=" font-semibold text-end text-sm">FTD Shares</th>
+              <th class=" font-semibold text-end text-sm">% Change</th>
             </tr>
           </thead>
           <tbody>
             {#each tableList as item, index}
               <!-- row -->
-              <tr class="odd:bg-odd">
-                <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
+              <tr
+                class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
+              >
+                <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                   {new Date(item?.date)?.toLocaleDateString("en-US", {
                     day: "2-digit", // Include day number
                     month: "short", // Display short month name
@@ -346,24 +344,22 @@
                 </td>
 
                 <td
-                  class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                  class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
                 >
                   {item?.price}
                 </td>
 
                 <td
-                  class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                  class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
                 >
                   {abbreviateNumber(item?.failToDeliver)}
                 </td>
 
-                <td
-                  class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-end"
-                >
+                <td class=" text-sm sm:text-[1rem] whitespace-nowrap text-end">
                   {#if index === tableList?.length - 1}
                     n/a
                   {:else if item?.failToDeliver > tableList[index + 1]?.failToDeliver}
-                    <span class="text-[#00FC50]">
+                    <span class="text-green-600 dark:text-[#00FC50]">
                       +{(
                         ((item?.failToDeliver -
                           tableList[index + 1]?.failToDeliver) /
@@ -372,7 +368,7 @@
                       )?.toFixed(2)}%
                     </span>
                   {:else if item?.failToDeliver < tableList[index + 1]?.failToDeliver}
-                    <span class="text-[#FF2F1F]">
+                    <span class="text-red-600 dark:text-[#FF2F1F]">
                       -{(
                         Math.abs(
                           (item?.failToDeliver -
diff --git a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
index 46a01199..588b5fb3 100644
--- a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
@@ -21,18 +21,18 @@
         <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3>
-              <table class="table table-sm table-compact w-full text-white">
-                <thead class="text-white"
+              <table class="table table-sm table-compact w-full">
+                <thead class="text-muted dark:text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
+                      class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-left px-2"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
+                      class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-right px-2"
                       >FTD / Avg Volume</th
                     ></tr
                   ></thead
@@ -41,18 +41,18 @@
                   {#each similarStocks?.slice(0, 8) as item, index}
                     {#if item?.relativeFTD > 0}
                       <tr
-                        class="border-gray-800 text-[1rem] {index !==
+                        class="border-gray-300 dark:border-gray-800 text-[1rem] {index !==
                         similarStocks?.slice(0, 8).length - 1
                           ? 'border-b'
-                          : ''}"
+                          : ''} "
                         ><td class="text-left text-[1rem] px-2"
                           ><a
                             href={`/stocks/${item?.symbol}`}
-                            class="sm:hover:text-white text-blue-400"
+                            class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
                             >{item?.symbol}</a
                           ></td
                         >
-                        <td class="text-right cursor-normal text-[1rem] px-2"
+                        <td class="text-right text-[1rem] px-2"
                           >{item?.relativeFTD > 0.01
                             ? abbreviateNumber(item?.relativeFTD) + "%"
                             : "< 0.01%"}</td
@@ -65,7 +65,7 @@
               <div class="px-2">
                 <a
                   href="/list/most-ftd-shares"
-                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
                 >
                   Fail-to-Deliver Ranks
                 </a>
diff --git a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
index d4d7983e..3eb114f8 100644
--- a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
@@ -62,7 +62,7 @@
   description={`Historical Fail-to-Deliver shares of ${$displayCompanyName}.`}
 />
 
-<section class="bg-default w-full overflow-hidden text-white h-full">
+<section class=" w-full overflow-hidden h-full">
   <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -70,7 +70,7 @@
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
           <div class="mb-3">
-            <h1 class="text-xl sm:text-2xl text-white font-bold">
+            <h1 class="text-xl sm:text-2xl font-bold">
               {removeCompanyStrings($displayCompanyName)} Fail-to-Deliver
             </h1>
           </div>
@@ -80,20 +80,20 @@
               class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4"
             >
               <div
-                class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
               >
-                <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                <div class=" text-sm mb-2 flex items-center">
                   <span>Total FTD Shares</span>
                 </div>
                 <div class="flex items-baseline">
-                  <span class="text-xl font-bold text-white">
+                  <span class="text-xl font-bold">
                     {abbreviateNumber(
                       rawData?.slice(-1)?.at(0)?.failToDeliver,
                       false,
                     )}</span
                   >
                   <div class="flex flex-col ml-2">
-                    <span class="text-sm text-violet-400">
+                    <span class="text-sm text-violet-600 dark:text-violet-400">
                       {rawData?.slice(-1)?.at(0)?.failToDeliver > 1e5
                         ? "Above Average"
                         : "Below Average"}
@@ -103,13 +103,13 @@
               </div>
 
               <div
-                class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
               >
-                <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                <div class=" text-sm mb-2 flex items-center">
                   <span>FTD / Avg. Volume</span>
                 </div>
                 <div class="flex items-baseline">
-                  <span class="text-xl font-bold text-white"
+                  <span class="text-xl font-bold"
                     >{relativeFTD > 0.01
                       ? relativeFTD + "%"
                       : relativeFTD !== "n/a"
@@ -117,7 +117,7 @@
                         : "n/a"}</span
                   >
                   <div class="flex flex-col ml-2">
-                    <span class="text-sm text-red-400">
+                    <span class="text-sm text-red-600 dark:text-red-400">
                       {relativeFTD > 20 ? "High Impact" : "Low Impact"}
                     </span>
                   </div>
@@ -125,13 +125,13 @@
               </div>
 
               <div
-                class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
               >
-                <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                <div class=" text-sm mb-2 flex items-center">
                   <span>1-Year Change</span>
                 </div>
                 <div class="flex items-baseline">
-                  <span class="text-xl font-bold text-white"
+                  <span class="text-xl font-bold"
                     >{changePercentageYearAgo > 100
                       ? "> 100"
                       : changePercentageYearAgo?.toFixed(1)}%</span
@@ -140,11 +140,11 @@
                     <span
                       class="text-sm {changePercentageYearAgo >= 0 &&
                       changePercentageYearAgo !== null
-                        ? "before:content-['+'] text-[#00FC50]"
+                        ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                         : changePercentageYearAgo < 0 &&
                             changePercentageYearAgo !== null
-                          ? 'text-[#FF2F1F]'
-                          : 'text-white'}"
+                          ? 'text-red-600 dark:text-[#FF2F1F]'
+                          : ''}"
                     >
                       {changePercentageYearAgo >= 0 ? "Positive" : "Negative"} Trend
                     </span>
diff --git a/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte b/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte
index 1cb69eda..b2571126 100644
--- a/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte
@@ -102,7 +102,7 @@
                       >{`${earningsData?.positiveEpsSurprises}/${earningsData?.totalReports}`}
                       quarters</span
                     >
-                    <span class="text-xs text-violet-400">
+                    <span class="text-xs text-violet-700 dark:text-violet-400">
                       {earningsData?.positiveEpsSurprises >
                       earningsData?.totalReports / 2
                         ? "Above Average"
@@ -145,18 +145,18 @@
                 </div>
                 <div class="flex items-baseline">
                   <span class="text-2xl font-bold"
-                    >{metrics.avgPriceImpact >= 0
+                    >{metrics?.avgPriceImpact >= 0
                       ? "+"
-                      : ""}{metrics.avgPriceImpact}%</span
+                      : ""}{metrics?.avgPriceImpact}%</span
                   >
                   <div class="flex flex-col ml-2">
                     <span class="text-sm">Next Day</span>
                     <span
-                      class="text-xs text-{metrics.avgPriceImpact >= 0
+                      class="text-xs text-{metrics?.avgPriceImpact >= 0
                         ? 'green'
                         : 'red'}-400"
                     >
-                      {metrics.avgPriceImpact >= 0 ? "Positive" : "Negative"} Trend
+                      {metrics?.avgPriceImpact >= 0 ? "Positive" : "Negative"} Trend
                     </span>
                   </div>
                 </div>