From 48c60f408f74b399db939755e8783ca59929f741 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 29 Oct 2024 11:47:56 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/Table/TableHeader.svelte |   9 +-
 src/lib/components/UpgradeToPro.svelte      | 150 ++++++++++++--------
 src/routes/analysts/+page.svelte            |  96 +++----------
 src/routes/analysts/top-stocks/+page.svelte |  86 +++--------
 4 files changed, 134 insertions(+), 207 deletions(-)

diff --git a/src/lib/components/Table/TableHeader.svelte b/src/lib/components/Table/TableHeader.svelte
index df61a0a6..96eb704d 100644
--- a/src/lib/components/Table/TableHeader.svelte
+++ b/src/lib/components/Table/TableHeader.svelte
@@ -5,7 +5,7 @@
 
   const SortIcon = ({ sortOrder }) => `
     <svg class="flex-shrink-0 w-4 h-4 inline-block ${
-      sortOrder === 'asc' ? 'rotate-180' : sortOrder === 'desc' ? '' : 'hidden'
+      sortOrder === "asc" ? "rotate-180" : sortOrder === "desc" ? "" : "hidden"
     }" viewBox="0 0 20 20" fill="currentColor" style="max-width:50px">
       <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
     </svg>
@@ -16,10 +16,13 @@
   {#each columns as column}
     <th
       on:click={() => sortData(column.key)}
-      class="cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap {column.align === 'right' ? 'text-end' : ''}"
+      class="cursor-pointer select-none text-white font-semibold text-sm whitespace-nowrap {column.align ===
+      'right'
+        ? 'text-end'
+        : ''}"
     >
       {column.label}
       {@html SortIcon({ sortOrder: sortOrders[column.key].order })}
     </th>
   {/each}
-</tr>
\ No newline at end of file
+</tr>
diff --git a/src/lib/components/UpgradeToPro.svelte b/src/lib/components/UpgradeToPro.svelte
index d37b18cd..210e72ea 100644
--- a/src/lib/components/UpgradeToPro.svelte
+++ b/src/lib/components/UpgradeToPro.svelte
@@ -1,68 +1,96 @@
-<script lang='ts'>
-
-export let data;
-export let title;
-export let color = '#27272A'
+<script lang="ts">
+  export let data;
+  export let title;
+  export let color = "#27272A";
 </script>
 
-{#if data?.user?.tier !== 'Pro'}
-<div class="px-5 sm:px-0 shadow-lg ">
-<div class="sm:rounded-lg bg-[{color}] pl-10 pr-10 pb-10 pt-5 w-full h-full m-auto -mt-5 relative">
+{#if data?.user?.tier !== "Pro"}
+  <div class="px-0 flex justify-center items-center">
+    <div
+      class="rounded bg-[{color}] pl-10 pr-10 text-center 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
+      </h3>
+      <div
+        class="text-white text-center text-sm sm:text-[1rem] pt-5 text-center"
+      >
+        {title}
+      </div>
 
-<h3 class="text-white font-bold text-xl sm:text-2xl text-center">
-    Upgrade to Pro
-</h3>
-<div class="text-white text-center text-sm sm:text-[1rem] pt-5 text-center">
-    {title}
-</div>
+      <!--Start Market Cap Group-->
+      <h2 class="text-center text-lg text-white font-bold mb-3 mt-3">
+        and even more...
+      </h2>
 
+      <div class="pt-3 flex justify-center items-center m-auto">
+        <div class="grid grid-cols-1 sm:grid-cols-2 m-auto">
+          <!-- Column 1 -->
+          <div class="mb-4">
+            <ul
+              class="list-disc space-y-4 sm:space-y-1 m-auto text-center sm:text-start w-48 sm:w-full"
+            >
+              <li class="mb-2 cursor-pointer">
+                <a href="/list/mega-cap-stocks" class="text-white text-sm"
+                  >Unlimited access to all data and tools</a
+                >
+              </li>
+              <li class="mb-2 cursor-pointer">
+                <a href="/list/large-cap-stocks" class="text-white text-sm"
+                  >Unlimited Options Data</a
+                >
+              </li>
+            </ul>
+          </div>
 
-<!--Start Market Cap Group-->
-<h2 class="text-center text-lg text-white font-bold mb-3 mt-3">and even more...</h2>
+          <!-- Column 2 -->
+          <div class="sm:ml-10">
+            <ul
+              class="list-disc space-y-1 text-center sm:text-start w-48 sm:w-full"
+            >
+              <li class="mb-2 cursor-pointer">
+                <a href="/list/small-cap-stocks" class="text-white text-sm"
+                  >Unlimited Wall Street Analysts Ratings</a
+                >
+              </li>
+              <li class="mb-2 cursor-pointer">
+                <a href="/list/nano-cap-stocks" class="text-white text-sm"
+                  >Unlimited Price Alerts</a
+                >
+              </li>
+              <!-- ...other list items -->
+            </ul>
+          </div>
+        </div>
+      </div>
 
-<div class="pt-3 flex justify-center items-center m-auto">
-    <div class="grid grid-cols-1 sm:grid-cols-2 m-auto">
-    <!-- Column 1 -->
-    <div class="mb-4">
-        <ul class="list-disc space-y-4 sm:space-y-1 m-auto text-center sm:text-start w-48 sm:w-full">
-            <li class="mb-2 cursor-pointer">
-                <a href="/list/mega-cap-stocks" class="text-white text-sm">Unlimited access to all data and tools</a>
-            </li>
-            <li class="mb-2 cursor-pointer">
-                <a href="/list/large-cap-stocks" class="text-white text-sm ">Unlimited Options Data</a>
-            </li>
-        </ul>
+      <!--End Market Cap Group-->
+
+      <a
+        href="/pricing"
+        class="mt-10 flex justify-center items-center w-56 m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
+      >
+        Become a Pro
+        <span
+          class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
+        >
+          <svg
+            class="w-4 h-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><g transform="rotate(90 12 12)"
+              ><g fill="none"
+                ><path
+                  d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
+                /><path
+                  fill="white"
+                  d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
+                /></g
+              ></g
+            ></svg
+          >
+        </span>
+      </a>
     </div>
-                    
-    <!-- Column 2 -->
-    <div class="sm:ml-10">
-        <ul class="list-disc space-y-1 text-center sm:text-start w-48 sm:w-full">
-            <li class="mb-2 cursor-pointer">
-                <a href="/list/small-cap-stocks" class="text-white text-sm ">Unlimited Wall Street Analysts Ratings</a>
-            </li>
-            <li class="mb-2 cursor-pointer">
-                <a href="/list/nano-cap-stocks" class="text-white text-sm ">Unlimited Price Alerts</a>
-            </li>
-        <!-- ...other list items -->
-        </ul>
-    </div>
-
-
-    </div>
-</div>
-
-<!--End Market Cap Group-->
-
-
-
-<a href="/pricing" class="mt-10 flex justify-center items-center w-56 m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group">
-    Become a Pro
-    <span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
-        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
-    </span>
-</a>
-
-</div>
-
-</div>
-{/if}
\ No newline at end of file
+  </div>
+{/if}
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 4c88f110..4914eba9 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -146,9 +146,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li class="text-gray-300">Top Wall Street Analysts</li>
@@ -161,65 +161,13 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <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"
-                  >
-                    Top Wall Street Analysts
-                  </h1>
-                </div>
-
-                <span
-                  class="text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  A performance-based ranking of Wall Street Analysts.
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div
-                class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
-              >
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-4">
-                  <img
-                    class="w-36 ml-2"
-                    src={cloudFrontUrl + "/assets/analyst_logo.png"}
-                    alt="logo"
-                    loading="lazy"
-                  />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[3px]">
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+              Top Wall Street Analysts
+            </h1>
+            <p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
+              A list of Wall Street Analysts, ranked by their performance
+            </p>
           </div>
 
           <div class="w-screen sm:w-full m-auto mt-16">
@@ -243,7 +191,7 @@
                           : ''}"
                       >
                         <td
-                          class="text-white text-sm sm:text-[1rem] font-semibold text-white text-center"
+                          class="text-white text-sm sm:text-[1rem] text-white text-center"
                         >
                           {item?.rank}
                         </td>
@@ -257,7 +205,7 @@
                               class="sm:hover:text-white text-blue-400 font-medium"
                               >{item?.analystName}
                             </a>
-                            <span class="text-white">{item?.companyName} </span>
+                            <!--<span class="text-white">{item?.companyName} </span>-->
                             <div class="flex flex-row items-center mt-1">
                               {#each Array.from({ length: 5 }) as _, i}
                                 {#if i < Math.floor(item?.analystScore)}
@@ -297,7 +245,7 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {#if Number(item?.successRate) >= 0}
                             <span class="text-[#00FC50]"
@@ -307,7 +255,7 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
                         >
                           {#if Number(item?.avgReturn) >= 0}
                             <span class="text-[#00FC50]"
@@ -321,7 +269,7 @@
                         </td>
 
                         <td
-                          class="text-end font-semibold text-white text-sm sm:text-[1rem] whitespace-nowrap"
+                          class="text-end text-white text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.totalRatings}
                         </td>
@@ -352,11 +300,6 @@
                   </tbody>
                 </table>
               </div>
-
-              <UpgradeToPro
-                {data}
-                title="Get stock forecasts from Wall Street's highest rated professionals"
-              />
             {:else}
               <div class="flex justify-center items-center h-80">
                 <div class="relative">
@@ -371,6 +314,11 @@
               </div>
             {/if}
           </div>
+
+          <UpgradeToPro
+            {data}
+            title="Get stock forecasts from Wall Street's highest rated professionals"
+          />
         </main>
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
@@ -383,7 +331,7 @@
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
                   <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -403,7 +351,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Stocks Picks ⭐
+                  Top Stocks Picks
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
@@ -422,7 +370,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Shorted Stocks 🍋
+                  Top Shorted Stocks
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
diff --git a/src/routes/analysts/top-stocks/+page.svelte b/src/routes/analysts/top-stocks/+page.svelte
index 65ad098f..34752680 100644
--- a/src/routes/analysts/top-stocks/+page.svelte
+++ b/src/routes/analysts/top-stocks/+page.svelte
@@ -150,9 +150,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li class="text-gray-300">Top Analyst Stocks</li>
@@ -165,65 +165,14 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <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"
-                  >
-                    Top Stocks
-                  </h1>
-                </div>
-
-                <span
-                  class="text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  Uncover 'Strong Buy' stocks from 5-star Wall Street analysts
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div
-                class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
-              >
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-0">
-                  <img
-                    class="w-28 ml-6"
-                    src={cloudFrontUrl + "/assets/wsb_diamond_hands_logo.png"}
-                    alt="logo"
-                    loading="lazy"
-                  />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[3px]">
+            <h1 class="mb-1 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
@@ -331,11 +280,6 @@
                   </tbody>
                 </table>
               </div>
-
-              <UpgradeToPro
-                {data}
-                title="Get stock forecasts from Wall Street's highest rated professionals"
-              />
             {:else}
               <div class="flex justify-center items-center h-80">
                 <div class="relative">
@@ -350,6 +294,10 @@
               </div>
             {/if}
           </div>
+          <UpgradeToPro
+            {data}
+            title="Get stock forecasts from Wall Street's highest rated professionals"
+          />
         </main>
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
@@ -363,7 +311,7 @@
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
                   <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -383,7 +331,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Analyst 📊
+                  Top Analyst
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
@@ -402,7 +350,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Top Shorted Stocks 🍋
+                  Top Shorted Stocks
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>