From 976d6556a2772da602ee45ba971e23758010305f Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 11 Mar 2025 02:11:02 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/EarningsSurprise.svelte  |  2 +-
 src/lib/components/WIIM.svelte              |  2 +-
 src/routes/heatmap/+page.svelte             | 29 ++++++++++++---------
 src/routes/stocks/[tickerID]/+layout.svelte | 14 +++++-----
 4 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/EarningsSurprise.svelte b/src/lib/components/EarningsSurprise.svelte
index 50a23a5b..2723ef47 100644
--- a/src/lib/components/EarningsSurprise.svelte
+++ b/src/lib/components/EarningsSurprise.svelte
@@ -66,7 +66,7 @@
 
     <div
       class="text-[1rem] {latestInfoDate(rawData?.date)
-        ? 'bg-blue-100 p-3 rounded-md shadow'
+        ? 'bg-blue-100 dark:bg-[#F9AB00]/10 p-3 rounded-md shadow'
         : ' pl-1'} "
     >
       <div class="mt-1">
diff --git a/src/lib/components/WIIM.svelte b/src/lib/components/WIIM.svelte
index ffac538b..217a7a39 100644
--- a/src/lib/components/WIIM.svelte
+++ b/src/lib/components/WIIM.svelte
@@ -75,7 +75,7 @@
                     <div
                       class="w-1 h-full mr-4 rounded-lg {item?.changesPercentage ===
                       '-'
-                        ? 'bg-white'
+                        ? 'bg-blue-500 dark:bg-white'
                         : item?.changesPercentage >= 0
                           ? 'bg-green-600 dark:bg-[#00FC50]'
                           : 'bg-red-600 dark:bg-[#FF2F1F]'}"
diff --git a/src/routes/heatmap/+page.svelte b/src/routes/heatmap/+page.svelte
index 227d4c4c..512c94ff 100644
--- a/src/routes/heatmap/+page.svelte
+++ b/src/routes/heatmap/+page.svelte
@@ -155,7 +155,7 @@
       >
         <main class="w-full">
           <div class="border-b-[2px] flex justify-between items-center gap-4">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">
               S&P 500 - {selectedTimePeriod} Performance
             </h1>
           </div>
@@ -168,10 +168,10 @@
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button
                     builders={[builder]}
-                    class="border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="shadow-sm border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-gray-300 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                     disabled={isLoading}
                   >
-                    <span class="truncate text-white">Time Period</span>
+                    <span class="truncate">Time Period</span>
                     <svg
                       class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                       viewBox="0 0 20 20"
@@ -198,11 +198,13 @@
                   ></div>
                   <DropdownMenu.Group>
                     {#each ["1D", "1W", "1M", "3M", "6M", "1Y", "3Y"] as item}
-                      <DropdownMenu.Item class="sm:hover:bg-primary">
+                      <DropdownMenu.Item
+                        class="sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                      >
                         <div class="flex items-center">
                           <button
                             on:click={() => getHeatMap(item)}
-                            class="cursor-pointer text-white"
+                            class="cursor-pointer"
                           >
                             <span class="mr-8">{item}</span>
                           </button>
@@ -217,10 +219,10 @@
                 <DropdownMenu.Trigger asChild let:builder>
                   <Button
                     builders={[builder]}
-                    class="border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="shadow-sm border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                     disabled={isLoading || !isLoaded}
                   >
-                    <span class="truncate text-white">Download</span>
+                    <span class="truncate">Download</span>
                     <svg
                       class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                       viewBox="0 0 20 20"
@@ -247,12 +249,14 @@
                   ></div>
                   <DropdownMenu.Group>
                     {#each ["PNG", "JPG", "SVG"] as item}
-                      <DropdownMenu.Item class="sm:hover:bg-primary">
+                      <DropdownMenu.Item
+                        class="sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                      >
                         <div class="flex items-center">
                           <button
                             on:click={() => downloadPlot(item)}
                             disabled={!isLoaded}
-                            class="cursor-pointer text-white"
+                            class="cursor-pointer"
                           >
                             <span class="mr-8">Download {item}</span>
                           </button>
@@ -264,15 +268,14 @@
               </DropdownMenu.Root>
             </div>
           </div>
-          <div class="w-full h-full bg-[#09090B] overflow-hidden">
+          <div class="w-full h-full overflow-hidden">
             {#if isLoading}
               <div class="flex justify-center items-center h-80">
                 <div class="relative">
                   <label
                     class=" h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                   >
-                    <span class="loading loading-bars loading-md text-gray-400"
-                    ></span>
+                    <span class="loading loading-bars loading-md"></span>
                   </label>
                 </div>
               </div>
@@ -286,7 +289,7 @@
               />
             {:else}
               <div class="flex justify-center items-center h-80">
-                <p class="text-gray-400">No data available</p>
+                <p class="">No data available</p>
               </div>
             {/if}
           </div>
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index ef45e6a5..32c9356b 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -616,7 +616,7 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="#fff"
+                                        fill="currentColor"
                                         d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                       /></svg
                                     >
@@ -626,7 +626,7 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="white"
+                                        fill="currentColor"
                                         d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                                       /></svg
                                     >
@@ -648,7 +648,7 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="#fff"
+                                        fill="currentColor"
                                         d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                                       /></svg
                                     >
@@ -658,7 +658,7 @@
                                       xmlns="http://www.w3.org/2000/svg"
                                       viewBox="0 0 16 16"
                                       ><path
-                                        fill="white"
+                                        fill="currentColor"
                                         d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                                       /></svg
                                     >
@@ -680,7 +680,7 @@
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 16 16"
                                 ><path
-                                  fill="white"
+                                  fill="currentColor"
                                   d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
                                 /></svg
                               >
@@ -705,7 +705,7 @@
                               viewBox="0 0 24 24"
                               ><g
                                 fill="none"
-                                stroke="white"
+                                stroke="currentColor"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
                                 stroke-width="1.5"
@@ -721,7 +721,7 @@
                         <!--End Price Alert -->
 
                         <div
-                          class="hidden sm:flex items-end justify-end absolute right-1.5 top-0 {$scoreComponent ===
+                          class="hidden sm:flex items-end justify-end absolute right-1.5 top-12 {$scoreComponent ===
                           false
                             ? 'invisible'
                             : ''}"