From d33fd58ecf153ea7c258df9a4d1b7e738de64075 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 14 Jun 2024 12:40:45 +0200
Subject: [PATCH] ui fixes

---
 src/routes/analysts/+page.svelte            | 8 ++++----
 src/routes/analysts/[slug]/+page.svelte     | 2 +-
 src/routes/analysts/top-stocks/+page.svelte | 2 +-
 src/routes/market-mover/+page.svelte        | 4 ++--
 src/routes/most-shorted-stocks/+page.svelte | 9 +++++----
 src/routes/most-shorted-stocks/+page.ts     | 2 ++
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 0b180865..729f53d9 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -166,7 +166,7 @@ $: {
                       <tbody>
                         {#each analytRatingList as item, index}
 
-                        <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index % 2 === 0 ? 'bg-opacity-[0.25] bg-[#323239]' : 'bg-[#0F0F0F]'} {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} border-b-[#0F0F0F] cursor-pointer">
+                        <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
                           <td class="text-white text-[1rem] font-medium text-white text-end">
                             {item?.rank}
                           </td>
@@ -202,13 +202,13 @@ $: {
                           </td>
                         
 
-                          <td class="text-end text-sm font-medium text-white">
+                          <td class="text-end text-sm font-semibold text-white">
                             {#if Number(item?.successRate) >= 0}
                             <span class="text-[#37C97D]">{Number(item?.successRate)?.toFixed(2)}%</span>
                             {/if}
                           </td>
 
-                            <td class="text-end text-sm font-medium text-white">
+                            <td class="text-end text-sm font-semibold text-white">
                               {#if Number(item?.avgReturn) >= 0}
                                 <span class="text-[#37C97D]">{Number(item?.avgReturn)?.toFixed(2)}%</span>
                               {:else}
@@ -216,7 +216,7 @@ $: {
                               {/if}
                             </td>
 
-                            <td class="text-end font-medium text-white text-sm">
+                            <td class="text-end font-semibold text-white text-sm">
                               {item?.totalRatings}
                             </td>
 
diff --git a/src/routes/analysts/[slug]/+page.svelte b/src/routes/analysts/[slug]/+page.svelte
index 621928e0..cd56dc7c 100644
--- a/src/routes/analysts/[slug]/+page.svelte
+++ b/src/routes/analysts/[slug]/+page.svelte
@@ -251,7 +251,7 @@ function sectorSelector(sector) {
                           <tbody>
                             {#each ratingsList as item, index}
     
-                            <tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index % 2 === 0 ? 'bg-opacity-[0.25] bg-[#323239]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F] cursor-pointer">
+                            <tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] cursor-pointer">
     
                               <td class="text-sm text-start">
                                 <div class="flex flex-col items-start w-20 sm:w-fit">
diff --git a/src/routes/analysts/top-stocks/+page.svelte b/src/routes/analysts/top-stocks/+page.svelte
index e4f68a26..c429d961 100644
--- a/src/routes/analysts/top-stocks/+page.svelte
+++ b/src/routes/analysts/top-stocks/+page.svelte
@@ -178,7 +178,7 @@
                         <tbody>
                           {#each analytRatingList as item, index}
   
-                          <tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index % 2 === 0 ? 'bg-opacity-[0.25] bg-[#323239]' : 'bg-[#0F0F0F]'} {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} border-b-[#0F0F0F] cursor-pointer">
+                          <tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
                             <td class="text-white text-sm font-medium text-white text-end">
                               {item?.rank}
                             </td>
diff --git a/src/routes/market-mover/+page.svelte b/src/routes/market-mover/+page.svelte
index 26e2f838..a530b321 100644
--- a/src/routes/market-mover/+page.svelte
+++ b/src/routes/market-mover/+page.svelte
@@ -351,7 +351,7 @@ $: {
       </thead>
       <tbody>
         {#each gainerLoserActive as item, index}
-        <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index % 2 === 0 ? 'bg-opacity-[0.25] bg-[#323239]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F] cursor-pointer">
+        <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] cursor-pointer">
   
         <td class="border-b-[#0F0F0F]">
           <div class="flex flex-col">
@@ -380,7 +380,7 @@ $: {
           <div class="flex flex-row justify-end items-center">
 
             <div class="flex flex-col items-center">
-              <span class="text-white font-bold text-md ml-auto">${item.price?.toFixed(2)}</span>
+              <span class="text-white font-medium text-md ml-auto">${item.price?.toFixed(2)}</span>
               <div class="flex flex-row mt-1">
                 {#if item?.changesPercentage >=0}
                   <svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
diff --git a/src/routes/most-shorted-stocks/+page.svelte b/src/routes/most-shorted-stocks/+page.svelte
index 6e52339c..2bac74b3 100644
--- a/src/routes/most-shorted-stocks/+page.svelte
+++ b/src/routes/most-shorted-stocks/+page.svelte
@@ -4,7 +4,8 @@
   import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 	import { abbreviateNumber } from '$lib/utils.js';
   import { onMount } from 'svelte';
-  
+  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+
   
     export let data;
     let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@@ -96,7 +97,7 @@
                     <div>
                       <div class="flex flex-row justify-center items-center">
                         <h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
-                           Most Shorted Stocks
+                           Shorted Stocks
                         </h1>
                       </div>
             
@@ -171,7 +172,7 @@
                         <tbody>
                           {#each shortedList as item, index}
   
-                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index % 2 === 0 ? 'bg-[#202020]' : 'bg-[#0F0F0F]'}  border-b-[#0F0F0F] cursor-pointer">
+                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === shortedList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
                             <td class="text-white text-sm font-medium text-white text-end">
                               {index+1}
                             </td>
@@ -213,7 +214,7 @@
                       </table>
                   </div>
                     <InfiniteLoading on:infinite={infiniteHandler} />
-
+                    <UpgradeToPro data={data} title="Get the most shorted stocks on the market to never miss out the next short squeeze"/>
   
                 </div>
 
diff --git a/src/routes/most-shorted-stocks/+page.ts b/src/routes/most-shorted-stocks/+page.ts
index 05e0afac..825a06e3 100644
--- a/src/routes/most-shorted-stocks/+page.ts
+++ b/src/routes/most-shorted-stocks/+page.ts
@@ -34,6 +34,8 @@ export const load = async ({parent}) => {
 
     output = await response.json();
 
+    output = data?.user?.tier !== 'Pro' ? output?.slice(0,6) : output;
+
     setCache('', output, 'getMostShortedStocks');
 
     }