ui fixes

src/lib/components/BullBearSay.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
 import { stockTicker, displayCompanyName } from "$lib/store";
 import InfoModal from '$lib/components/InfoModal.svelte';
+
+export let data;
 export let marketMoods = {};
 
 let rawData = marketMoods;
@@ -25,6 +27,15 @@ function changeMode(state:string) {
     }
 }
 
+function handleMode() {
+  if(mode === 'bullish') {
+    mode = 'bearish'
+    changeMode(mode)
+  } else {
+    mode = 'bullish';
+    changeMode(mode)
+  }
+}
 
 $: {
     if($stockTicker && typeof window !== 'undefined') {
@@ -48,38 +59,40 @@ $: {
           <div class="flex flex-row justify-start mr-auto items-center">
             <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
             <div class="flex flex-row items-center">
-              <label for="pricePredictionInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+              <label for="bullBearCase" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                Market Moods
+                Bull Case vs Bear Case
               </label>
               <InfoModal
-                title={"Market Moods"}
+                title={"Bull Case vs Bear Case"}
                 content={`Before investing, examine both perspectives. We offer brief analyst report summaries, highlighting both positive ("Bulls Say") and negative ("Bears Say") viewpoints on ${$displayCompanyName}`}
-                id={"pricePredictionInfo"}
+                id={"bullBearCase"}
               />
               </div>
 
           </div>
       </div>
 
-
      <!--Start Header-->
      <div role="tablist" class="-mt-2 w-11/12 sm:w-56">
 
       <div class="flex flex-col items-center w-full">
         <div class="tabs flex flex-row justify-start items-center w-full">
-            <button class="w-fit text-[0.9rem] sm:text-[1rem] mr-10 rounded-md transition font-medium hover:text-white {mode === 'bullish' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeMode('bullish'))} >
+          <label class="relative inline-flex cursor-pointer items-center">
-                Bulls Say
+            <input type="checkbox" on:click={handleMode} checked={mode === 'bullish' ? false : true} class="peer sr-only" />
-                <div class="{mode === 'bullish' ? 'bg-[#75D377]' : 'bg-[#0F0F0F]'} mt-1 h-[3px] rounded-full w-[4rem] rounded-full" />
+            <div
-            </button> 
+              class="peer flex h-8 items-center gap-4 rounded-full px-5 bg-[#313131] after:absolute after:left-1 after: after:h-6 after:w-[85px] after:rounded-full {mode === 'bullish' ? 'after:bg-green-600' : 'after:bg-red-600'} after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-focus:outline-none text-sm font-semibold text-white"
-            
+              >
-            <button class="w-fit text-[0.9rem] sm:text-[1rem] sm:mr-10 rounded-md transition font-medium hover:text-white {mode === 'bearish' ? ' text-white' : 'text-[#9A9996]'}" on:click={() => (changeMode('bearish'))} >
+              <span class="mr-2 z-10">Bull Case</span>
-                Bears Say
+              <span class="z-10">Bear Case</span>
-                <div class="{mode === 'bearish' ? 'bg-[#FF2F1F]' : 'bg-[#0F0F0F]'} mt-1 h-[3px] rounded-full w-[4rem] rounded-full" />
+            </div>
-            </button> 
+          </label>
+
+      
         </div>
       </div>
 
     </div>
+    {#if data?.user?.tier === 'Pro'}
 
     <!--End Header-->
     <span class="text-gray-200 text-xs sm:text-[0.85rem] italic mt-6 sm:ml-auto">
@@ -98,10 +111,19 @@ $: {
         {/if}
       </span>
     </div>
+    {:else}
+    <div class="bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-lg rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+      <svg class="mr-1.5 w-5 h-5 sm:w-7 sm:h-7 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>
+      Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+    </div>
+    {/if}
+
     </div>
 
-    <label on:click={() => showFullText = !showFullText} class="cursor-pointer m-auto flex justify-center items-center mt-5">
+    <label on:click={() => showFullText = !showFullText} class="{data?.user?.tier !== 'Pro' ? 'hidden' : ''} cursor-pointer m-auto flex justify-center items-center mt-5">
         <svg class="w-10 h-10 transform {showFullText ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
     </label>
-</div>
+
+
+  </div>
 {/if}

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

@@ -1252,7 +1252,7 @@ function changeChartType() {
                                 
 
                                 <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(marketMoods)?.length !== 0 ? '' : 'hidden'}">
-                                  <BullBearSay marketMoods={marketMoods}/>
+                                  <BullBearSay data={data} marketMoods={marketMoods}/>
                                 </div>
 
                                 {#if WIIM}