ui fixes

src/routes/analysts/top-stocks/+page.svelte

@@ -2,7 +2,7 @@
   import { numberOfUnreadNotification } from "$lib/store";
   import Table from "$lib/components/Table/Table.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -76,31 +76,13 @@
       >
         <main class="w-full  lg:pr-5">
           <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+            <h1 class="mb-3 text-white text-2xl sm:text-3xl font-bold">
               Top Strong Buy Stocks
             </h1>
-            <p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
-              The "Strong Buy" stocks according to the best performing Wall
-              Street analysts.
-            </p>
           </div>
 
-          <div
+          <Infobox text={"Strong Buy stocks by top-rated analysts with a star rating of 4 or above, known for their exceptional accuracy and returns. Stocks are ranked based on the volume of analyst ratings."}/>
-            class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-md h-auto p-5"
+
-          >
-            <svg
-              class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-              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
-            >
-            Strong Buy stocks by top-rated analysts with a star rating of 4 or above,
-            known for their exceptional accuracy and returns. Stocks are ranked based
-            on the volume of analyst ratings.
-          </div>
 
           <div class="w-full m-auto mt-10">
             <Table

src/routes/cramer-tracker/+page.svelte

@@ -5,7 +5,7 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import RatingsChart from "$lib/components/RatingsChart.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
 
   let rawData = processTickerData(data?.getCramerTracker);
@@ -224,22 +224,9 @@
             </p>
           </div>
 
-          <div
+ 
-            class=" w-full text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5"
+
-          >
+          <Infobox text={"We update our data in realtime to provide you with the latest stock picks of Jim Cramer."} />
-            <svg
-              class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-              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>
-            We update our data in realtime to provide you with the latest stock picks
-            of Jim Cramer.
-          </div>
 
           <div class="w-full m-auto mt-10">
             <div
@@ -385,8 +372,9 @@
                   {/each}
                 </tbody>
               </table>
-              <UpgradeToPro {data} />
             </div>
+            <UpgradeToPro {data} />
+
           </div>
         </main>
       </div>

src/routes/etf/etf-providers/+layout.svelte

@@ -59,7 +59,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
+  class="w-full max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>

src/routes/etf/etf-providers/+page.server.ts

@@ -1,6 +1,6 @@
 export const load = async ({ locals }) => {
   const getAllETFProviders = async () => {
-    const { apiKey, apiURL } = locals;
+    const { apiKey, apiURL, user } = locals;
     const response = await fetch(apiURL + "/all-etf-providers", {
       method: "GET",
       headers: {
@@ -9,8 +9,8 @@ export const load = async ({ locals }) => {
       },
     });
 
-    const output = await response.json();
+    let output = await response?.json();
-
+    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
     return output;
   };
 

src/routes/etf/etf-providers/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { abbreviateNumber, formatETFName } from "$lib/utils";
   import { numberOfUnreadNotification } from "$lib/store";
-  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
   let etfProviderList = data?.getAllETFProviders;
 
@@ -119,26 +121,13 @@
 </svelte:head>
 
 <section class="w-full overflow-hidden  m-auto">
-  <div
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 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
-    >
 
-    Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is
+  <Infobox text={"Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is a list of companies offering actively traded ETFs on the U.S. stock market."} />
-    a list of companies offering actively traded ETFs on the U.S. stock market.
-  </div>
 
   <!-- Page wrapper -->
   <div class="flex justify-center w-full m-auto h-full overflow-hidden">
     <!-- Content area -->
+     <div class="w-full">
     <div class="w-full overflow-x-scroll">
       <table
         class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
@@ -150,7 +139,12 @@
           {#each etfProviderList as item,index}
             <!-- row -->
             <tr
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] {index +
+            1 ===
+            etfProviderList?.length &&
+          data?.user?.tier !== 'Pro'
+            ? 'opacity-[0.1]'
+            : ''}"
             >
               <td
                 class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]"
@@ -191,5 +185,8 @@
         </tbody>
       </table>
     </div>
+    <UpgradeToPro {data} />
+  </div>
+
   </div>
 </section>

src/routes/etf/etf-providers/[slug]/+page.server.ts

@@ -4,7 +4,7 @@ export const load = async ({ params, locals }) => {
   };
 
   const getETFProviderData = async () => {
-    const { apiKey, apiURL } = locals;
+    const { apiKey, apiURL, user } = locals;
     const postData = { etfProvider: params.slug };
 
     const response = await fetch(apiURL + "/etf-provider", {
@@ -16,8 +16,8 @@ export const load = async ({ params, locals }) => {
       body: JSON.stringify(postData),
     });
 
-    const output = await response.json();
+    let output = await response?.json();
-
+    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
     return output;
   };
 

src/routes/etf/etf-providers/[slug]/+page.svelte

@@ -2,8 +2,10 @@
   import { abbreviateNumber, formatETFName } from "$lib/utils";
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { onMount } from "svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
   export let data;
   let rawData = data?.getETFProviderData;
@@ -116,6 +118,21 @@
     // Sort using the generic comparison function
     etfProviderData = [...originalData].sort(compareValues)?.slice(0, 50);
   };
+
+
+  function generateStatementInfoHTML() {
+    return `
+     ${etfProviderName} has ${rawData?.length} ETFs listed with a total of ${abbreviateNumber(
+        totalAssets
+      )}
+      in assets under management. The funds have an average expense ratio of ${avgExpenseRatio?.toFixed(
+        2,
+      )}%.
+    `;
+}
+
+let htmlOutput = generateStatementInfoHTML();
+
 </script>
 
 <svelte:head>
@@ -149,26 +166,8 @@
 
 <section class="w-full overflow-hidden m-auto">
   {#if rawData?.length !== 0}
-    <div
+  <div class="mb-5">
-      class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-600 sm:rounded-md h-auto p-5 mb-4"
+    <Infobox text={htmlOutput} />
-    >
-      <svg
-        class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 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
-      >
-
-      {etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(
-        totalAssets,
-        true,
-      )}
-      in assets under management. The funds have an average expense ratio of {avgExpenseRatio?.toFixed(
-        2,
-      )}%.
   </div>
   {/if}
 
@@ -177,7 +176,7 @@
   >
     <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">
-        <div class="text-sm font-normal text-white">Listed Funds</div>
+        <div class="text-[1rem] font-normal text-white">Listed Funds</div>
         <div
           class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
         >
@@ -187,7 +186,7 @@
     </div>
     <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">
-        <div class="text-sm font-normal text-white">Total Assets</div>
+        <div class="text-[1rem] font-normal text-white">Total Assets</div>
         <div
           class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
         >
@@ -197,7 +196,7 @@
     </div>
     <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">
-        <div class="text-sm font-normal text-white">Average Cost</div>
+        <div class="text-[1rem] font-normal text-white">Average Cost</div>
         <div
           class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
         >
@@ -211,6 +210,7 @@
     <!-- Page wrapper -->
     <div class="flex justify-center w-full m-auto h-full overflow-hidden">
       <!-- Content area -->
+       <div class="w-full">
       <div class="w-full overflow-x-auto mt-5">
         <table
           class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
@@ -219,10 +219,15 @@
             <TableHeader {columns} {sortOrders} {sortData} />
           </thead>
           <tbody>
-            {#each etfProviderData as item}
+            {#each etfProviderData as item, index}
               <!-- row -->
               <tr
-                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] {index +
+            1 ===
+            etfProviderData?.length &&
+          data?.user?.tier !== 'Pro'
+            ? 'opacity-[0.1]'
+            : ''}"
               >
                 <td
                   class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
@@ -286,6 +291,9 @@
           </tbody>
         </table>
       </div>
+      <UpgradeToPro {data} />
+    </div>
+
     </div>
   {:else}
     <div

src/routes/ipos/[slug]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import { formatString, abbreviateNumber } from "$lib/utils";
   import { screenWidth } from "$lib/store";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
 
@@ -80,21 +80,11 @@
 
 <section class="w-full overflow-hidden m-auto">
   {#if isLoaded}
-    <div class="flex flex-col justify-center items-center">
+  <div class="mt-3 mb-3">
-      <div
+  <Infobox text={`There have been ${totalIPOs} IPOs on the US stock market in ${year}.`} />
-        class="mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 rounded-md h-auto p-5"
-      >
-        <svg
-          class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-          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
-        >
-        There have been {totalIPOs} IPOs on the US stock market in {year}.
 </div>
+    <div class="flex flex-col justify-center items-center">
+     
 
       <div class="mr-auto flex flex-col jusitfy-start items-start mb-5 mt-5">
         <div class="text-white text-sm sm:text-[1rem] font-medium mr-2">