ui fix

package-lock.json

@@ -43,6 +43,7 @@
         "svelte-intersection-observer-action": "^0.0.4",
         "svelte-lightweight-charts": "^2.2.0",
         "svelte-loading-spinners": "^0.3.6",
+        "svelte-motion": "^0.12.2",
         "svelte-progress-bar": "^3.0.2",
         "svelte-range-slider-pips": "^2.3.1",
         "svelte-tags-input": "^6.0.0",
@@ -3050,12 +3051,26 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+    },
     "node_modules/@types/pug": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
       "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
       "dev": true
     },
+    "node_modules/@types/react": {
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@vercel/nft": {
       "version": "0.26.4",
       "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.26.4.tgz",
@@ -4066,6 +4081,11 @@
         "node": ">=18"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
     "node_modules/culori": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
@@ -4875,6 +4895,19 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framesync": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
+      "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
+      "dependencies": {
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/framesync/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -5142,6 +5175,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -6618,6 +6656,22 @@
       "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.21.2.tgz",
       "integrity": "sha512-XZdgU9dEv3TPjexDRHy5feYrZrJhWqxTki8ClFGpsnC51G3Qkwoa/U7CVG72jYcLDP3p0HiEhRUUevnlryWkHA=="
     },
+    "node_modules/popmotion": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
+      "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
+      "dependencies": {
+        "framesync": "6.1.2",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.1.2",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/popmotion/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -7502,6 +7556,20 @@
       "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
     },
+    "node_modules/style-value-types": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
+      "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/style-value-types/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -7714,6 +7782,21 @@
       "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.6.tgz",
       "integrity": "sha512-mthHQ2TwiwzTWzbFry3CBnVEfzqPOD9WkVw84OfSYzHRq6N9wgQ+yv37u81uPeuLU/ZOIPqhujpXquB1aol5ZQ=="
     },
+    "node_modules/svelte-motion": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/svelte-motion/-/svelte-motion-0.12.2.tgz",
+      "integrity": "sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw==",
+      "dependencies": {
+        "@types/react": "^18.2.42",
+        "framesync": "^6.1.2",
+        "popmotion": "^11.0.5",
+        "style-value-types": "5.1.2",
+        "tslib": "^2.6.2"
+      },
+      "peerDependencies": {
+        "svelte": ">=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
+      }
+    },
     "node_modules/svelte-preprocess": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",

package.json

@@ -84,6 +84,7 @@
     "svelte-intersection-observer-action": "^0.0.4",
     "svelte-lightweight-charts": "^2.2.0",
     "svelte-loading-spinners": "^0.3.6",
+    "svelte-motion": "^0.12.2",
     "svelte-progress-bar": "^3.0.2",
     "svelte-range-slider-pips": "^2.3.1",
     "svelte-tags-input": "^6.0.0",

src/lib/components/BullBearSay.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
 import { stockTicker, displayCompanyName } from "$lib/store";
 import InfoModal from '$lib/components/InfoModal.svelte';
+import { Motion, AnimateSharedLayout } from "svelte-motion";
 
 export let data;
 export let marketMoods = {};
@@ -37,6 +38,16 @@ function handleMode() {
   }
 }
 
+const tabs = [
+    {
+      title: "Bull Case",
+    },
+    {
+      title: "Bear Case",
+    },
+  ];
+  let activeIdx = 0;
+
 $: {
     if($stockTicker && typeof window !== 'undefined') {
         rawData = marketMoods;
@@ -74,23 +85,40 @@ $: {
 
     {#if data?.user?.tier === 'Pro'}
    <!--Start Header-->
-  <div class="w-56 sm:w-56 -mt-2">
+   <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-full sm:rounded-lg p-1 -mt-2">
-    <div class="relative right-0 bg-[#313131] rounded-full sm:rounded-lg">
+    <AnimateSharedLayout>
-      <ul class="relative flex flex-wrap p-1 list-none rounded-lg">
+      {#each tabs as item, i}
-        <li class="flex-auto text-center text-sm {mode === 'bullish' ? 'bg-[#057A55]  rounded-full sm:rounded-lg' : ''}">
+        <button
-          <label on:click={handleMode} class="cursor-pointer border flex items-center justify-center w-full px-0 py-1 mb-0 border-0  rounded-full sm:rounded-lg bg-inherit">
+          on:click={handleMode}
-            <span class="ml-1 text-white font-semibold">Bull Case</span>
+          class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
-          </label>
+            ? 'z-0'
-        </li>
+            : ''} "
-        <li class="flex-auto text-center text-sm {mode === 'bearish' ? 'bg-[#E02424]  rounded-full sm:rounded-lg' : ''}">
+          on:click={() => {
-          <label on:click={handleMode} class="cursor-pointer flex items-center justify-center w-full px-0 py-1 mb-0 border-0  rounded-full sm:rounded-lg bg-inherit">
+            activeIdx = i;
-            <span class="ml-1 text-white font-semibold">Bear Case</span>
+          }}
-          </label>
+        >
-        </li>
+          {#if activeIdx === i}
-      </ul>
+            <Motion
-    </div>
+              layoutId="clicked-btn"
+              transition={{ duration: 0.2 }}
+              let:motion
+            >
+              <div
+                use:motion
+                class="absolute inset-0 rounded-full sm:rounded-lg  {activeIdx === 0 ? 'bg-[#057A55]' : 'bg-[#E02424]'}"
+              ></div>
+            </Motion>
+          {/if}
+          <span
+            class="relative text-sm block font-medium duration-200 text-white">
+            {item.title}
+          </span>
+        </button>
+      {/each}
+    </AnimateSharedLayout>
   </div>
   
+
   <!--End Header-->
     <span class="text-gray-200 text-xs sm:text-[0.85rem] italic mt-6 sm:ml-auto">
       Updated {rawData?.date}