ui fixes

src/lib/components/TopETFTickerHolder.svelte

@@ -8,7 +8,6 @@
     export let topETFHolder;
       
     
-      
       async function etfSelector(state)
       {
         window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
@@ -30,7 +29,7 @@
               Top ETFs Holder
             </h2>
             <p class="text-white mb-5 ml-4 mr-1">
-              Gain valuable insights into ETFs with the largest allocation of <span class="text-blue-400">${$stockTicker}</span> in their portfolios.
+              ETFs with the largest estimated holdings in {$stockTicker}.
             </p>
             
           {#if topETFHolder?.length !== 0} 

src/lib/components/UpgradeToPro.svelte

@@ -2,11 +2,12 @@
 
 export let data;
 export let title;
+export let color = '#202020'
 </script>
 
 {#if data?.user?.tier !== 'Pro'}
 <div class="px-5 sm:px-0 shadow-lg">
-<div class="sm:rounded-lg bg-[#202020] pl-10 pr-10 pb-10 pt-5 w-full h-full m-auto -mt-5 relative">
+<div class="sm:rounded-lg bg-[{color}] pl-10 pr-10 pb-10 pt-5 w-full h-full m-auto -mt-5 relative">
 
 <h3 class="text-white font-bold text-xl sm:text-2xl text-center">
     Upgrade to Pro

src/routes/hedge-funds/[slug]/+page.svelte

@@ -3,6 +3,7 @@
   import { screenWidth, numberOfUnreadNotification, displayCompanyName } from '$lib/store';
   import cardBackground from "$lib/images/bg-hedge-funds.png";
   import defaultAvatar from "$lib/images/hedge_funds/default-avatar.png";
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
 
   import { abbreviateNumber, formatString } from '$lib/utils';
 
@@ -11,16 +12,18 @@
   import { onMount } from 'svelte';
   
   export let data;
+
   let isLoaded = false;
   let rawData = data?.getHedgeFundsData;
   let rawList = []
   let displayList = [];
   let optionsData = {};
   let currentPage=1;
-  const itemsPerPage = 100;
+  const itemsPerPage = 50;
   let numOfTrades = rawData?.numberOfStocks;
   let images = {};
 
+  let deactivateContent = data?.user?.tier === 'Pro' ? false : true;
 
   let numOfAssets;
   let changeAssetType = 'Share'
@@ -50,7 +53,7 @@ function addSpyPerformance(data, spyPriceData) {
   const spyPriceMap = new Map(spyPriceData.map(entry => [entry.date, entry.price]));
 
   // Convert data dates to quarter-end dates
-  const quarterData = data.map(item => ({
+  const quarterData = data?.map(item => ({
     ...item,
     date: getQuarterEndDate(item.date)
   }));
@@ -63,7 +66,7 @@ function addSpyPerformance(data, spyPriceData) {
     console.warn(`Starting price for date ${startDate} not found in spyPriceData. Setting initial spyPerformance to 0.`);
   }
 
-  return quarterData.map((item, index) => {
+  return quarterData?.map((item, index) => {
     const spyPrice = spyPriceMap.get(item.date);
 
     if (spyPrice === undefined) {
@@ -679,7 +682,7 @@ function tabFunction(state) {
                           </tr>
                         </thead>
                         <tbody class="p-0">
-                          {#each displayList as item}
+                          {#each deactivateContent ? displayList?.slice(0,5) : displayList as item}
                               <tr on:click={() => goto(`/${item?.type}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#202020] border-b-[#202020] cursor-pointer">
       
                                 <td class="text-gray-200 pb-3 border-b border-b-[#202020]">
@@ -725,6 +728,11 @@ function tabFunction(state) {
                       </table>
                     </div>
 
+                    <div class="hidden sm:block">
+                      <UpgradeToPro data={data} color={'#313131'} title="Get the recent transactions from Hedge Funds to never miss out"/>
+                    </div>
+
+                    {#if !deactivateContent}
                     <div class="hidden sm:flex flex-col items-center mt-10">
                       <!-- Help text -->
                       <span class="text-sm text-gray-200">
@@ -740,6 +748,8 @@ function tabFunction(state) {
                           </button>
                       </div>
                     </div>
+                    {/if}
+
                     
                     
   
@@ -783,7 +793,7 @@ function tabFunction(state) {
                             </tr>
                           </thead>
                             <tbody>
-                              {#each displayList as item,index}
+                              {#each deactivateContent ? displayList?.slice(0,5) : displayList as item,index}
                               <!-- row -->
                               <tr on:click={() => goto(`/${item?.type}/${item?.ticker}`)} class="bg-[#0F0F0F] cursor-pointer">
                                 
@@ -834,6 +844,9 @@ function tabFunction(state) {
                           </table>
                         </div>
 
+                        <UpgradeToPro data={data} title="Get the recent transactions from Hedge Funds to never miss out"/>
+
+                        {#if !deactivateContent}
                         <div class="sm:hidden flex flex-col items-center mt-10">
                           <!-- Help text -->
                           <span class="text-[1rem] text-gray-200">
@@ -849,7 +862,7 @@ function tabFunction(state) {
                               </button>
                           </div>
                         </div>
-    
+                        {/if}
           
             
             
@@ -857,6 +870,8 @@ function tabFunction(state) {
 
                   
                   
+  
+  
                       {:else} 
                       <div class="flex justify-center items-center m-auto sm:mt-24 mt-32 mb-6">
                         <div class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
@@ -867,9 +882,11 @@ function tabFunction(state) {
                       {/if}
   
     
+                  </div>
 
                 </div>
-                </div>
+
+                
 
                 </main>
             </div>