ui fix

src/lib/components/AnalystEstimate.svelte

@@ -367,14 +367,14 @@
         endOnTick: false,
         categories: dates,
         crosshair: {
-          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
+          color: $mode === "light" ? "#545454" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
 
         labels: {
           style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
             fontSize: "12px",
           },
         },
@@ -383,7 +383,7 @@
         gridLineWidth: 1,
         gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
         },
         title: { text: null },
         opposite: true,
@@ -394,6 +394,7 @@
           data: valueList,
           color: $mode === "light" ? "#2C6288" : "white",
           animation: false,
+          lineWidth: 2.5,
         },
         {
           name: "Avg",
@@ -404,6 +405,7 @@
           marker: {
             enabled: false,
           },
+          lineWidth: 2.5,
         },
         {
           name: "Low",
@@ -412,6 +414,7 @@
           color: $mode === "light" ? "#8AAAC0" : "#c2c7cf",
           dashStyle: "Dash",
           animation: false,
+          lineWidth: 2.5,
         },
         {
           name: "High",
@@ -419,6 +422,7 @@
           color: $mode === "light" ? "#8AAAC0" : "#c2c7cf",
           dashStyle: "Dash",
           animation: false,
+          lineWidth: 2.5,
         },
       ],
     };
@@ -518,7 +522,7 @@
         type: "datetime",
         labels: {
           style: {
-            color: $mode === "light" ? "black" : "white",
+            color: $mode === "light" ? "#545454" : "white",
             fontSize: "12px",
           },
         },
@@ -527,7 +531,7 @@
         gridLineWidth: 1,
         gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
         },
         title: { text: null },
         opposite: true,
@@ -573,7 +577,7 @@
             // If either high or low is null/undefined, return nulls.
             return high != null && low != null ? [low, high] : [null, null];
           }),
-          color: $mode === "light" ? "black" : "white",
+          color: $mode === "light" ? "#545454" : "white",
           lineWidth: 1, // Thicker lines for error bars
           whiskerLength: 10, // Adjust whisker length as needed
           zIndex: 10,

src/routes/stocks/[tickerID]/forecast/+page.svelte

@@ -91,7 +91,7 @@
       categories = ["Strong Buy", "Buy", "Hold", "Sell", "Strong Sell"];
     }
 
-    optionsBarChart = getPlotOptions() || null;
+    optionsBarChart = getBarChart() || null;
     optionsPieChart = getPieChart() || null;
     config = getPriceForecastChart() || null;
   }
@@ -199,7 +199,7 @@
         categories: xCategories,
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "#545454" : "white",
           },
         },
       },
@@ -210,22 +210,22 @@
         borderColor: "rgba(255, 255, 255, 0.2)",
         borderWidth: 1,
         style: {
-          color: "#fff",
+          color: $mode === "light" ? "#545454" : "white",
           fontSize: "16px",
           padding: "10px",
         },
         borderRadius: 4,
         headerFormat:
-          '<span class="font-semibold text-[1rem]">{point.key}</span><br/>',
+          '<span class="font-semibold text-[1rem] text-white">{point.key}</span><br/>',
         pointFormat:
           '<span style="color:{point.color}">\u25CF</span> ' +
-          "<span class='text-sm'>{series.name}: <b>{point.originalValue}</b><br/></span>",
+          "<span class='text-sm text-white'>{series.name}: <b>{point.originalValue}</b><br/></span>",
       },
       yAxis: {
         gridLineWidth: 1,
         gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
         },
         title: { text: null },
       },
@@ -1290,46 +1290,26 @@
 <!--Start Create Watchlist Modal-->
 <input type="checkbox" id="topAnalystModal" class="modal-toggle" />
 
-<dialog id="topAnalystModal" class="modal overflow-hidden p-3 sm:p-0">
+<dialog id="topAnalystModal" class="modal p-3">
   <label for="topAnalystModal" class="cursor-pointer modal-backdrop"></label>
 
+  <!-- Desktop modal content -->
   <div
-    class="modal-box text-white rounded w-full bg-secondary shadow-sm border border-gray-300 dark:border-gray-600"
+    class="modal-box rounded-md border border-gray-300 dark:border-gray-600 w-full bg-white dark:bg-secondary flex flex-col items-center"
   >
-    <div class="flex flex-row items-center pt-5">
+    <div class=" mb-5 text-center">
-      <h4 class=" text-2xl font-bold text-center m-auto">Steps to install</h4>
+      <h3 class="font-bold text-2xl mb-5">Top Analyst</h3>
-      <label
+      <span class=" text-[1rem] font-normal"
-        for="topAnalystModal"
+        >Filter by only analysts with 4+ stars based on their success rate and
-        class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem]"
+        average return per rating. 4+ star analysts have a high accuracy and
+        high average return per rating.</span
       >
-        <svg
-          class="w-6 h-6 sm:w-8 sm:h-8"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><path
-            fill="white"
-            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
-          /></svg
-        >
-      </label>
     </div>
 
-    <div class=" flex flex-col justify-center items-center text-xl h-full">
+    <div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
-      <ul class="list-decimal list-inside text-left mt-5">
-        <li class="mb-2">Tap on the Safari share button.</li>
-        <li class="mb-2">Tap on "Add to Home Screen."</li>
-        <li class="mb-4">Tap on "Add."</li>
-
-        <p class="text-lg mb-4">
-          Note that web apps on iOS can only be installed using Safari.
-        </p>
-      </ul>
-    </div>
-
-    <div class="boshadow-sm rder-t border-gray-300 dark:border-gray-600 mt-2">
       <label
         for="topAnalystModal"
-        class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
+        class="cursor-pointer mt-4 font-semibold text-xl m-auto flex justify-center"
       >
         Close
       </label>

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -217,55 +217,72 @@
                   id={"topAnalystsInfo"}
                 />
               </div>
-              <div
+              <div class="flex flex-col w-full sm:w-fit items-end justify-end">
-                class="inline-flex justify-center w-full rounded-md sm:w-auto"
+                <label
-              >
+                  for="topAnalystModal"
-                <div
+                  class="ml-auto mb-1 hidden sm:inline-block"
-                  class="bg-gray-300 dark:bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  ><svg
+                    class="size-[18px] text-gray-400 dark:text-dark-400 dark:hover:text-dark-300 sm:hover:text-gray-700 cursor-pointer"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    style="max-width:40px"
+                    ><path
+                      fill-rule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                      clip-rule="evenodd"
+                    ></path></svg
+                  ></label
                 >
-                  {#each tabs as item, i}
+                <div
-                    {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
+                  class="inline-flex justify-center w-full rounded-md sm:w-auto"
-                      <button
+                >
-                        on:click={() => goto("/pricing")}
+                  <div
-                        class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                    class="bg-gray-300 dark:bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
-                      >
+                  >
-                        <span class="relative text-sm block font-semibold">
+                    {#each tabs as item, i}
-                          {item.title}
+                      {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
-                          <svg
+                        <button
-                            class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                          on:click={() => goto("/pricing")}
-                            xmlns="http://www.w3.org/2000/svg"
+                          class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
-                            viewBox="0 0 24 24"
-                            ><path
-                              fill="currentColor"
-                              d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            /></svg
-                          >
-                        </span>
-                      </button>
-                    {:else}
-                      <button
-                        on:click={() => changeTab(i)}
-                        class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
-                        i
-                          ? 'z-0'
-                          : ''} "
-                      >
-                        {#if activeIdx === i}
-                          <div
-                            class="absolute inset-0 rounded-md bg-[#fff]"
-                          ></div>
-                        {/if}
-                        <span
-                          class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
-                          i
-                            ? 'text-black'
-                            : ''}"
                         >
-                          {item.title}
+                          <span class="relative text-sm block font-semibold">
-                        </span>
+                            {item.title}
-                      </button>
+                            <svg
-                    {/if}
+                              class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                  {/each}
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                              /></svg
+                            >
+                          </span>
+                        </button>
+                      {:else}
+                        <button
+                          on:click={() => changeTab(i)}
+                          class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                          i
+                            ? 'z-0'
+                            : ''} "
+                        >
+                          {#if activeIdx === i}
+                            <div
+                              class="absolute inset-0 rounded-md bg-[#fff]"
+                            ></div>
+                          {/if}
+                          <span
+                            class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                            i
+                              ? 'text-black'
+                              : ''}"
+                          >
+                            {item.title}
+                          </span>
+                        </button>
+                      {/if}
+                    {/each}
+                  </div>
                 </div>
               </div>
             </div>
@@ -707,3 +724,33 @@
     </div>
   </div>
 </section>
+
+<!--Start Create Watchlist Modal-->
+<input type="checkbox" id="topAnalystModal" class="modal-toggle" />
+
+<dialog id="topAnalystModal" class="modal p-3">
+  <label for="topAnalystModal" class="cursor-pointer modal-backdrop"></label>
+
+  <!-- Desktop modal content -->
+  <div
+    class="modal-box rounded-md border border-gray-300 dark:border-gray-600 w-full bg-white dark:bg-secondary flex flex-col items-center"
+  >
+    <div class=" mb-5 text-center">
+      <h3 class="font-bold text-2xl mb-5">Top Analyst</h3>
+      <span class=" text-[1rem] font-normal"
+        >Filter by only analysts with 4+ stars based on their success rate and
+        average return per rating. 4+ star analysts have a high accuracy and
+        high average return per rating.</span
+      >
+    </div>
+
+    <div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
+      <label
+        for="topAnalystModal"
+        class="cursor-pointer mt-4 font-semibold text-xl m-auto flex justify-center"
+      >
+        Close
+      </label>
+    </div>
+  </div>
+</dialog>