ui fixes

src/lib/components/DarkPool/PriceLevel.svelte

@@ -57,8 +57,8 @@
       animation: false,
       grid: {
         left: "0%", // Adjust to create space for y-axis labels
-        right: "10%",
+        right: "5%",
-        bottom: "5%",
+        bottom: "0%",
         top: "5%",
         containLabel: true,
       },

src/lib/components/Infobox.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="sm:mt-5 bg-primary rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
+  class="sm:mt-5 bg-inherit rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
 >
   <svg
     class="h-6 w-6 hidden sm:block"

src/routes/price-alert/+page.svelte

@@ -306,7 +306,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4 lg:pr-5">
+        <main class="w-full">
           <div class="mb-6 border-b-[2px]">
             <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
               Price Alerts
@@ -793,67 +793,6 @@
             </div>
           {/if}
         </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              on:click={() => goto("/pricing")}
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <div
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </div>
-            </div>
-          {/if}
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
-          >
-            <a
-              href={"/watchlist/stocks"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Watchlist
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Build your watchlist to keep track of their performance.
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
-          >
-            <a
-              href={"/stock-screener"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Stock Screener
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable stocks.
-              </span>
-            </a>
-          </div>
-        </aside>
       </div>
     </div>
   </div>

src/routes/stocks/[tickerID]/dark-pool/+layout.svelte

@@ -10,14 +10,14 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -37,7 +37,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={`/dark-pool-flow?query=${$stockTicker}`}

src/routes/stocks/[tickerID]/dividends/+layout.svelte

@@ -14,14 +14,14 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -42,25 +42,25 @@
 
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 text-white border border-gray-600 bg-primary rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 text-white border border-gray-600 bg-inherit 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"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-left"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-right"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
                       >Dividend Yield</th
                     ></tr
                   ></thead
                 >
                 <tbody>
                   {#each similarStocks?.slice(0, 8) as item}
-                    <tr class="border-gray-600 border-b text-[1rem]"
+                    <tr class="border-gray-800 border-b text-[1rem]"
                       ><td class="text-left text-[1rem]"
                         ><a
                           href={`/stocks/${item?.symbol}`}

src/routes/stocks/[tickerID]/dividends/+page.svelte

@@ -4,18 +4,9 @@
     displayCompanyName,
     stockTicker,
   } from "$lib/store";
-  import { onMount } from "svelte";
-  import { monthNames } from "$lib/utils";
-  import { Chart } from "svelte-echarts";
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
   import Infobox from "$lib/components/Infobox.svelte";
-  use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]);
 
   export let data;
-  let isLoaded = false;
   let dateDistance;
   let rawData = data?.getStockDividend;
   let optionsDividend;
@@ -27,99 +18,6 @@
   let payoutRatio = rawData?.payoutRatio;
   let dividendGrowth = rawData?.dividendGrowth;
 
-  async function plotDividend() {
-    // Combine the data into an array of objects to keep them linked
-    const combinedData = rawData?.history?.map((item) => ({
-      date: item?.paymentDate,
-      dividend: item?.adjDividend?.toFixed(3),
-    }));
-
-    // Sort the combined data array based on the date
-    combinedData.sort((a, b) => new Date(a?.date) - new Date(b?.date));
-
-    // Separate the sorted data back into individual arrays
-    const dates = combinedData.map((item) => item.date);
-    const dividendList = combinedData?.map((item) => item.dividend);
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "3%",
-        right: "3%",
-        bottom: "10%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        type: "category",
-        boundaryGap: false,
-        data: dates,
-        axisLabel: {
-          color: "#fff",
-          formatter: function (value) {
-            // Assuming dates are in the format 'yyyy-mm-dd'
-            // Extract the month and day from the date string and convert the month to its abbreviated name
-            const dateParts = value.split("-");
-            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
-            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-            return `${monthNames[monthIndex]} '${year} `;
-          },
-        },
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
-        },
-      ],
-      series: [
-        {
-          name: "Dividend per Share",
-          data: dividendList,
-          type: "bar",
-          smooth: true,
-          itemStyle: {
-            color: "#fff",
-          },
-        },
-      ],
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          const date = params[0].name; // Get the date from the x-axis value
-          const dateParts = date.split("-");
-          const year = dateParts[0];
-          const monthIndex = parseInt(dateParts[1]) - 1;
-          const day = dateParts[2];
-          const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
-
-          // Return the tooltip content
-          return `${formattedDate}<br/> Dividend Per Share: ${params[0].value}`;
-        },
-      },
-    };
-
-    return options;
-  }
-
-  onMount(async () => {
-    optionsDividend = await plotDividend();
-    isLoaded = true;
-  });
-
   function generateDividendInfoHTML() {
     const history = rawData?.history || [];
 
@@ -333,119 +231,99 @@
             <h3 class="text-xl text-white font-semibold">Dividends History</h3>
           </div>
 
-          {#if isLoaded}
+          {#if rawData?.history?.length !== 0}
-            {#if rawData?.history?.length !== 0 && optionsDividend}
+            <div
-              <div class="app w-full">
+              class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
-                <Chart {init} options={optionsDividend} class="chart" />
+            >
-              </div>
+              <table
-
+                class="table table-sm table-compact flex justify-start items-center w-full m-auto"
-              <div
-                class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
               >
-                <table
+                <thead>
-                  class="table table-sm table-compact flex justify-start items-center w-full m-auto"
+                  <tr class="bg-default border-b border-gray-800">
-                >
+                    <th
-                  <thead>
+                      class="text-start bg-default text-white text-sm font-semibold"
-                    <tr class="bg-default border-b border-gray-800">
+                    >
-                      <th
+                      Ex-Divid. Date
-                        class="text-start bg-default text-white text-sm font-semibold"
+                    </th>
+                    <th
+                      class="text-end bg-default text-white text-sm font-semibold"
+                    >
+                      Cash Amount
+                    </th>
+                    <th
+                      class="text-end bg-default text-white text-sm font-semibold"
+                    >
+                      Record Date
+                    </th>
+                    <th
+                      class="text-end bg-default text-white text-sm font-semibold"
+                    >
+                      Pay Date
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="">
+                  {#each rawData?.history as item}
+                    <tr class="text-white odd:bg-odd border-b border-gray-800">
+                      <td
+                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium"
                       >
-                        Ex-Divid. Date
+                        {new Date(item?.date)?.toLocaleString("en-US", {
-                      </th>
+                          month: "short",
-                      <th
+                          day: "numeric",
-                        class="text-end bg-default text-white text-sm font-semibold"
+                          year: "numeric",
+                          daySuffix: "2-digit",
+                        })}
+                      </td>
+                      <td
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                       >
-                        Cash Amount
+                        {item?.adjDividend?.toFixed(3)}
-                      </th>
+                      </td>
-                      <th
+                      <td
-                        class="text-end bg-default text-white text-sm font-semibold"
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                       >
-                        Record Date
+                        {item?.recordDate?.length !== 0
-                      </th>
+                          ? new Date(item?.recordDate)?.toLocaleString(
-                      <th
+                              "en-US",
-                        class="text-end bg-default text-white text-sm font-semibold"
+                              {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric",
+                                daySuffix: "2-digit",
+                              },
+                            )
+                          : "n/a"}
+                      </td>
+                      <td
+                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                       >
-                        Pay Date
+                        {item?.paymentDate?.length !== 0
-                      </th>
+                          ? new Date(item?.paymentDate)?.toLocaleString(
+                              "en-US",
+                              {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric",
+                                daySuffix: "2-digit",
+                              },
+                            )
+                          : "n/a"}
+                      </td>
                     </tr>
-                  </thead>
+                  {/each}
-                  <tbody class="">
+                </tbody>
-                    {#each rawData?.history as item}
+              </table>
-                      <tr
-                        class="text-white odd:bg-odd border-b border-gray-800"
-                      >
-                        <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium"
-                        >
-                          {new Date(item?.date)?.toLocaleString("en-US", {
-                            month: "short",
-                            day: "numeric",
-                            year: "numeric",
-                            daySuffix: "2-digit",
-                          })}
-                        </td>
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                        >
-                          {item?.adjDividend?.toFixed(3)}
-                        </td>
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                        >
-                          {item?.recordDate?.length !== 0
-                            ? new Date(item?.recordDate)?.toLocaleString(
-                                "en-US",
-                                {
-                                  month: "short",
-                                  day: "numeric",
-                                  year: "numeric",
-                                  daySuffix: "2-digit",
-                                },
-                              )
-                            : "n/a"}
-                        </td>
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                        >
-                          {item?.paymentDate?.length !== 0
-                            ? new Date(item?.paymentDate)?.toLocaleString(
-                                "en-US",
-                                {
-                                  month: "short",
-                                  day: "numeric",
-                                  year: "numeric",
-                                  daySuffix: "2-digit",
-                                },
-                              )
-                            : "n/a"}
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-              <span class="text-gray-200 text-sm italic">
-                * Dividend amounts are adjusted for stock splits when
-                applicable.
-              </span>
-            {:else}
-              <h1
-                class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10"
-              >
-                No history found
-              </h1>
-            {/if}
-          {:else}
-            <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"
-                >
-                  <span class="loading loading-spinner loading-md text-gray-400"
-                  ></span>
-                </label>
-              </div>
             </div>
+            <span class="text-gray-200 text-sm italic">
+              * Dividend amounts are adjusted for stock splits when applicable.
+            </span>
+          {:else}
+            <h1
+              class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10"
+            >
+              No history found
+            </h1>
           {/if}
         {/if}
       </div>

src/routes/stocks/[tickerID]/financials/+layout.svelte

@@ -51,7 +51,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'}  ">
+        <main class="w-full {$coolMode ? 'lg:w-3/4 pr-10' : 'w-full'} ">
           <div class="m-auto">
             <nav
               class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
@@ -103,10 +103,10 @@
         </main>
 
         {#if $coolMode}
-          <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+          <aside class="hidden lg:block relative fixed w-1/4 mt-3">
             {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
               <div
-                class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+                class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
               >
                 <a
                   href="/pricing"
@@ -130,7 +130,7 @@
             {/if}
 
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/watchlist/stocks"}
@@ -149,7 +149,7 @@
             </div>
 
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href={"/analysts/top-stocks"}

src/routes/stocks/[tickerID]/forecast/+page.svelte

@@ -493,7 +493,7 @@
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
+      <div class="sm:pl-4 sm:pt-4 w-full m-auto mt-2 sm:mt-0">
         <h1 class="mb-px text-xl sm:text-2xl font-bold bp:text-3xl sm:pl-1">
           {$displayCompanyName} Forecast
         </h1>

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -238,8 +238,8 @@
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
     >
-      <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
+      <div class="sm:pl-4 sm:pt-4 w-full m-auto mt-2 sm:mt-0">
-        <div class="mb-6">
+        <div class="mb-4">
           <div
             class="mb-5 flex flex-col justify-between gap-y-2.5 sm:mb-2 sm:flex-row sm:items-end"
           >

src/routes/stocks/[tickerID]/history/+page.svelte

@@ -315,7 +315,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
             <div
               class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5"
@@ -532,10 +532,10 @@
             {/if}
           </div>
         </main>
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -555,7 +555,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/stock-screener"
@@ -575,7 +575,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/watchlist/stocks"

src/routes/stocks/[tickerID]/insider/+layout.svelte

@@ -76,7 +76,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <nav
             class="mb-5 sm:mb-0 sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
           >
@@ -118,10 +118,10 @@
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -142,7 +142,7 @@
 
           {#if newsList?.length !== 0}
             <div
-              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary"
+              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
             >
               <div class="p-4 text-sm">
                 <h3 class="text-lg text-white font-semibold mb-3">

src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte

@@ -10,14 +10,14 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -37,7 +37,7 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/price-alert"}
@@ -56,7 +56,7 @@
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href={"/stock-screener"}

src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte

@@ -13,14 +13,14 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -40,18 +40,18 @@
           {/if}
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 bg-primary text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 bg-inherit text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
               <table class="table table-sm table-compact w-full text-white">
                 <thead class="text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-left"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-right"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
                       >Employees</th
                     ></tr
                   ></thead
@@ -59,7 +59,7 @@
                 <tbody>
                   {#each similarStocks?.slice(0, 8) as item, index}
                     <tr
-                      class="border-gray-600 {index !==
+                      class="border-gray-800 {index !==
                       similarStocks?.slice(0, 8).length - 1
                         ? 'border-b'
                         : ''}"

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte

@@ -14,14 +14,14 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -42,18 +42,18 @@
 
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 text-white border border-gray-600 bg-primary rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
               <table class="table table-sm table-compact w-full text-white">
                 <thead class="text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-left"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-right"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
                       >FTD / Avg Volume</th
                     ></tr
                   ></thead
@@ -62,7 +62,7 @@
                   {#each similarStocks?.slice(0, 8) as item, index}
                     {#if item?.relativeFTD > 0}
                       <tr
-                        class="border-gray-600 text-[1rem] {index !==
+                        class="border-gray-800 text-[1rem] {index !==
                         similarStocks?.slice(0, 8).length - 1
                           ? 'border-b'
                           : ''}"

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte

@@ -109,7 +109,7 @@
           {#if rawData?.length !== 0}
             <div class="grid grid-cols-1 gap-2">
               <div
-                class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+                class="mb-4 bg-inherit flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
               >
                 <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
                   <div class="flex items-center justify-between sm:block">

src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte

@@ -77,14 +77,14 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4">
+        <main class="w-full lg:w-3/4 lg:pr-10">
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
@@ -105,18 +105,18 @@
 
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 text-white border border-gray-600 bg-primary rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
               <table class="table table-sm table-compact w-full text-white">
                 <thead class="text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-left"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b font-semibold text-[1rem] text-right"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
                       >Market Cap</th
                     ></tr
                   ></thead
@@ -125,7 +125,7 @@
                   {#each similarStocks?.slice(0, 8) as item, index}
                     {#if item?.marketCap > 0}
                       <tr
-                        class="border-gray-600 text-[1rem] {index !==
+                        class="border-gray-800 text-[1rem] {index !==
                         similarStocks?.slice(0, 8).length - 1
                           ? 'border-b'
                           : ''}"

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -456,7 +456,7 @@
               />
 
               <div
-                class="mb-4 mt-5 bg-primary flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+                class="mb-4 mt-5 bg-inherit flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
               >
                 <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
                   <div class="flex items-center justify-between sm:block">

src/routes/watchlist/+layout.svelte

@@ -46,7 +46,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4 lg:pr-5">
+        <main class="w-full">
           <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
             Watchlist
           </h1>
@@ -70,67 +70,6 @@
 
           <slot />
         </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
-            >
-              <a
-                href="/pricing"
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
-          >
-            <a
-              href={"/price-alert"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Price Alert
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Customize your alerts to never miss out again
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
-          >
-            <a
-              href={"/stock-screener"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Stock Screener
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Build your Stock Screener to find profitable stocks.
-              </span>
-            </a>
-          </div>
-        </aside>
       </div>
     </div>
   </div>