bugfixing

src/lib/components/Options/Volatility.svelte

@@ -69,7 +69,9 @@
     const volatilitySpread = filteredData?.map((item) =>
       item?.volatilitySpread ? Number(item?.volatilitySpread) : null,
     );
-    const priceList = filteredData?.map((item) => item.price);
+    const priceList = filteredData
+      .map((item) => item.price)
+      .filter((price) => price != null); // Filter out null/undefined
 
     return {
       dateList,

src/routes/index/[tickerID]/+layout.svelte

@@ -374,15 +374,14 @@
         <div class="w-full">
           <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
             <!--Start Mobile Navbar-->
-            <div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
-              <div class="navbar w-full px-4 py-2">
             <div
-                  class="{isScrolled
+              class="fixed top-0 left-0 right-0 z-20 sm:hidden {isScrolled
-                    ? 'border-b border-gray-600 ease-in'
+                ? 'border-b border-gray-300 dark:border-gray-800 ease-in shadow'
                 : 'ease-out'} m-auto w-full"
             >
+              <div class="navbar h-full w-full px-4 bg-white dark:bg-default">
                 <div
-                    class="flex-1 shrink-0 flex flex-row items-center justify-between -mt-2"
+                  class="flex-1 shrink-0 flex flex-row items-center justify-between"
                 >
                   <a
                     href={/^\/(stocks|etf|index)/.test($previousPage || "")
@@ -395,7 +394,7 @@
                       viewBox="0 0 1024 1024"
                       ><g transform="rotate(-90 512 512)"
                         ><path
-                            fill="white"
+                          fill={$mode === "light" ? "#2C6288" : "white"}
                           d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
                         /></g
                       ></svg
@@ -427,7 +426,7 @@
                       viewBox="0 0 24 24"
                       ><path
                         fill="none"
-                          stroke="white"
+                        stroke="currentColor"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="1.5"
@@ -442,7 +441,7 @@
                     class="mr-4"
                     on:click={() =>
                       shareContent(
-                          "https://stocknear.com/index/" + $indexTicker,
+                        "https://stocknear.com/stocks/" + $indexTicker,
                       )}
                   >
                     <svg
@@ -450,7 +449,7 @@
                       viewBox="0 0 24 24"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
-                        stroke="#fff"
+                      stroke="currentColor"
                       ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
                         id="SVGRepo_tracerCarrier"
                         stroke-linecap="round"
@@ -458,7 +457,7 @@
                       ></g><g id="SVGRepo_iconCarrier">
                         <path
                           d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z"
-                            fill="#fff"
+                          fill={$mode === "light" ? "#2C6288" : "white"}
                         ></path>
                       </g></svg
                     >
@@ -480,7 +479,7 @@
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                  fill="#fff"
+                                fill={$mode === "light" ? "#2C6288" : "white"}
                                 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
                             >
@@ -490,7 +489,7 @@
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                  fill="white"
+                                fill={$mode === "light" ? "black" : "white"}
                                 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
                             >
@@ -507,7 +506,7 @@
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                  fill="#fff"
+                                fill={$mode === "light" ? "#2C6288" : "white"}
                                 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
                             >
@@ -517,7 +516,7 @@
                               xmlns="http://www.w3.org/2000/svg"
                               viewBox="0 0 16 16"
                               ><path
-                                  fill="white"
+                                fill={$mode === "light" ? "black" : "white"}
                                 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
                             >
@@ -526,16 +525,13 @@
                       {/if}
                     </div>
                   {:else}
-                      <label
+                    <label for="userLogin" class="cursor-pointer shrink-0 mr-4">
-                        for="userLogin"
-                        class="cursor-pointer shrink-0 mr-4"
-                      >
                       <svg
                         class="w-6 h-6 inline-block"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 16 16"
                         ><path
-                            fill="white"
+                          fill={$mode === "light" ? "black" : "white"}
                           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
                       >
@@ -555,7 +551,7 @@
                       viewBox="0 0 24 24"
                       ><g
                         fill="none"
-                          stroke="white"
+                        stroke="currentColor"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="1.5"
@@ -571,7 +567,6 @@
                 </div>
               </div>
             </div>
-            </div>
             <!--End Mobile Navbar-->
 
             <div class="pt-14 sm:pt-0 w-full px-3 sm:px-0 lg:pr-3">
@@ -944,12 +939,12 @@
   <div class="modal-box rounded-md w-full bg-secondary border border-gray-600">
     <label
       for="addWatchListModal"
-      class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem]"
+      class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem] text-white"
     >
       ✕
     </label>
 
-    <div class="">
+    <div class="text-white">
       <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
       <div class="flex flex-col items-center w-full max-w-3xl bg-secondary">
@@ -966,10 +961,10 @@
                 : 'border-gray-600'}"
             >
               <div class="flex flex-col items-center w-full">
-                <span class="ml-1 mr-auto">
+                <span class="ml-1 text-white mr-auto">
                   {item?.title}
                 </span>
-                <span class="ml-1 text-sm mr-auto">
+                <span class="ml-1 text-white text-sm mr-auto">
                   {item?.ticker?.length}
                   {item?.ticker?.length !== 1 ? "Companies" : "Company"}
                 </span>