AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-05 00:07:00 +02:00
parent 4d28e42594
commit 97cbe19d25
3 changed files with 127 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

58
src/lib/components/BullBearSay.svelte
View File

@ -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,22 +85,39 @@ $: {
{#if data?.user?.tier === 'Pro'}
<!--Start Header-->
<div class="w-56 sm:w-56 -mt-2">
<div class="relative right-0 bg-[#313131] rounded-full sm:rounded-lg">
<ul class="relative flex flex-wrap p-1 list-none rounded-lg">
<li class="flex-auto text-center text-sm {mode === 'bullish' ? 'bg-[#057A55] rounded-full sm:rounded-lg' : ''}">
<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">
<span class="ml-1 text-white font-semibold">Bull Case</span>
</label>
</li>
<li class="flex-auto text-center text-sm {mode === 'bearish' ? 'bg-[#E02424] rounded-full sm:rounded-lg' : ''}">
<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">
<span class="ml-1 text-white font-semibold">Bear Case</span>
</label>
</li>
</ul>
</div>
<div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-full sm:rounded-lg p-1 -mt-2">
<AnimateSharedLayout>
{#each tabs as item, i}
<button
on:click={handleMode}
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
? 'z-0'
: ''} "
on:click={() => {
activeIdx = i;
}}
>
{#if activeIdx === i}
<Motion
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">