From 179c18456bec951e7e232f159ab4c383a30c6843 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 11 Mar 2025 23:32:35 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/NotificationBell.svelte |  4 +-
 src/routes/etf/[tickerID]/+page.svelte     | 49 ++++------------------
 src/routes/stocks/[tickerID]/+page.svelte  | 49 ++++------------------
 3 files changed, 18 insertions(+), 84 deletions(-)

diff --git a/src/lib/components/NotificationBell.svelte b/src/lib/components/NotificationBell.svelte
index bbb969e8..8498308b 100644
--- a/src/lib/components/NotificationBell.svelte
+++ b/src/lib/components/NotificationBell.svelte
@@ -19,10 +19,10 @@
   >
     <Bell class="h-[20px] w-[20px] " />
 
-    {#if hasUnreadElement}
+    {#if hasUnreadElement && $numberOfUnreadNotification > 0}
       <div class="absolute top-2 -right-2 flex">
         <div
-          class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2"
+          class="relative inline-flex text-xs text-white dark:text-black font-bold w-[18px] h-[18px] bg-default dark:bg-white border-[1px] dark:border-gray-800 rounded-full -top-2 right-2"
         >
           <span class="m-auto"
             >{$numberOfUnreadNotification <= 9
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index b2c38cea..060a98d5 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -678,34 +678,6 @@
               <div
                 class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-300 dark:border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
               >
-                <div class="flex items-center justify-between py-1 sm:pt-0.5">
-                  <div class="hide-scroll overflow-x-auto">
-                    <ul
-                      class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
-                    >
-                      {#each intervals as interval}
-                        <li>
-                          <button
-                            on:click={() => changeData(interval)}
-                            class="cursor-pointer px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
-                          >
-                            <span
-                              class="block {displayData === interval
-                                ? 'text-muted dark:'
-                                : 'text-muted dark:text-gray-400'}"
-                              >{interval}</span
-                            >
-                            <div
-                              class="{displayData === interval
-                                ? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
-                                : 'bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
-                            />
-                          </button>
-                        </li>
-                      {/each}
-                    </ul>
-                  </div>
-                </div>
                 <div class="h-[360px]">
                   <div
                     class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-300 dark:border-gray-300 dark:border-gray-800 p-6 text-center md:p-12"
@@ -722,26 +694,21 @@
               >
                 <div class="flex items-center justify-between py-1 sm:pt-0.5">
                   <div class="hide-scroll overflow-x-auto">
-                    <ul
-                      class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
-                    >
+                    <ul class="flex space-x-2">
                       {#each intervals as interval}
                         <li>
                           <button
                             on:click={() => changeData(interval)}
-                            class="cursor-pointer px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
+                            class="cursor-pointer focus:outline-none"
                           >
                             <span
-                              class="block {displayData === interval
-                                ? 'text-muted dark:text-white'
-                                : 'text-muted dark:text-gray-400'}"
-                              >{interval}</span
+                              class="block px-3 py-1 rounded transition-colors duration-100 ease-in-out
+          {displayData === interval
+                                ? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
+                                : 'bg-transparent text-gray-600 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
                             >
-                            <div
-                              class="{displayData === interval
-                                ? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
-                                : 'bg-white dark:bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
-                            />
+                              {interval}
+                            </span>
                           </button>
                         </li>
                       {/each}
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index b4768dac..08be1442 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -682,34 +682,6 @@
               <div
                 class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
               >
-                <div class="flex items-center justify-between py-1 sm:pt-0.5">
-                  <div class="hide-scroll overflow-x-auto">
-                    <ul
-                      class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
-                    >
-                      {#each intervals as interval}
-                        <li>
-                          <button
-                            on:click={() => changeData(interval)}
-                            class="cursor-pointer px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
-                          >
-                            <span
-                              class="block {displayData === interval
-                                ? 'text-muted dark:text-white'
-                                : 'text-muted dark:text-gray-400'}"
-                              >{interval}</span
-                            >
-                            <div
-                              class="{displayData === interval
-                                ? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
-                                : 'bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
-                            />
-                          </button>
-                        </li>
-                      {/each}
-                    </ul>
-                  </div>
-                </div>
                 <div class="h-[360px]">
                   <div
                     class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-300 dark:border-gray-800 p-6 text-center md:p-12"
@@ -726,26 +698,21 @@
               >
                 <div class="flex items-center justify-between py-1 sm:pt-0.5">
                   <div class="hide-scroll overflow-x-auto">
-                    <ul
-                      class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
-                    >
+                    <ul class="flex space-x-2">
                       {#each intervals as interval}
                         <li>
                           <button
                             on:click={() => changeData(interval)}
-                            class="cursor-pointer px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
+                            class="cursor-pointer focus:outline-none"
                           >
                             <span
-                              class="block {displayData === interval
-                                ? 'text-muted dark:text-white'
-                                : 'text-muted dark:text-gray-400'}"
-                              >{interval}</span
+                              class="block px-3 py-1 rounded transition-colors duration-100 ease-in-out
+          {displayData === interval
+                                ? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
+                                : 'bg-transparent text-gray-600 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
                             >
-                            <div
-                              class="{displayData === interval
-                                ? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
-                                : 'bg-white dark:bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
-                            />
+                              {interval}
+                            </span>
                           </button>
                         </li>
                       {/each}