From 9a667443c202d021f2a722417870f860190228a7 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 7 Nov 2024 19:09:32 +0100
Subject: [PATCH] ui fixes

---
 src/routes/watchlist/+layout.svelte       |  2 +-
 src/routes/watchlist/options/+page.svelte | 10 +++++++---
 src/routes/watchlist/stocks/+page.svelte  | 10 +++++++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte
index 84a4e9f4..5a6228fe 100644
--- a/src/routes/watchlist/+layout.svelte
+++ b/src/routes/watchlist/+layout.svelte
@@ -53,7 +53,7 @@
 
           <nav class=" border-b-[2px] overflow-x-scroll whitespace-nowrap">
             <ul
-              class="flex flex-row items-center w-full text-sm sm:text-lg text-white"
+              class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
             >
               {#each tabs as item, i}
                 <a
diff --git a/src/routes/watchlist/options/+page.svelte b/src/routes/watchlist/options/+page.svelte
index bb8d5ee3..bbe183e2 100644
--- a/src/routes/watchlist/options/+page.svelte
+++ b/src/routes/watchlist/options/+page.svelte
@@ -3,8 +3,7 @@
 
   //import MiniPlot from '$lib/components/MiniPlot.svelte';
   import { abbreviateNumber } from "$lib/utils";
-  import { goto } from "$app/navigation";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
   import { onMount } from "svelte";
   import toast from "svelte-french-toast";
 
@@ -198,6 +197,11 @@
                     </span>
                   </label>
                 {/if}
+
+                <h2 class="font-semibold text-white text-xl mr-auto">
+                  {optionsWatchlist?.length} Options
+                </h2>
+
                 <label
                   on:click={() => (editMode = !editMode)}
                   class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
@@ -430,7 +434,7 @@
                 </span>
                 <a
                   href="/options-flow"
-                  class="py-3 rounded-lg w-64 flex mt-5 justify-center items-center m-auto text-white border border-gray-600 group"
+                  class="py-3 sm:hover:bg-[#27272A] rounded-lg w-64 flex mt-5 justify-center items-center m-auto text-white border border-gray-600 group"
                 >
                   <span class="font-semibold text-[1rem]"
                     >Follow the Whales
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index 4c28762a..5d32f727 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -687,7 +687,7 @@
         <main class="w-full">
           {#if isLoaded}
             <div
-              class="flex w-full sm:w-[50%] md:w-auto px-2 sm:px-0 mb-10 {!data?.user
+              class="flex w-full sm:w-[50%] md:w-auto mb-10 {!data?.user
                 ? 'hidden'
                 : 'md:block'}"
             >
@@ -699,7 +699,7 @@
               <div
                 class="{$screenWidth < 640
                   ? 'grid grid-cols-2'
-                  : ''} gap-x-3 gap-y-3 sm:gap-x-0 sm:gap-y-0 px-2 sm:px-0 relative inline-block text-left w-full flex flex-col sm:flex-row items-center"
+                  : ''} gap-x-3 gap-y-3 sm:gap-x-0 sm:gap-y-0 relative inline-block text-left w-full flex flex-col sm:flex-row items-center"
               >
                 <div class="order-0 w-full sm:w-fit">
                   <DropdownMenu.Root>
@@ -821,7 +821,7 @@
                     {/if}
                     <label
                       on:click={handleEditMode}
-                      class="border text-sm border-gray-600 sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 pl-3 pr-4 text-white bg-[#09090B] sm:hover:bg-[#27272A] ease-out sm:hover:text-red-500"
+                      class="border text-sm border-gray-600 sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2.5 px-3 text-white bg-[#09090B] sm:hover:bg-[#27272A] ease-out sm:hover:text-red-500"
                     >
                       <svg
                         class="inline-block w-5 h-5"
@@ -1100,6 +1100,10 @@
               <!--Start Table of Watchlist-->
               {#if watchList?.length !== 0}
                 <div class="w-full">
+                  <h2 class="font-semibold text-white text-xl">
+                    {watchList?.length} Stocks
+                  </h2>
+
                   <div class="w-full overflow-x-scroll">
                     <table
                       class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"