From 179e92f5dc1619620dc6808599bcb93a373b516b Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 12 Feb 2025 12:15:40 +0100
Subject: [PATCH] ui fixes

---
 .../components/Options/GreekExposure.svelte   | 41 ++++++++++++----
 src/lib/components/Options/Volatility.svelte  | 39 +++++++++++----
 src/lib/components/RatingsChart.svelte        | 49 +++++++++++++------
 src/routes/analysts/[slug]/+page.svelte       |  3 +-
 src/routes/insider-tracker/+page.svelte       |  3 +-
 src/routes/login/+page.svelte                 | 15 ++++--
 src/routes/politicians/[slug]/+page.svelte    |  1 +
 src/routes/register/+page.svelte              | 11 +++--
 src/routes/reset-password/+page.svelte        | 10 ++--
 .../statistics/market-cap/+page.svelte        |  6 +--
 10 files changed, 124 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/Options/GreekExposure.svelte b/src/lib/components/Options/GreekExposure.svelte
index 9bbef358..5772a094 100644
--- a/src/lib/components/Options/GreekExposure.svelte
+++ b/src/lib/components/Options/GreekExposure.svelte
@@ -372,15 +372,36 @@
     {#if options !== null}
       <div class="app w-full relative">
         <div class="flex justify-start space-x-2 absolute right-0 top-0 z-10">
-          {#each ["3M", "6M", "1Y"] as item}
-            <label
-              on:click={() => (timePeriod = item)}
-              class="px-3 py-1 text-sm {timePeriod === item
-                ? 'bg-white text-black '
-                : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
-            >
-              {item}
-            </label>
+          {#each ["3M", "6M", "1Y"] as item, index}
+            {#if data?.user?.tier === "Pro" || index === 0}
+              <label
+                on:click={() => (timePeriod = item)}
+                class="px-3 py-1 text-sm {timePeriod === item
+                  ? 'bg-white text-black '
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+              </label>
+            {:else if data?.user?.tier !== "Pro"}
+              <a
+                href="/pricing"
+                class="px-3 py-1 text-sm flex flex-row items-center {timePeriod ===
+                item
+                  ? 'bg-white text-black '
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+                <svg
+                  class="ml-1 -mt-w-3.5 h-3.5 inline-block"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  ><path
+                    fill="#A3A3A3"
+                    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
+                >
+              </a>
+            {/if}
           {/each}
         </div>
 
@@ -462,7 +483,7 @@
                   >{item?.putCallRatio?.toFixed(2)}</span
                 >
               {:else}
-              n/a
+                n/a
               {/if}
             </td>
           </tr>
diff --git a/src/lib/components/Options/Volatility.svelte b/src/lib/components/Options/Volatility.svelte
index aae4e767..330acaab 100644
--- a/src/lib/components/Options/Volatility.svelte
+++ b/src/lib/components/Options/Volatility.svelte
@@ -415,15 +415,36 @@
     {#if options !== null}
       <div class="app w-full relative">
         <div class="flex justify-start space-x-2 absolute right-0 top-0 z-10">
-          {#each ["3M", "6M", "1Y"] as item}
-            <label
-              on:click={() => (timePeriod = item)}
-              class="px-3 py-1 text-sm {timePeriod === item
-                ? 'bg-white text-black '
-                : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
-            >
-              {item}
-            </label>
+          {#each ["3M", "6M", "1Y"] as item, index}
+            {#if data?.user?.tier === "Pro" || index === 0}
+              <label
+                on:click={() => (timePeriod = item)}
+                class="px-3 py-1 text-sm {timePeriod === item
+                  ? 'bg-white text-black '
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+              </label>
+            {:else if data?.user?.tier !== "Pro"}
+              <a
+                href="/pricing"
+                class="px-3 py-1 text-sm flex flex-row items-center {timePeriod ===
+                item
+                  ? 'bg-white text-black '
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+                <svg
+                  class="ml-1 -mt-w-3.5 h-3.5 inline-block"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  ><path
+                    fill="#A3A3A3"
+                    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
+                >
+              </a>
+            {/if}
           {/each}
         </div>
 
diff --git a/src/lib/components/RatingsChart.svelte b/src/lib/components/RatingsChart.svelte
index b239ad68..818697ba 100644
--- a/src/lib/components/RatingsChart.svelte
+++ b/src/lib/components/RatingsChart.svelte
@@ -19,6 +19,7 @@
     CanvasRenderer,
   ]);
 
+  export let data;
   export let symbol;
   export let ratingsList;
   export let numOfRatings = 0;
@@ -57,14 +58,14 @@
     }
 
     // Filter the data based on the calculated start date
-    const filteredData = historicalData.filter((item) => {
-      const itemDate = new Date(item.time);
+    const filteredData = historicalData?.filter((item) => {
+      const itemDate = new Date(item?.time);
       return itemDate >= startDate && itemDate <= currentDate;
     });
 
     // Extract the dates and close values from the filtered data
-    const dates = filteredData.map((item) => item.time);
-    const closeValues = filteredData.map((item) => item.close);
+    const dates = filteredData?.map((item) => item?.time);
+    const closeValues = filteredData?.map((item) => item?.close);
 
     return { dates, closeValues };
   }
@@ -275,15 +276,35 @@
     {#if historicalData?.length > 0}
       <div class="app w-full relative">
         <div class="flex justify-start space-x-2 absolute left-16 top-0 z-10">
-          {#each ["1Y", "3Y", "5Y", "Max"] as item}
-            <label
-              on:click={() => (timePeriod = item)}
-              class="px-4 py-2 {timePeriod === item
-                ? 'bg-white text-black shadow-xl'
-                : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
-            >
-              {item}
-            </label>
+          {#each ["1Y", "3Y", "5Y", "Max"] as item, index}
+            {#if data?.user?.tier === "Pro" || index === 0}
+              <label
+                on:click={() => (timePeriod = item)}
+                class="px-4 py-2 {timePeriod === item
+                  ? 'bg-white text-black shadow-xl'
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+              </label>
+            {:else if data?.user?.tier !== "Pro"}
+              <a
+                href="/pricing"
+                class="px-4 py-2 flex flex-row items-center {timePeriod === item
+                  ? 'bg-white text-black shadow-xl'
+                  : 'text-white bg-table text-opacity-[0.6]'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+              >
+                {item}
+                <svg
+                  class="ml-1 mt-0.5 w-3.5 h-3.5 inline-block"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  ><path
+                    fill="#A3A3A3"
+                    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
+                >
+              </a>
+            {/if}
           {/each}
         </div>
         <h2
@@ -309,7 +330,7 @@
     <div class="flex justify-center items-center h-80">
       <div class="relative">
         <label
-          class="bg-primary rounded-md 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"
+          class="bg-default rounded-md 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-spinner loading-md sm:loading-[1rem] text-gray-400"
diff --git a/src/routes/analysts/[slug]/+page.svelte b/src/routes/analysts/[slug]/+page.svelte
index 8ef522ce..1ab63afd 100644
--- a/src/routes/analysts/[slug]/+page.svelte
+++ b/src/routes/analysts/[slug]/+page.svelte
@@ -553,7 +553,7 @@
                           </td>
                         </tr>
                         {#if checkedSymbol === item?.ticker}
-                          <tr
+                          <tr class="bg-default"
                             ><td colspan="8" class="px-0" style=""
                               ><div class="-mt-0.5 px-0 pb-2">
                                 <div class="relative h-[400px]">
@@ -574,6 +574,7 @@
                                           )}
                                           symbol={item?.ticker}
                                           numOfRatings={item?.ratings}
+                                          {data}
                                         />
                                       </div>
                                     </div>
diff --git a/src/routes/insider-tracker/+page.svelte b/src/routes/insider-tracker/+page.svelte
index 22e7e8a3..1dd6b49f 100644
--- a/src/routes/insider-tracker/+page.svelte
+++ b/src/routes/insider-tracker/+page.svelte
@@ -324,7 +324,7 @@
                         </td>
                       </tr>
                       {#if checkedSymbol === item?.symbol}
-                        <tr
+                        <tr class="bg-default"
                           ><td colspan="9" class="px-0" style=""
                             ><div class="-mt-0.5 px-0 pb-2">
                               <div class="relative h-[400px]">
@@ -349,6 +349,7 @@
                                         numOfRatings={item?.ratings}
                                         title={"Insider Trading"}
                                         addToLast={true}
+                                        {data}
                                       />
                                     </div>
                                   </div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index cc47cae0..bacd305c 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -17,14 +17,16 @@
         case "success":
           if (form?.notVerified) {
             toast.error("Please verify your email first", {
-              style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+              style:
+                "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
             });
             await update();
             break;
           } else form?.notVerified === false;
           {
             toast.success("Login successfully!", {
-              style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+              style:
+                "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
             });
             await update();
             break;
@@ -32,19 +34,22 @@
         case "redirect":
           isClicked = true;
           toast.success("Login successfully!", {
-            style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+            style:
+              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
           });
           await update();
           break;
         case "failure":
           toast.error("Invalid credentials", {
-            style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+            style:
+              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
           });
           await update();
           break;
         case "error":
           toast.error(result.error.message, {
-            style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+            style:
+              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
           });
           break;
         default:
diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte
index bbb684ee..8e619c65 100644
--- a/src/routes/politicians/[slug]/+page.svelte
+++ b/src/routes/politicians/[slug]/+page.svelte
@@ -424,6 +424,7 @@
                                     style="position: relative; height: 0px; z-index: 1;"
                                   >
                                     <RatingsChart
+                                      {data}
                                       title="Transactions"
                                       ratingsList={rawData?.history?.map(
                                         (item) => ({
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 6c1fd0bb..89876dde 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -18,19 +18,22 @@
         case "redirect":
           isClicked = true;
           toast.success("Registration successfully!", {
-            style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+            style:
+              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
           });
           await update();
           break;
         case "failure":
           toast.error("Invalid credentials", {
-            style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+            style:
+              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
           });
           await update();
           break;
         case "error":
           toast.error(result.error.message, {
-            style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+            style:
+              "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
           });
           break;
         default:
@@ -57,8 +60,6 @@
   }
 </script>
 
-
-
 <SEO
   title="Sign Up"
   description="Sign Up to Stocknear to become part of the largest trading community in the world."
diff --git a/src/routes/reset-password/+page.svelte b/src/routes/reset-password/+page.svelte
index 21d7b2fb..6bf8dda5 100644
--- a/src/routes/reset-password/+page.svelte
+++ b/src/routes/reset-password/+page.svelte
@@ -12,29 +12,27 @@
     try {
       await pb.collection("users").requestPasswordReset(email);
       toast.success("Password resetted. Check your emails!", {
-        style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+        style:
+          "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
       });
       goto("/login");
     } catch (err) {
       toast.error(
         { err },
         {
-          style: "border-radius: 200px; background: #2A2E39; color: #fff;",
+          style:
+            "border-radius: 5px; background: #fff; color: #000; border-color: #4B5563; font-size: 15px;",
         },
       );
     }
   }
-
-
 </script>
 
-
 <SEO
   title="Reset Password"
   description="Reset your password to sign in to your Stocknear account."
 />
 
-
 <div
   class="flex flex-col items-center min-h-screen w-full max-w-3xl m-auto mt-40"
 >
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index df98250e..73d63360 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -405,7 +405,7 @@
     >
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
-          <div class="mb-3">
+          <div class="">
             <h1 class="text-xl sm:text-2xl text-white font-bold">Market Cap</h1>
           </div>
 
@@ -431,7 +431,7 @@
               />
 
               <div
-                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
+                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6 mt-3"
               >
                 <div
                   class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
@@ -471,7 +471,7 @@
                 </div>
 
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="bg-gray-800/30 rounded p-4 sm:hover:bg-gray-800/40 transition-colors"
                 >
                   <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
                     <span>1-Year Change</span>