ui fixes

src/lib/components/InfoModal.svelte

@@ -25,24 +25,29 @@
 <!-- Desktop modal using dialog component -->
 <input type="checkbox" {id} class="modal-toggle" />
 
-<dialog {id} class="modal modal-bottom sm:modal-middle">
+<dialog {id} class="modal p-3 sm:p-0">
   <label
     for={id}
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
+    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.8]"
   ></label>
 
   <!-- Desktop modal content -->
-  <div class="modal-box w-full bg-[#191919] flex flex-col items-center">
+  <div
-    <div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full" />
+    class="modal-box rounded-md border border-gray-600 w-full bg-secondary flex flex-col items-center"
+  >
+    <div class="mx-auto h-1.5 w-20 flex-shrink-0 rounded-full" />
     <div class="text-white mb-5 text-center">
       <h3 class="font-bold text-2xl mb-5">{title}</h3>
       <span class="text-white text-[1rem] font-normal">{@html content}</span>
     </div>
 
-    <label
+    <div class="border-t border-gray-600 mt-2 w-full">
-      for={id}
+      <label
-      class="sm:hidden cursor-pointer px-7 py-2 mb-5 rounded-full bg-[#0DDE00] text-center text-black text-[1rem] font-normal"
+        for={id}
-      >OK</label
+        class="mt-4 font-semibold text-white text-xl m-auto flex justify-center cursor-pointer"
-    >
+      >
+        Close
+      </label>
+    </div>
   </div>
 </dialog>

src/routes/market-mover/premarket/gainers/+layout.server.ts

@@ -1,5 +1,5 @@
 export const load = async ({ locals, setHeaders }) => {
-  const { apiURL, apiKey } = locals;
+  const { apiURL, apiKey, user } = locals;
 
 
   const getMarketMover = async () => {
@@ -13,8 +13,9 @@ export const load = async ({ locals, setHeaders }) => {
       body: JSON.stringify(postData),
     });
 
-    const output = await response.json();
+    let  output = await response.json();
     setHeaders({ "cache-control": "public, max-age=60*5" });
+    output = user?.tier !== "Pro" ? output?.slice(0, 5) : output;
 
     return output;
   };

src/routes/market-mover/premarket/gainers/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+
   export let data;
 
   let rawData = data?.getMarketMover;
@@ -18,10 +20,14 @@
     { name: "% Change", rule: "changesPercentage" },
     { name: "Volume", rule: "volume" },
   ];
+
+  const hideLastRow = true;
 </script>
 
 {#if rawData?.length > 0}
-  <Table {data} {rawData} {excludedRules} {defaultList} />
+  <Table {data} {rawData} {excludedRules} {defaultList} {hideLastRow} />
+
+  <UpgradeToPro {data} />
 {:else}
   <div
     class="w-full text-white text-start p-3 sm:p-5 mb-10 mt-3 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"

src/routes/market-mover/premarket/losers/+layout.server.ts

@@ -1,5 +1,5 @@
 export const load = async ({ locals, setHeaders }) => {
-  const { apiURL, apiKey } = locals;
+  const { apiURL, apiKey, user } = locals;
 
 
   const getMarketMover = async () => {
@@ -13,8 +13,9 @@ export const load = async ({ locals, setHeaders }) => {
       body: JSON.stringify(postData),
     });
 
-    const output = await response.json();
+    let  output = await response.json();
     setHeaders({ "cache-control": "public, max-age=60*5" });
+    output = user?.tier !== "Pro" ? output?.slice(0, 5) : output;
 
     return output;
   };

src/routes/market-mover/premarket/losers/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+
   export let data;
 
   let rawData = data?.getMarketMover;
@@ -18,10 +20,14 @@
     { name: "% Change", rule: "changesPercentage" },
     { name: "Volume", rule: "volume" },
   ];
+
+  const hideLastRow = true;
 </script>
 
 {#if rawData?.length > 0}
-  <Table {data} {rawData} {excludedRules} {defaultList} />
+  <Table {data} {rawData} {excludedRules} {defaultList} {hideLastRow} />
+
+  <UpgradeToPro {data} />
 {:else}
   <div
     class="w-full text-white text-start p-3 sm:p-5 mb-10 mt-3 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"