From 6eb6b661ce9bc3a5c4529f277cda67c84b273e50 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 25 Dec 2024 00:15:02 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/ShareHolders.svelte        | 50 ++++++++++---------
 src/routes/stocks/[tickerID]/+layout.svelte   | 36 ++++++-------
 .../stocks/[tickerID]/insider/+layout.svelte  | 18 +++----
 .../stocks/[tickerID]/insider/+page.svelte    |  6 +--
 .../insider/congress-trading/+page.svelte     |  4 +-
 .../insider/transcripts/+page.svelte          | 22 ++++----
 6 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index 190ca175..33bce8d4 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -11,6 +11,7 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import DownloadData from "$lib/components/DownloadData.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   use([PieChart, GridComponent, CanvasRenderer]);
 
@@ -203,31 +204,32 @@
     // Sort using the generic comparison function
     displayList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
+
+  function generateStatementInfoHTML() {
+    if (shareholderList?.length > 0) {
+      return `
+      <span>
+         13F institutions, like mutual and pension funds, are large investors
+        required by the SEC to disclose their holdings quarterly, significantly
+        impacting company decisions and stock trends.
+      </span>
+    `;
+    } else {
+      return `
+      <span>
+        There are currently no records available for the 13 institutional
+        holders of ${$displayCompanyName}
+      </span>
+    `;
+    }
+  }
+
+  let htmlOutput = generateStatementInfoHTML();
 </script>
 
 <section class="overflow-hidden text-white h-full pb-8">
   <main class="overflow-hidden">
-    <div
-      class="w-full text-white text-start p-3 sm:p-5 mb-5 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"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 256 256"
-        ><path
-          fill="#fff"
-          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 shareholderList?.length !== 0}
-        13F institutions, like mutual and pension funds, are large investors
-        required by the SEC to disclose their holdings quarterly, significantly
-        impacting company decisions and stock trends.
-      {:else}
-        There are currently no records available for the 13 institutional
-        holders of {$displayCompanyName}
-      {/if}
-    </div>
+    <Infobox text={htmlOutput} />
 
     {#if shareholderList?.length !== 0}
       <div class="pb-2 rounded-md bg-[#09090B] sm:bg-[#09090B]">
@@ -322,7 +324,7 @@
           >
             <!--Start Put/Call-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Put/Call</span>
@@ -378,7 +380,7 @@
             <!--End Put/Call-->
             <!--Start Call Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Call Flow</span>
@@ -436,7 +438,7 @@
 
             <!--Start Put Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
                 <span class="font-medium text-gray-200 text-sm">Put Flow</span>
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 48250ebd..374157e1 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -874,8 +874,8 @@
                           on:click={() => changeSection("overview")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'overview'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Overview
                         </a>
@@ -884,8 +884,8 @@
                           on:click={() => changeSection("financials")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'financials'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Financials
                         </a>
@@ -894,8 +894,8 @@
                           on:click={() => changeSection("statistics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'statistics'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                           >Statistics</a
                         >
 
@@ -904,8 +904,8 @@
                           on:click={() => changeSection("metrics")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'metrics'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                           >Metrics</a
                         >
 
@@ -915,8 +915,8 @@
                             on:click={() => changeSection("forecast")}
                             class="p-2 px-5 cursor-pointer {displaySection ===
                             'forecast'
-                              ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                              ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                              : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                           >
                             Forecast
                           </a>
@@ -926,8 +926,8 @@
                           on:click={() => changeSection("options")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'options'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Options
                         </a>
@@ -936,8 +936,8 @@
                           on:click={() => changeSection("insider")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'insider'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Insider
                         </a>
@@ -946,8 +946,8 @@
                           on:click={() => changeSection("dividends")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'dividends'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Dividends
                         </a>
@@ -956,8 +956,8 @@
                           on:click={() => changeSection("profile")}
                           class="p-2 px-5 cursor-pointer {displaySection ===
                           'profile'
-                            ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
-                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
                         >
                           Profile
                         </a>
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index b32b1224..1eace39d 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -87,8 +87,8 @@
                 href={`/stocks/${$stockTicker}/insider`}
                 on:click={() => changeSubSection("insider")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
               >
                 Insider Trading
               </a>
@@ -98,8 +98,8 @@
                 on:click={() => changeSubSection("institute")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'institute'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
               >
                 13F Institute
               </a>
@@ -109,8 +109,8 @@
                 on:click={() => changeSubSection("congress-trading")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'congress-trading'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
               >
                 Congress Trading
               </a>
@@ -119,8 +119,8 @@
                 on:click={() => changeSubSection("transcripts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'transcripts'
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
               >
                 Transcripts
               </a>
@@ -154,7 +154,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"
+              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"
             >
               <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 6bc82d94..d62a34b5 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -397,7 +397,7 @@
                 >
                   <!--Start Put/Call-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
@@ -459,7 +459,7 @@
                   <!--End Put/Call-->
                   <!--Start Call Flow-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
@@ -521,7 +521,7 @@
                   <!--End Call Flow-->
                   <!--Start Put Flow-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 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 bg-primary h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index a23b99e7..fc885bda 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -165,7 +165,7 @@
                 >
                   <!--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"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
@@ -227,7 +227,7 @@
                   <!--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"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
                       <span
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
index aacab977..ec6fdb19 100644
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -8,6 +8,7 @@
   } from "$lib/store";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
+  import Infobox from "$lib/components/Infobox.svelte";
   import { onMount } from "svelte";
 
   let chats = [];
@@ -114,7 +115,7 @@
 </svelte:head>
 
 <section
-  class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
+  class="w-full bg-[#09090B] overflow-hidden text-white min-h-screen mb-40 sm:mb-0"
 >
   <div class="h-full overflow-hidden">
     <div class="relative flex justify-center items-center overflow-hidden">
@@ -250,21 +251,21 @@
                       </span>
                     </div>
                     <div
-                      class="ml-2 avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#0DDE00] bg-opacity-[0.6] flex items-center justify-center"
+                      class="ml-2 avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative border border-gray-600 bg-[#09090B] bg-opacity-[0.6] flex items-center justify-center"
                     >
                       <svg
                         class="w-6 h-6 sm:w-7 sm:h-7"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24"
                         ><path
-                          fill="#27272A"
+                          fill="#fff"
                           d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16q2.075 0 3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z"
                         /></svg
                       >
                     </div>
                   </div>
                   <div
-                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 rounded-l-xl rounded-tr-xl"
+                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-primary rounded-l-xl rounded-tr-xl"
                   >
                     <p class="text-sm font-normal py-2.5 text-gray-200">
                       {@html item?.description}
@@ -292,7 +293,7 @@
                     </div>
                   </div>
                   <div
-                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 rounded-r-xl rounded-tl-xl"
+                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-secondary rounded-r-xl rounded-tl-xl"
                   >
                     <p class="text-sm font-normal py-2.5 text-gray-200">
                       {@html item?.description}
@@ -309,12 +310,11 @@
               Back to top
             </label>
           {:else}
-            <h3
-              class="pl-4 pr-4 pt-5 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
-            >
-              No transcript available for {$displayCompanyName} for the Q{displayQuarter}
-              of {displayYear} 🧐.
-            </h3>
+            <div class="pt-5">
+              <Infobox
+                text={`No transcript available for ${$displayCompanyName} for the Q${displayQuarter} of ${displayYear}`}
+              />
+            </div>
           {/if}
         {:else}
           <div class="flex justify-center items-center h-80">