From dc4687555e24954702d1446b26cd281cf89e9a23 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 1 Nov 2024 18:12:00 +0100
Subject: [PATCH] ui fixes

---
 .../[tickerID]/dividends/+layout.svelte       |   4 +-
 .../stocks/[tickerID]/dividends/+page.svelte  |   4 +-
 .../stocks/[tickerID]/insider/+layout.svelte  |   4 +-
 .../stocks/[tickerID]/insider/+page.svelte    |  44 +-
 .../insider/congress-trading/+page.svelte     | 473 +++++++++---------
 .../insider/transcripts/+page.svelte          |  21 +-
 .../[tickerID]/metrics/[slug]/+layout.svelte  |  12 +-
 .../stocks/[tickerID]/options/+layout.svelte  |   8 +-
 .../stocks/[tickerID]/options/+page.svelte    |   2 +-
 .../statistics/employees/+layout.svelte       |   6 +-
 .../statistics/market-cap/+layout.svelte      |   6 +-
 11 files changed, 273 insertions(+), 311 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/dividends/+layout.svelte b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
index 52e300d1..b8e46663 100644
--- a/src/routes/stocks/[tickerID]/dividends/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+layout.svelte
@@ -47,7 +47,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <a
                 href="/pricing"
@@ -68,7 +68,7 @@
 
           {#if newsList?.length !== 0}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <div class="p-4 text-sm">
                 <h3 class="text-lg text-white font-semibold mb-3">
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 11192c40..2c84c3c3 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -144,7 +144,7 @@
           </h1>
 
           <div
-            class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+            class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
           >
             <svg
               class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -198,7 +198,7 @@
 
         {#if rawData?.history?.length !== 0}
           <div
-            class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 divide-x"
+            class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-600 rounded-md border border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
           >
             <div class="p-4 bp:p-5 sm:p-6">
               <label
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index 9ef80183..e54389bc 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -120,7 +120,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <a
                 href="/pricing"
@@ -141,7 +141,7 @@
 
           {#if newsList?.length !== 0}
             <div
-              class="w-full sm:hover:text-white text-white border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <div class="p-4 text-sm">
                 <h3 class="text-lg text-white font-semibold mb-3">
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 06cce689..53650d2e 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -270,28 +270,24 @@
           <h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
             Insider Trading
           </h1>
-
-          <div
-            class="w-fit text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
-          >
-            <svg
-              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 256 256"
-              ><path
-                fill="#a474f6"
-                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-              /></svg
+          {#if insiderTradingList?.length === 0}
+            <div
+              class="w-fit text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
             >
+              <svg
+                class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+                ><path
+                  fill="#a474f6"
+                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+                /></svg
+              >
 
-            {#if insiderTradingList?.length !== 0}
-              Get detailed insights of Insiders who bought or sold {$displayCompanyName}
-              and the amounts involved!
-            {:else}
               No trading history available for {$displayCompanyName}. Likely no
               insider trading has happened yet.
-            {/if}
-          </div>
+            </div>
+          {/if}
         </div>
 
         {#if isLoaded}
@@ -401,11 +397,11 @@
                 >
                   <!--Start Put/Call-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
-                        class="font-medium text-gray-200 text-sm sm:text-[1rem]"
+                        class="font-medium text-white text-sm sm:text-[1rem]"
                         >Buy/Sell</span
                       >
                       <span
@@ -463,11 +459,11 @@
                   <!--End Put/Call-->
                   <!--Start Call Flow-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
-                        class="font-medium text-gray-200 text-sm sm:text-[1rem]"
+                        class="font-medium text-white text-sm sm:text-[1rem]"
                         >Bought Shares</span
                       >
                       <span
@@ -525,11 +521,11 @@
                   <!--End Call Flow-->
                   <!--Start Put Flow-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
-                        class="font-medium text-gray-200 text-sm sm:text-[1rem]"
+                        class="font-medium text-white text-sm sm:text-[1rem]"
                         >Sold Shares</span
                       >
                       <span
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index 044d42e3..b6b8bf44 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -14,7 +14,6 @@
   let partyRatio = 0;
   let senateTradingList = [];
   let isLoaded = false;
-  let images = {};
 
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
@@ -133,289 +132,271 @@
             Congress Trading
           </h1>
 
-          <div
-            class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
-          >
-            <svg
-              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 256 256"
-              ><path
-                fill="#a474f6"
-                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-              /></svg
-            >
-            Get detailed insights of Corrupt US Politician 🇺🇸 who bought or sold
-            {$displayCompanyName} and the amounts involved!
-          </div>
-        </div>
-        {#if isLoaded}
-          {#if senateTradingList?.length !== 0}
-            <h3 class="text-white text-xl font-semibold">
-              Congress Statistics
-            </h3>
-            <!--Start Widget-->
-            <div
-              class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
-            >
+          {#if isLoaded}
+            {#if senateTradingList?.length !== 0}
+              <!--Start Widget-->
               <div
-                class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3"
+                class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
               >
-                <!--Start Buy/Sell-->
                 <div
-                  class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
+                  class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3"
                 >
-                  <div class="flex flex-col items-start">
-                    <span
-                      class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
-                      >Buy/Sell</span
-                    >
-                    <span
-                      class="text-start text-sm sm:text-[1rem] font-medium text-white"
-                    >
-                      {buySellRatio?.toFixed(3)}
-                    </span>
-                  </div>
-                  <!-- Circular Progress -->
-                  <div class="relative size-14 ml-auto">
-                    <svg
-                      class="size-full w-14 h-14"
-                      viewBox="0 0 36 36"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <!-- Background Circle -->
-                      <circle
-                        cx="18"
-                        cy="18"
-                        r="16"
-                        fill="none"
-                        class="stroke-current text-[#3E3E3E]"
-                        stroke-width="3"
-                      ></circle>
-                      <!-- Progress Circle inside a group with rotation -->
-                      <g class="origin-center -rotate-90 transform">
+                  <!--Start Buy/Sell-->
+                  <div
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md h-20"
+                  >
+                    <div class="flex flex-col items-start">
+                      <span
+                        class="font-semibold text-white text-sm sm:text-[1rem]"
+                        >Buy/Sell</span
+                      >
+                      <span
+                        class="text-start text-sm sm:text-[1rem] font-medium text-white"
+                      >
+                        {buySellRatio?.toFixed(3)}
+                      </span>
+                    </div>
+                    <!-- Circular Progress -->
+                    <div class="relative size-14 ml-auto">
+                      <svg
+                        class="size-full w-14 h-14"
+                        viewBox="0 0 36 36"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <!-- Background Circle -->
                         <circle
                           cx="18"
                           cy="18"
                           r="16"
                           fill="none"
-                          class="stroke-current {buySellRatio >= 0.5
-                            ? 'text-[#00FC50]'
-                            : 'text-[#EE5365]'} "
+                          class="stroke-current text-[#3E3E3E]"
                           stroke-width="3"
-                          stroke-dasharray="100"
-                          stroke-dashoffset={100 - buySellRatio * 100 >= 0
-                            ? 100 - (buySellRatio * 100)?.toFixed(2)
-                            : 0}
                         ></circle>
-                      </g>
-                    </svg>
-                    <!-- Percentage Text -->
-                    <div
-                      class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                    >
-                      <span
-                        class="text-center text-white text-sm sm:text-[1rem]"
-                        >{buySellRatio?.toFixed(2)}</span
+                        <!-- Progress Circle inside a group with rotation -->
+                        <g class="origin-center -rotate-90 transform">
+                          <circle
+                            cx="18"
+                            cy="18"
+                            r="16"
+                            fill="none"
+                            class="stroke-current {buySellRatio >= 0.5
+                              ? 'text-[#00FC50]'
+                              : 'text-[#EE5365]'} "
+                            stroke-width="3"
+                            stroke-dasharray="100"
+                            stroke-dashoffset={100 - buySellRatio * 100 >= 0
+                              ? 100 - (buySellRatio * 100)?.toFixed(2)
+                              : 0}
+                          ></circle>
+                        </g>
+                      </svg>
+                      <!-- Percentage Text -->
+                      <div
+                        class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                       >
+                        <span
+                          class="text-center text-white text-sm sm:text-[1rem]"
+                          >{buySellRatio?.toFixed(2)}</span
+                        >
+                      </div>
                     </div>
+                    <!-- End Circular Progress -->
                   </div>
-                  <!-- End Circular Progress -->
-                </div>
-                <!--End Buy/Sell-->
-                <!--Start Dem/Rep-->
-                <div
-                  class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
-                >
-                  <div class="flex flex-col items-start">
-                    <span
-                      class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
-                      >Dem/Rep</span
-                    >
-                    <span
-                      class="text-start text-sm sm:text-[1rem] font-medium text-white"
-                    >
-                      {partyRatio?.toFixed(3)}
-                    </span>
-                  </div>
-                  <!-- Circular Progress -->
-                  <div class="relative size-14 ml-auto">
-                    <svg
-                      class="size-full w-14 h-14"
-                      viewBox="0 0 36 36"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <!-- Background Circle -->
-                      <circle
-                        cx="18"
-                        cy="18"
-                        r="16"
-                        fill="none"
-                        class="stroke-current text-[#3E3E3E]"
-                        stroke-width="3"
-                      ></circle>
-                      <!-- Progress Circle inside a group with rotation -->
-                      <g class="origin-center -rotate-90 transform">
+                  <!--End Buy/Sell-->
+                  <!--Start Dem/Rep-->
+                  <div
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md h-20"
+                  >
+                    <div class="flex flex-col items-start">
+                      <span
+                        class="font-semibold text-white text-sm sm:text-[1rem]"
+                        >Dem/Rep</span
+                      >
+                      <span
+                        class="text-start text-sm sm:text-[1rem] font-medium text-white"
+                      >
+                        {partyRatio?.toFixed(3)}
+                      </span>
+                    </div>
+                    <!-- Circular Progress -->
+                    <div class="relative size-14 ml-auto">
+                      <svg
+                        class="size-full w-14 h-14"
+                        viewBox="0 0 36 36"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <!-- Background Circle -->
                         <circle
                           cx="18"
                           cy="18"
                           r="16"
                           fill="none"
-                          class="stroke-current text-blue-500"
+                          class="stroke-current text-[#3E3E3E]"
                           stroke-width="3"
-                          stroke-dasharray="100"
-                          stroke-dashoffset={100 - partyRatio * 100 >= 0
-                            ? 100 - (partyRatio * 100)?.toFixed(2)
-                            : 0}
                         ></circle>
-                      </g>
-                    </svg>
-                    <!-- Percentage Text -->
-                    <div
-                      class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
-                    >
-                      <span
-                        class="text-center text-white text-sm sm:text-[1rem]"
-                        >{partyRatio?.toFixed(2)}</span
+                        <!-- Progress Circle inside a group with rotation -->
+                        <g class="origin-center -rotate-90 transform">
+                          <circle
+                            cx="18"
+                            cy="18"
+                            r="16"
+                            fill="none"
+                            class="stroke-current text-blue-500"
+                            stroke-width="3"
+                            stroke-dasharray="100"
+                            stroke-dashoffset={100 - partyRatio * 100 >= 0
+                              ? 100 - (partyRatio * 100)?.toFixed(2)
+                              : 0}
+                          ></circle>
+                        </g>
+                      </svg>
+                      <!-- Percentage Text -->
+                      <div
+                        class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                       >
+                        <span
+                          class="text-center text-white text-sm sm:text-[1rem]"
+                          >{partyRatio?.toFixed(2)}</span
+                        >
+                      </div>
                     </div>
+                    <!-- End Circular Progress -->
                   </div>
-                  <!-- End Circular Progress -->
+                  <!--End Put/Call-->
                 </div>
-                <!--End Put/Call-->
               </div>
-            </div>
-            <!--End Widget-->
+              <!--End Widget-->
 
-            <div
-              class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll"
-            >
-              <table
-                class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
+              <div
+                class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll"
               >
-                <thead>
-                  <tr class="bg-[#09090B] border-b border-[#27272A]">
-                    <th
-                      class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold"
-                    >
-                      Person
-                    </th>
-                    <th
-                      class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
-                    >
-                      Transaction Date
-                    </th>
-                    <th
-                      class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
-                    >
-                      Amount
-                    </th>
-                    <th
-                      class="shadow-md text-white font-semibold text-end text-sm"
-                      >Type</th
-                    >
-                  </tr>
-                </thead>
-                <tbody>
-                  {#each senateTradingList as item}
-                    <tr
-                      class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
-                    >
-                      <td
-                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
+                <table
+                  class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
+                >
+                  <thead>
+                    <tr class="bg-[#09090B] border-b border-[#27272A]">
+                      <th
+                        class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold"
                       >
-                        <div class="flex flex-row items-center">
-                          <div
-                            class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party ===
-                            'Republican'
-                              ? 'bg-[#98272B]'
-                              : item?.party === 'Democratic'
-                                ? 'bg-[#295AC7]'
-                                : 'bg-[#4E2153]'} flex items-center justify-center"
-                          >
-                            <img
-                              style="clip-path: circle(50%);"
-                              class="avatar rounded-full w-7 sm:w-9"
-                              src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
-                              loading="lazy"
-                            />
-                          </div>
-                          <div class="flex flex-col ml-3">
-                            <a
-                              href={`/politicians/${item?.id}`}
-                              class="sm:hover:text-white text-blue-400"
-                              >{item?.representative?.replace("_", " ")}</a
-                            >
-                            <span class="">{item?.party}</span>
-                          </div>
-                        </div>
-                        <!--{item?.firstName} {item?.lastName}-->
-                      </td>
-
-                      <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                        Person
+                      </th>
+                      <th
+                        class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
                       >
-                        {new Date(item?.transactionDate)?.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 border-b border-b-[#09090B]"
+                        Transaction Date
+                      </th>
+                      <th
+                        class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
                       >
-                        {item?.amount}
-                      </td>
-                      <td
-                        class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                        Amount
+                      </th>
+                      <th
+                        class="shadow-md text-white font-semibold text-end text-sm"
+                        >Type</th
                       >
-                        {#if item?.type === "Bought"}
-                          <span class="text-[#00FC50]">Bought</span>
-                        {:else if item?.type === "Sold"}
-                          <span class="text-[#FF2F1F]">Sold</span>
-                        {:else if item?.type === "Exchange"}
-                          <span class="text-[#C6A755]">Exchange</span>
-                        {/if}
-                      </td>
                     </tr>
-                  {/each}
-                </tbody>
-              </table>
-            </div>
+                  </thead>
+                  <tbody>
+                    {#each senateTradingList as item}
+                      <tr
+                        class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
+                      >
+                        <td
+                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
+                        >
+                          <div class="flex flex-row items-center">
+                            <div
+                              class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party ===
+                              'Republican'
+                                ? 'bg-[#98272B]'
+                                : item?.party === 'Democratic'
+                                  ? 'bg-[#295AC7]'
+                                  : 'bg-[#4E2153]'} flex items-center justify-center"
+                            >
+                              <img
+                                style="clip-path: circle(50%);"
+                                class="avatar rounded-full w-7 sm:w-9"
+                                src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
+                                loading="lazy"
+                              />
+                            </div>
+                            <div class="flex flex-col ml-3">
+                              <a
+                                href={`/politicians/${item?.id}`}
+                                class="sm:hover:text-white text-blue-400"
+                                >{item?.representative?.replace("_", " ")}</a
+                              >
+                              <span class="">{item?.party}</span>
+                            </div>
+                          </div>
+                          <!--{item?.firstName} {item?.lastName}-->
+                        </td>
 
-            {#if rawData?.length >= 20}
-              <label
-                on:click={backToTop}
-                class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                        >
+                          {new Date(item?.transactionDate)?.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 border-b border-b-[#09090B]"
+                        >
+                          {item?.amount}
+                        </td>
+                        <td
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
+                        >
+                          {#if item?.type === "Bought"}
+                            <span class="text-[#00FC50]">Bought</span>
+                          {:else if item?.type === "Sold"}
+                            <span class="text-[#FF2F1F]">Sold</span>
+                          {:else if item?.type === "Exchange"}
+                            <span class="text-[#C6A755]">Exchange</span>
+                          {/if}
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+
+              {#if rawData?.length >= 20}
+                <label
+                  on:click={backToTop}
+                  class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+                >
+                  Back to top
+                </label>
+              {/if}
+            {:else}
+              <h2
+                class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
               >
-                Back to top
-              </label>
+                No trading history available for {$displayCompanyName}. Likely
+                no corrupt politican has interest in this stock.
+              </h2>
             {/if}
           {:else}
-            <h2
-              class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
-            >
-              No trading history available for {$displayCompanyName}. Likely no
-              corrupt politican has interest in this stock.
-            </h2>
-          {/if}
-        {:else}
-          <div class="flex justify-center items-center h-80">
-            <div class="relative">
-              <label
-                class="bg-[#09090B] rounded-xl 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 class="flex justify-center items-center h-80">
+              <div class="relative">
+                <label
+                  class="bg-[#09090B] rounded-xl 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>
-          </div>
-        {/if}
+          {/if}
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
index 880cf47f..9c569ebe 100644
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -124,21 +124,6 @@
             Transcripts
           </h1>
 
-          <div
-            class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
-          >
-            <svg
-              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 256 256"
-              ><path
-                fill="#a474f6"
-                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-              /></svg
-            >
-            Discover the earnings call highlights and investor Q&A with {$displayCompanyName}!
-          </div>
-
           <div class="flex w-fit sm:w-[50%] md:block md:w-auto ml-auto">
             <div class="relative inline-block text-left grow">
               <DropdownMenu.Root>
@@ -279,7 +264,7 @@
                     </div>
                   </div>
                   <div
-                    class="flex flex-col w-full leading-1.5 p-4 bg-[#27272A] rounded-l-xl rounded-tr-xl"
+                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 rounded-l-xl rounded-tr-xl"
                   >
                     <p class="text-sm font-normal py-2.5 text-gray-200">
                       {@html item?.description}
@@ -307,7 +292,7 @@
                     </div>
                   </div>
                   <div
-                    class="flex flex-col w-full leading-1.5 p-4 bg-[#27272A] rounded-r-xl rounded-tl-xl"
+                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 rounded-r-xl rounded-tl-xl"
                   >
                     <p class="text-sm font-normal py-2.5 text-gray-200">
                       {@html item?.description}
@@ -319,7 +304,7 @@
 
             <label
               on:click={backToTop}
-              class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
+              class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
             >
               Back to top
             </label>
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
index cd566fea..90dc8851 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
@@ -17,7 +17,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <a
                 href="/pricing"
@@ -25,7 +25,7 @@
               >
                 <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 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -37,7 +37,7 @@
           {/if}
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/price-alert"}
@@ -45,7 +45,7 @@
             >
               <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 ⏰
+                  Price Alert
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
@@ -56,7 +56,7 @@
           </div>
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/stock-screener"}
@@ -64,7 +64,7 @@
             >
               <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 🔎
+                  Stock Screener
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
diff --git a/src/routes/stocks/[tickerID]/options/+layout.svelte b/src/routes/stocks/[tickerID]/options/+layout.svelte
index 80d4d0ed..0a43674d 100644
--- a/src/routes/stocks/[tickerID]/options/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/options/+layout.svelte
@@ -17,7 +17,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <a
                 href="/pricing"
@@ -25,7 +25,7 @@
               >
                 <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 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -37,7 +37,7 @@
           {/if}
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/options-flow"}
@@ -56,7 +56,7 @@
           </div>
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/stock-screener"}
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index a79b540a..5638ee66 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -594,7 +594,7 @@
 
         {#if optionsPlotData?.length !== 0}
           <div
-            class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x"
+            class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-600 rounded-md border border-gray-600 md:grid-cols-4 md:grid-rows-1 md:divide-x"
           >
             <div class="p-4 bp:p-5 sm:p-6">
               <label
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
index dc70cc12..e9a26653 100644
--- a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
@@ -17,7 +17,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <a
                 href="/pricing"
@@ -37,7 +37,7 @@
           {/if}
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/options-flow"}
@@ -56,7 +56,7 @@
           </div>
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/stock-screener"}
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
index 9d790ffd..f345d63b 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
@@ -17,7 +17,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <a
                 href="/pricing"
@@ -37,7 +37,7 @@
           {/if}
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/price-alert"}
@@ -56,7 +56,7 @@
           </div>
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/stock-screener"}