From 625150ceef9ea94e35ac2d73723502500367a5ac Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 30 Mar 2025 15:45:22 +0200
Subject: [PATCH] ui fix

---
 .../DarkPool/HistoricalVolume.svelte          | 13 +++-
 src/lib/components/DarkPool/PriceLevel.svelte | 32 +++++----
 .../components/DarkPool/RealtimeTrade.svelte  | 66 +++++++++++--------
 src/lib/components/InfoModal.svelte           | 14 ++--
 4 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/src/lib/components/DarkPool/HistoricalVolume.svelte b/src/lib/components/DarkPool/HistoricalVolume.svelte
index 7711bcb6..b31328de 100644
--- a/src/lib/components/DarkPool/HistoricalVolume.svelte
+++ b/src/lib/components/DarkPool/HistoricalVolume.svelte
@@ -85,14 +85,23 @@
         animation: false,
       },
       title: {
-        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
+        text: `<h3 class="mt-3 -mb-3 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} Historical Chart</h3>`,
         style: {
           color: $mode === "light" ? "black" : "white",
         },
         useHTML: true,
       },
       legend: {
-        enabled: false,
+        enabled: true,
+        align: "center", // Positions legend at the left edge
+        verticalAlign: "top", // Positions legend at the top
+        layout: "horizontal", // Align items horizontally (use 'vertical' if preferred)
+        itemStyle: {
+          color: $mode === "light" ? "black" : "white",
+        },
+        symbolWidth: 16, // Controls the width of the legend symbol
+        symbolRadius: 8, // Creates circular symbols (adjust radius as needed)
+        squareSymbol: false, // Ensures symbols are circular, not square
       },
       xAxis: {
         type: "datetime",
diff --git a/src/lib/components/DarkPool/PriceLevel.svelte b/src/lib/components/DarkPool/PriceLevel.svelte
index d5aabd85..5f488b14 100644
--- a/src/lib/components/DarkPool/PriceLevel.svelte
+++ b/src/lib/components/DarkPool/PriceLevel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
   import highcharts from "$lib/highcharts.ts";
   import RealtimeTrade from "$lib/components/DarkPool/RealtimeTrade.svelte";
   import { mode } from "mode-watcher";
@@ -47,7 +47,7 @@
         endonTick: false,
         categories: yAxis,
         crosshair: {
-          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
+          color: $mode === "light" ? "#545454" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
@@ -84,7 +84,7 @@
             return abbreviateNumber(this?.value);
           },
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "#545454" : "white",
           },
         },
       },
@@ -102,7 +102,7 @@
         borderRadius: 4,
         formatter: function () {
           // Format the x value to display time in hh:mm format
-          let tooltipContent = `<span class=" m-auto  text-[1rem] font-[501]">Price Level ${this?.x}</span><br>`;
+          let tooltipContent = `<span class=" m-auto  text-sm font-[501]">Price Level ${this?.x}</span><br>`;
 
           // Loop through each point in the shared tooltip
           this.points?.forEach((point) => {
@@ -150,19 +150,17 @@
     {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
       <div class="w-full flex flex-col items-start">
         <div class=" text-[1rem] mt-2 w-full">
-          {$displayCompanyName} has seen an average dark pool trade size of {abbreviateNumber(
-            metrics?.avgTradeSize,
-            false,
-            true,
-          )} and an average premium per trade of {abbreviateNumber(
-            metrics?.avgPremTrade,
-            false,
-            true,
-          )}, with a total premium of {abbreviateNumber(
-            metrics?.totalPrem,
-            false,
-            true,
-          )}.
+          {removeCompanyStrings($displayCompanyName)} has seen an average dark pool
+          trade size of
+          <strong
+            >{Math.floor(metrics?.avgTradeSize)?.toLocaleString(
+              "en-US",
+            )}</strong
+          >
+          and an average premium per trade of
+          <strong>${abbreviateNumber(metrics?.avgPremTrade)}</strong>, with a
+          total premium of
+          <strong>${abbreviateNumber(metrics?.totalPrem)}</strong>.
         </div>
       </div>
 
diff --git a/src/lib/components/DarkPool/RealtimeTrade.svelte b/src/lib/components/DarkPool/RealtimeTrade.svelte
index 5424db86..c374eca4 100644
--- a/src/lib/components/DarkPool/RealtimeTrade.svelte
+++ b/src/lib/components/DarkPool/RealtimeTrade.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { stockTicker, etfTicker, screenWidth } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
   import highcharts from "$lib/highcharts.ts";
   import { mode } from "mode-watcher";
 
@@ -67,6 +68,9 @@
     let yMin = minValue * (1 - padding) === 0 ? null : minValue * (1 - padding);
     let yMax = maxValue * (1 + padding) === 0 ? null : maxValue * (1 + padding);
 
+    const fillColorStart = "rgb(70, 129, 244,0.5)";
+    const fillColorEnd = "rgb(70, 129, 244,0.001)";
+
     const options = {
       chart: {
         backgroundColor: $mode === "light" ? "#fff" : "#09090B",
@@ -74,9 +78,20 @@
         height: 360,
       },
       credits: { enabled: false },
-      legend: { enabled: false },
+      legend: {
+        enabled: true,
+        align: "center", // Positions legend at the left edge
+        verticalAlign: "top", // Positions legend at the top
+        layout: "horizontal", // Align items horizontally (use 'vertical' if preferred)
+        itemStyle: {
+          color: $mode === "light" ? "black" : "white",
+        },
+        symbolWidth: 16, // Controls the width of the legend symbol
+        symbolRadius: 8, // Creates circular symbols (adjust radius as needed)
+        squareSymbol: false, // Ensures symbols are circular, not square
+      },
       title: {
-        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">Realtime Dark Pool Trades Impact</h3>`,
+        text: `<h3 class="mt-3 -mb-3 text-[1rem] sm:text-lg">Realtime Dark Pool Trades Impact</h3>`,
         useHTML: true,
         style: { color: $mode === "light" ? "black" : "white" },
       },
@@ -91,7 +106,7 @@
           dashStyle: "Solid",
         },
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
           distance: 20,
           formatter: function () {
             const date = new Date(this?.value);
@@ -108,7 +123,7 @@
           min: yMin ?? null,
           max: yMax ?? null,
           title: { text: null },
-          labels: { style: { color: $mode === "light" ? "black" : "white" } },
+          labels: { style: { color: $mode === "light" ? "#545454" : "white" } },
           gridLineWidth: 1,
           gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
           opposite: true,
@@ -116,9 +131,9 @@
         {
           title: {
             text: $screenWidth < 640 ? null : "Total Trades",
-            style: { color: $mode === "light" ? "black" : "white" },
+            style: { color: $mode === "light" ? "#545454" : "white" },
           },
-          labels: { style: { color: $mode === "light" ? "black" : "white" } },
+          labels: { style: { color: $mode === "light" ? "#545454" : "white" } },
           gridLineWidth: 0,
           opposite: false,
         },
@@ -126,39 +141,32 @@
       tooltip: {
         shared: true,
         useHTML: true,
-        backgroundColor: "rgba(0, 0, 0, 0.8)",
-        borderColor: "rgba(255, 255, 255, 0.2)",
+        backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
+        borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
         borderWidth: 1,
         style: {
-          color: "#fff",
+          color: $mode === "light" ? "black" : "white",
           fontSize: "16px",
           padding: "10px",
         },
         borderRadius: 4,
         formatter: function () {
-          // Create a Date object from the x value and format it as time
           const date = new Date(this?.x);
-          let formattedTime = date.toLocaleTimeString("en-US", {
+          let formattedDate = date?.toLocaleTimeString("en-US", {
             hour: "2-digit",
             minute: "2-digit",
           });
 
-          // Build the tooltip content starting with the formatted time
-          let tooltipContent = `<span class="m-auto text-sm text-white">${formattedTime}</span><br>`;
+          let tooltipContent = `<span class="text-white m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
 
-          // Loop through each point and add its details, excluding "Dark Pool Volume"
+          // Loop through each point in the shared tooltip
           this.points?.forEach((point) => {
-            if (point.series.name !== "Dark Pool Volume") {
-              tooltipContent += `
-          <span class="font-semibold text-sm">${point.series.name}:</span> 
-          <span class="font-normal text-sm"><b>${point.y}</b></span><br>`;
-            }
+            tooltipContent += `<span class="text-white text-sm font-[501]">${point.series.name}: ${abbreviateNumber(point.y)}</span><br>`;
           });
 
           return tooltipContent;
         },
       },
-
       plotOptions: {
         series: {
           animation: false,
@@ -185,19 +193,25 @@
       series: [
         {
           name: "Price",
-          type: "line",
+          type: "area",
           data: seriesData,
-          color: $mode === "light" ? "blue" : "white",
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [0, fillColorStart],
+              [1, fillColorEnd],
+            ],
+          },
+          color: "#4681f4",
           lineWidth: 1.3,
           yAxis: 0, // Use primary yAxis
           animation: false,
         },
         {
-          name: "Dark Pool Volume",
+          name: "DP Volume",
           type: "column",
           data: darkPoolSeries,
-          color:
-            data?.getStockQuote?.changesPercentage >= 0 ? "#04D347" : "#E11D48",
+          color: "#F21C64",
           yAxis: 1, // Use secondary yAxis
           animation: false,
         },
@@ -220,7 +234,7 @@
       <div
         class="{!['Pro']?.includes(data?.user?.tier)
           ? 'blur-[3px]'
-          : ''} mt-5 shadow-sm sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
+          : ''} mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
         use:highcharts={config}
       ></div>
       <!-- Overlay with "Upgrade to Pro" -->
diff --git a/src/lib/components/InfoModal.svelte b/src/lib/components/InfoModal.svelte
index 8dcfe2dd..e51c95be 100644
--- a/src/lib/components/InfoModal.svelte
+++ b/src/lib/components/InfoModal.svelte
@@ -7,12 +7,12 @@
 <div class="relative">
   <label
     for={id}
-    class="absolute -bottom-1 left-0 cursor-pointer p-1 text-gray-800 sm:hover:text-white"
+    class="absolute -bottom-1 left-0 cursor-pointer p-1 text-gray-500 dark:text-gray-300 dark:sm:hover:text-white"
   >
     <svg
       class="h-[10.5px] w-[10.5px]"
       viewBox="0 0 4 16"
-      fill="white"
+      fill="currentColor"
       style="max-width:20px"
     >
       <path
@@ -30,18 +30,18 @@
 
   <!-- Desktop modal content -->
   <div
-    class="modal-box rounded-md border border-gray-600 w-full bg-secondary flex flex-col items-center"
+    class="modal-box rounded-md border border-gray-300 dark:border-gray-600 w-full bg-white dark:bg-secondary flex flex-col items-center"
   >
     <div class="mx-auto h-1.5 w-20 shrink-0 rounded-full" />
-    <div class="text-white mb-5 text-center">
+    <div class=" mb-5 text-center">
       <h3 class="font-bold text-xl sm:text-2xl mb-5">{title}</h3>
-      <span class="text-white text-[1rem] font-normal">{@html content}</span>
+      <span class=" text-[1rem] font-normal">{@html content}</span>
     </div>
 
-    <div class="border-t border-gray-600 mt-2 w-full">
+    <div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
       <label
         for={id}
-        class="mt-4 font-semibold text-white text-xl m-auto flex justify-center cursor-pointer"
+        class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
       >
         Close
       </label>