From 040cb5e39babc627998aff4cc6255d3b109ead02 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 3 Apr 2025 16:51:46 +0200
Subject: [PATCH] ui fix

---
 .../components/Options/GreekExposure.svelte   | 66 ++++++++++++-------
 src/lib/components/Options/Volatility.svelte  | 32 +++++++--
 src/lib/components/Table/DarkPoolTable.svelte |  2 +-
 .../components/Table/OptionsFlowTable.svelte  |  6 +-
 src/routes/options-flow/+page.svelte          |  2 +-
 .../stocks/[tickerID]/statistics/+page.svelte | 62 +++++------------
 6 files changed, 89 insertions(+), 81 deletions(-)

diff --git a/src/lib/components/Options/GreekExposure.svelte b/src/lib/components/Options/GreekExposure.svelte
index 5c65fad6..173d8f9a 100644
--- a/src/lib/components/Options/GreekExposure.svelte
+++ b/src/lib/components/Options/GreekExposure.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { abbreviateNumberWithColor, abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumber } from "$lib/utils";
   import { onMount } from "svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@@ -99,6 +99,9 @@
       timePeriod,
     );
 
+    const fillColorStart = "rgb(70, 129, 244,0.5)";
+    const fillColorEnd = "rgb(70, 129, 244,0.001)";
+
     const options = {
       credits: {
         enabled: false,
@@ -110,7 +113,7 @@
         animation: false,
       },
       title: {
-        text: `<h3 class="mt-3 mb-1 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
+        text: `<h3 class="mt-3 -mb-2 ">${title === "Gamma" ? "GEX" : "DEX"} Chart</h3>`,
         style: {
           color: $mode === "light" ? "black" : "white",
           // Using inline CSS for margin-top and margin-bottom
@@ -208,6 +211,25 @@
         },
       ],
       series: [
+        {
+          name: "Stock Price",
+          type: "area",
+          data: priceList,
+          yAxis: 1,
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [0, fillColorStart],
+              [1, fillColorEnd],
+            ],
+          },
+          color: "#4681f4",
+          borderColor: "4681f4",
+          lineWidth: 1.3,
+          zIndex: 10,
+          marker: { enabled: false },
+          animation: false,
+        },
         {
           name: title,
           type: "column",
@@ -217,19 +239,19 @@
           borderRadius: "1px",
           animation: false,
         },
-        {
-          name: "Price",
-          type: "line",
-          data: priceList,
-          yAxis: 1,
-          color: $mode === "light" ? "#3B82F6" : "white",
-          lineWidth: 2,
-          zIndex: 10,
-          marker: { enabled: false },
-          animation: 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
+      },
       plotOptions: {
         series: {
           animation: false,
@@ -447,35 +469,29 @@
               {formatDate(item?.date)}
             </td>
             <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
-              {@html abbreviateNumberWithColor(
+              {abbreviateNumber(
                 title === "Gamma" ? item?.call_gex : item?.call_dex,
-                false,
-                true,
               )}
             </td>
             <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
-              {@html abbreviateNumberWithColor(
+              {abbreviateNumber(
                 title === "Gamma" ? item?.put_gex : item?.put_dex,
-                false,
-                true,
               )}
             </td>
 
             <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
-              {@html abbreviateNumberWithColor(
+              {abbreviateNumber(
                 title === "Gamma" ? item?.netGex : item?.netDex,
-                false,
-                true,
               )}
             </td>
 
             <td class=" text-sm sm:text-[1rem] text-end whitespace-nowrap">
               {#if item?.putCallRatio <= 1 && item?.putCallRatio !== null}
-                <span class="text-green-800 dark:text-[#00FC50]"
+                <span class="dark:text-[#00FC50]"
                   >{item?.putCallRatio?.toFixed(2)}</span
                 >
               {:else if item?.putCallRatio >= 0 && item?.putCallRatio !== null}
-                <span class="text-red-800 dark:text-[#FF2F1F]"
+                <span class=" dark:text-[#FF2F1F]"
                   >{item?.putCallRatio?.toFixed(2)}</span
                 >
               {:else}
diff --git a/src/lib/components/Options/Volatility.svelte b/src/lib/components/Options/Volatility.svelte
index b2519c4c..03009ea6 100644
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@@ -91,6 +91,9 @@
       priceList,
     } = filterDataByPeriod(data, timePeriod);
 
+    const fillColorStart = "rgb(70, 129, 244,0.5)";
+    const fillColorEnd = "rgb(70, 129, 244,0.001)";
+
     const options = {
       chart: {
         backgroundColor: $mode === "light" ? "#fff" : "#09090B",
@@ -98,9 +101,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">Volatiltiy Exposure</h3>`,
+        text: `<h3 class="mt-3 -mb-2 text-[1rem] sm:text-lg">Volatiltiy Exposure</h3>`,
         useHTML: true,
         style: { color: $mode === "light" ? "black" : "white" },
       },
@@ -219,11 +233,19 @@
       series: [
         {
           name: "Stock Price",
-          type: "spline", // smooth line
+          type: "area", // smooth line
           data: priceList,
           yAxis: 1,
-          lineWidth: 2,
-          color: $mode === "light" ? "black" : "white",
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [0, fillColorStart],
+              [1, fillColorEnd],
+            ],
+          },
+          color: "#4681f4",
+          borderColor: "4681f4",
+          lineWidth: 1.3,
           animation: false,
         },
         {
diff --git a/src/lib/components/Table/DarkPoolTable.svelte b/src/lib/components/Table/DarkPoolTable.svelte
index 9cf7df2d..aca9571d 100644
--- a/src/lib/components/Table/DarkPoolTable.svelte
+++ b/src/lib/components/Table/DarkPoolTable.svelte
@@ -352,7 +352,7 @@
         {style}
         class="grid grid-cols-10 gap-0"
         class:bg-[#fff]={index % 2 === 0 && $mode === "light"}
-        class:bg-[#19191F]={index % 2 === 0 && $mode !== "light"}
+        class:bg-[#09090B]={index % 2 === 0 && $mode !== "light"}
         class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"}
         class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
         class:opacity-30={index + 1 === rawData?.length &&
diff --git a/src/lib/components/Table/OptionsFlowTable.svelte b/src/lib/components/Table/OptionsFlowTable.svelte
index b9255313..38f3baa0 100644
--- a/src/lib/components/Table/OptionsFlowTable.svelte
+++ b/src/lib/components/Table/OptionsFlowTable.svelte
@@ -234,12 +234,12 @@
   }
 </script>
 
-<div class="w-full overflow-x-auto text-muted dark:text-white">
+<div class="w-full overflow-x-auto">
   <!-- Set a min-width on smaller screens so the grid can show all columns -->
   <div class="min-w-[1000px]">
     <!-- Header row using grid -->
     <div
-      class="grid grid-cols-16 sticky top-0 z-10 border border-gray-300 dark:border-gray-800 bg-white dark:bg-default font-bold text-xs uppercase"
+      class="grid grid-cols-16 sticky top-0 z-10 border border-gray-300 dark:border-gray-800 font-bold text-xs uppercase"
     >
       <div
         on:click={() => sortData("time")}
@@ -590,7 +590,7 @@
         {style}
         class="grid grid-cols-16 gap-0"
         class:bg-[#fff]={index % 2 === 0 && $mode === "light"}
-        class:bg-[#19191F]={index % 2 === 0 && $mode !== "light"}
+        class:bg-[#09090B]={index % 2 === 0 && $mode !== "light"}
         class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"}
         class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
         class:opacity-30={index + 1 === rawData?.length &&
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index b00e8281..531890e9 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -831,7 +831,7 @@
   description="Explore unusual options from big institutional traders and hedge funds."
 />
 
-<body class="overflow-y-auto text-muted dark:text-white">
+<body class="overflow-y-auto">
   <section
     class="w-full max-w-screen sm:max-w-7xl sm:max-w-[1400px] flex justify-center items-center pb-20 10 p-3 sm:p-0"
   >
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte
index b630f0ed..10ff91b0 100644
--- a/src/routes/stocks/[tickerID]/statistics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte
@@ -54,9 +54,7 @@
                 shares outstanding. The number of shares has increased by {rawData?.sharesYoY}%
                 in one year.
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -144,9 +142,7 @@
                 )}, so {rawData?.shortOutStandingPercent}% of the outstanding
                 shares have been sold short.
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -197,9 +193,7 @@
                   : ""}
               </p>
 
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -283,9 +277,7 @@
                   Currently the Enterprise Value (EV) is not available for {companyName}.
                 {/if}
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -329,9 +321,7 @@
                 The company has a current ratio of {rawData?.currentRatio}, with
                 a Debt / Equity ratio of {rawData?.debtToEquityRatio}.
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -402,9 +392,7 @@
                   "percent",
                 )}.
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -483,9 +471,7 @@
             </div>
             <div>
               <h2 class="mb-2 px-0.5 text-xl font-bold">Taxes</h2>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -520,9 +506,7 @@
                   ? "higher"
                   : "lower"} than the market average.
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -589,9 +573,7 @@
                   in profits. Earnings per share was {rawData?.eps}.
                 {/if}
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -675,9 +657,7 @@
                   false,
                 )}.
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -760,9 +740,7 @@
                   false,
                 )}.
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -822,9 +800,7 @@
                   )} and {checkValue(rawData?.netProfitMargin, "percent")}.
                 {/if}
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -926,9 +902,7 @@
                   {$stockTicker} does not appear to pay any dividends at this time.
                 {/if}
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -1019,9 +993,7 @@
                   Currently there are no analyst rating for {$stockTicker}.
                 {/if}
               </p>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
@@ -1094,7 +1066,7 @@
                   split with a ratio of {rawData?.splitRatio}.
                 </p>
                 <table
-                  class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
+                  class="w-full border border-gray-300 dark:border-gray-800"
                 >
                   <tbody
                     ><tr
@@ -1139,9 +1111,7 @@
             {/if}
             <div>
               <h2 class="mb-2 px-0.5 text-xl font-bold">Scores</h2>
-              <table
-                class="w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800"
-              >
+              <table class="w-full border border-gray-300 dark:border-gray-800">
                 <tbody
                   ><tr
                     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"