update dark pool page

src/lib/components/DarkPool/HistoricalVolume.svelte

@@ -384,10 +384,16 @@
         >
           <thead class="text-muted dark:text-white dark:bg-default">
             <tr>
-              <th class=" font-semibold text-start text-sm">Date</th>
-              <th class=" font-semibold text-end text-sm">Total Volume</th>
-              <th class=" font-semibold text-end text-sm">Short Volume</th>
-              <th class=" font-semibold text-end text-sm"
+              <th class=" font-semibold text-start text-sm sm:text-[1rem]"
+                >Date</th
+              >
+              <th class=" font-semibold text-end text-sm sm:text-[1rem]"
+                >Total Volume</th
+              >
+              <th class=" font-semibold text-end text-sm sm:text-[1rem]"
+                >Short Volume</th
+              >
+              <th class=" font-semibold text-end text-sm sm:text-[1rem]"
                 >% Short Volume Change</th
               >
             </tr>

src/lib/components/DarkPool/HottestTrades.svelte

@@ -135,10 +135,10 @@
         content={"Real-time hottest trades highlight significant premium flows, revealing where big players are active and hinting at market trends or sentiment."}
         id={"hottestDPTrade"}
       />
-
       <a
         href={`/dark-pool-flow?query=${ticker}`}
-        class="ml-auto rounded text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-blue-100 dark:bg-[#fff] text-black"
+        class="sm:hidden ml-auto px-3 py-1 text-sm border border-gray-300 dark:border-gray-700 bg-gray-100 shadow-sm dark:bg-white text-black '
+                   transition ease-out duration-100 rounded cursor-pointer"
       >
         View All
       </a>
@@ -146,9 +146,20 @@
 
     {#if rawData?.length !== 0}
       <div class="w-full flex flex-col items-start">
-        <div class=" text-[1rem] mt-2 mb-2 w-full">
+        <div
+          class="flex flex-row items-end justify-between w-full mt-2 sm:mt-0 mb-2"
+        >
+          <div class="text-[1rem]">
             Get in realtime the latest hottest trades based on premium.
           </div>
+          <a
+            href={`/dark-pool-flow?query=${ticker}`}
+            class="hidden sm:inline-block ml-auto px-3 py-1 text-sm border border-gray-300 dark:border-gray-700 bg-gray-100 shadow-sm dark:bg-white text-black '
+                   transition ease-out duration-100 rounded cursor-pointer"
+          >
+            View All
+          </a>
+        </div>
       </div>
 
       <div

src/lib/components/DarkPool/RealtimeTrade.svelte

@@ -234,7 +234,7 @@
       <div
         class="{!['Pro']?.includes(data?.user?.tier)
           ? 'blur-[3px]'
-          : ''} mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
+          : ''}  border border-gray-300 dark:border-gray-800 rounded"
         use:highcharts={config}
       ></div>
       <!-- Overlay with "Upgrade to Pro" -->