ui fix

src/lib/components/InfoModal.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   export let title;
   export let content;
   export let id;

src/lib/components/Infobox.svelte

@@ -19,7 +19,7 @@
   >
   <div class="ml-3 w-full">
     <div class="flex w-full flex-row justify-between">
-      <div>
+      <div class="p-3 sm:p-0 text-sm sm:text-[1rem]">
         {@html text}
       </div>
     </div>

src/lib/components/Table/DarkPoolTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { screenWidth } from "$lib/store";
-  import { abbreviateNumber, sectorNavigation } from "$lib/utils";
+  import { abbreviateNumberWithColor, sectorNavigation } from "$lib/utils";
 
   import VirtualList from "svelte-tiny-virtual-list";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@@ -416,7 +416,9 @@
           style="justify-content: center; "
           class=" td w-full text-white text-xs sm:text-sm whitespace-nowrap m-auto"
         >
-          {formatToNewYorkTime(displayedData[index]?.date)}
+          {$screenWidth < 640
+            ? formatToNewYorkTime(displayedData[index]?.date)?.slice(0, -3)
+            : formatToNewYorkTime(displayedData[index]?.date)}
         </div>
         <div
           on:click|stopPropagation
@@ -440,7 +442,11 @@
           style="justify-content: center;"
           class="td text-sm sm:text-[1rem] text-start text-white"
         >
-          {@html abbreviateNumber(displayedData[index]?.premium, true, true)}
+          {@html abbreviateNumberWithColor(
+            displayedData[index]?.premium,
+            true,
+            true,
+          )}
         </div>
 
         <div
@@ -457,7 +463,11 @@
           style="justify-content: center;"
           class="td text-sm sm:text-[1rem] text-white text-end"
         >
-          {@html abbreviateNumber(displayedData[index]?.volume, false, true)}
+          {@html abbreviateNumberWithColor(
+            displayedData[index]?.volume,
+            false,
+            true,
+          )}
         </div>
 
         <div

src/lib/components/Table/OptionsFlowTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { abbreviateNumberWithColor } from "$lib/utils";
 
   import VirtualList from "svelte-tiny-virtual-list";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@@ -695,7 +695,7 @@
           style="justify-content: center;"
           class="td text-sm sm:text-[1rem] text-start text-white"
         >
-          {@html abbreviateNumber(
+          {@html abbreviateNumberWithColor(
             displayedData[index]?.cost_basis,
             false,
             true,

src/lib/utils.ts

@@ -608,7 +608,8 @@ export function formatString(inputString) {
   return formattedString;
 }
 
-export function abbreviateNumber(number, addDollarSign = false, color = false) {
+
+export function abbreviateNumberWithColor(number, addDollarSign = false, color = false) {
   // Check if number is null or undefined, return "-" if true
   if (number == null) {
     return "-";
@@ -685,6 +686,69 @@ if (color) {
 }
 
 
+export function abbreviateNumber(number, addDollarSign = false) {
+  // Check if number is null or undefined, return "-" if true
+  if (number == null) {
+    return "-";
+  }
+
+  const negative = number < 0;
+
+  // Handle special case for exactly 1000
+  if (Math.abs(number) === 1000) {
+    return addDollarSign
+      ? negative
+        ? "-$1K"
+        : "$1K"
+      : negative
+      ? "-1K"
+      : "1K";
+  }
+
+  if (Math.abs(number) !== 0 && Math.abs(number) > 1000) {
+    const suffixes = ["", "K", "M", "B", "B", "T", "Q", "Qu", "S", "O", "N", "D"];
+    const magnitude = Math.floor(Math.log10(Math.abs(number)));
+    let index = Math.min(Math.floor(magnitude / 3), suffixes.length - 1);
+
+    // Special case to keep numbers in trillions formatted as billions
+    if (index >= 4) {
+      index = 3; // Keep the suffix at "B"
+    }
+
+    let abbreviation = Math.abs(number) / Math.pow(10, index * 3);
+
+    // Set the desired number of decimals
+    if (abbreviation >= 1000) {
+      abbreviation = abbreviation.toFixed(1);
+      index++;
+    } else {
+      abbreviation = abbreviation.toFixed(2);
+    }
+
+    abbreviation = parseFloat(abbreviation).toLocaleString("en-US", {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2,
+    });
+
+    const formattedNumber = abbreviation + suffixes[index];
+
+    return addDollarSign
+      ? (negative ? "-$" : "$") + formattedNumber
+      : negative
+      ? "-" + formattedNumber
+      : formattedNumber;
+  } else if (Math.abs(number) >= 0 && Math.abs(number) < 1000) {
+    return addDollarSign
+      ? (negative ? "-$" : "$") + Math.abs(number)
+      : negative
+      ? "-" + Math.abs(number)
+      : number.toString();
+  } else {
+    return addDollarSign ? "$0" : "0";
+  }
+}
+
+
 export const formatDate = (dateString) => {
   const date = new Date(dateString);
 

src/routes/options-flow/+page.svelte

@@ -863,7 +863,7 @@
 
 <body class="overflow-y-auto">
   <section
-    class="w-full max-w-screen sm:max-w-7xl xl:max-w-screen-2xl flex justify-center items-center bg-default pb-20"
+    class="w-full max-w-screen sm:max-w-7xl xl:max-w-screen-2xl flex justify-center items-center bg-default pb-20 10 p-3 sm:p-0"
   >
     <div class="w-full m-auto min-h-screen">
       <!--
@@ -885,7 +885,7 @@
         </div>
       {/if}
 
-      <div class="rounded-md border border-gray-700 bg-odd p-2">
+      <div class="rounded-md border border-gray-700 bg-primary p-2">
         <div
           class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600"
         >
@@ -963,7 +963,7 @@
           <div class="sm:ml-auto w-full sm:w-fit pt-5">
             <div class="relative flex flex-col sm:flex-row items-center">
               <div
-                class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#19191F] rounded-md border border-gray-600"
+                class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-secondary rounded-md border border-gray-600"
               >
                 <label class="flex flex-row items-center">
                   <input
@@ -1284,7 +1284,7 @@
                                         : ""}
                                       on:input={(e) =>
                                         handleValueInput(e, row?.rule, 0)}
-                                      class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
+                                      class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-primary"
                                     />
                                     <span
                                       class="text-white text-[1rem] font-normal mt-1"
@@ -1301,7 +1301,7 @@
                                         : ""}
                                       on:input={(e) =>
                                         handleValueInput(e, row?.rule, 1)}
-                                      class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
+                                      class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-primary"
                                     />
                                   </div>
                                 {:else}
@@ -1313,7 +1313,7 @@
                                       : valueMappings[row?.rule]}
                                     on:input={(e) =>
                                       handleValueInput(e, row?.rule)}
-                                    class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-secondary"
+                                    class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-primary"
                                   />
                                 {/if}
 
@@ -1466,7 +1466,7 @@
           <div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3">
             <!--Start Flow Sentiment-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@@ -1487,7 +1487,7 @@
             <!--End Flow Sentiment-->
             <!--Start Put/Call-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@@ -1543,7 +1543,7 @@
             <!--End Put/Call-->
             <!--Start Call Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@@ -1600,7 +1600,7 @@
             <!--End Call Flow-->
             <!--Start Put Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-5 bg-odd border border-gray-600 rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@@ -1696,7 +1696,7 @@
         <div class="flex justify-center items-center h-80">
           <div class="relative">
             <label
-              class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+              class="bg-primary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
             >
               <span class="loading loading-spinner loading-md text-gray-400"
               ></span>
@@ -1807,7 +1807,7 @@
               autocomplete="off"
               type="search"
               id="search"
-              class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-secondary border border-blue-500"
+              class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-primary border border-blue-500"
               placeholder="Search"
               bind:value={searchTerm}
             />
@@ -1876,7 +1876,7 @@
 
   <!-- 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-600 w-full bg-primary flex flex-col items-center"
   >
     <div class="text-white mb-5 text-center">
       <h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3>