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

redesign website by adding shadcn-svelte

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-14 23:22:40 +02:00
parent eeb3420ff7
commit 1a7403876f
244 changed files with 5358 additions and 4947 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.json
View File

@ -3,6 +3,7 @@
"style": "default",
"tailwind": {
"config": "tailwind.config.js",
"typescript": false,
"css": "src/app.css",
"baseColor": "slate"
},

3743
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -52,6 +52,7 @@
},
"dependencies": {
"@aws-sdk/client-s3": "^3.556.0",
"bits-ui": "^0.21.12",
"blob-util": "^2.0.2",
"cheerio": "^1.0.0-rc.12",
"clsx": "^2.1.1",
@ -71,10 +72,12 @@
"layercake": "^8.1.2",
"lightweight-charts": "^4.1.3",
"lodash-es": "^4.17.21",
"lucide-svelte": "^0.408.0",
"luxon": "^3.4.4",
"marked": "^12.0.2",
"memoize-one": "^6.0.0",
"mixpanel": "^0.18.0",
"mode-watcher": "^0.3.1",
"nprogress": "^0.2.0",
"parse5": "^7.1.2",
"pocketbase": "^0.21.2",
@ -90,8 +93,9 @@
"svelte-motion": "^0.12.2",
"svelte-progress-bar": "^3.0.2",
"svelte-range-slider-pips": "^2.3.1",
"svelte-sonner": "^0.3.27",
"svelte-tags-input": "^6.0.0",
"tailwind-merge": "^2.3.0",
"tailwind-merge": "^2.4.0",
"tailwind-variants": "^0.2.1",
"tslib": "^2.6.2",
"ua-parser-js": "^1.0.37",

4
src/app.css
View File

@ -7,7 +7,7 @@
.table {
@apply rounded-box text-left text-sm rtl:text-right;
@apply text-left text-sm rtl:text-right;
:where(th, td) {
@apply px-4 py-3 align-middle;
}
@ -41,7 +41,7 @@
}
:where(thead, tfoot) {
@apply text-base-content/60 whitespace-nowrap text-xs;
@apply whitespace-nowrap text-xs;
}
}

4
src/app.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en" class="bg-[#0F0F0F]">
<html lang="en" class="bg-[#09090B]">
<head>
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -13,7 +13,7 @@
</head>
<!-- Global background color -->
<body data-sveltekit-preload-data="hover" class="bg-[#0F0F0F] overflow-x-hidden">
<body data-sveltekit-preload-data="hover" class="bg-[#09090B] overflow-x-hidden">
<div>%sveltekit.body%</div>
</body>
</html>

72
src/app.pcss Normal file
View File

@ -0,0 +1,72 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 92% 38%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--destructive: 359 51% 48%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}
}

4
src/lib/components/AddPortfolio.svelte
View File

@ -107,7 +107,7 @@ else {
<label for="addPortfolio" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
<div class="modal-box w-full bg-[#202020] overflow-hidden" >
<div class="modal-box w-full bg-[#09090B] overflow-hidden" >
<div class="flex flex-col w-full mt-10 sm:mt-0">
@ -263,7 +263,7 @@ else {
Terms and Conditions of Participation
</div>
<div class="text-white text-sm border bg-[#202020] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56">
<div class="text-white text-sm border bg-[#09090B] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56">
<ol class="text-white list-decimal ml-3 p-2">
<li class="p-1">The organizer of the Prize competition is stocknear.</li>

10
src/lib/components/AnalystCard.svelte
View File

@ -45,7 +45,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
<!--Start Analyst Card -->
<div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">
<div class="rounded-2xl shadow-lg bg-[#000] sm:bg-[#202020] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96 -mx-1 sm:mx-0">
<div class="rounded-2xl shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96 -mx-1 sm:mx-0">
<!--Start Content-->
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
@ -173,7 +173,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
<div class="bg-[#000] h-auto w-screen">
<!--Start Header-->
<div class="bg-[#202020] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
Analyst Rating
</h2>
@ -247,7 +247,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
<div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
<div class="shadow-lg bg-[#202020] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
<div class="flex flex-col -mt-2 w-full">
<div class="flex flex-row items-center w-full">
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
@ -261,7 +261,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
</div>
</div>
<div class="shadow-lg bg-[#202020] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
<div class="flex flex-col -mt-2 w-full">
<div class="flex flex-row items-center w-full">
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
@ -275,7 +275,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
</div>
</div>
<div class="shadow-lg bg-[#202020] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
<div class="flex flex-col -mt-2 w-full">
<div class="flex flex-row items-center w-full">
<span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">

22
src/lib/components/AnalystEstimate.svelte
View File

@ -294,36 +294,36 @@ $: {
<div class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto rounded-none sm:rounded-lg overflow-hidden overflow-x-scroll">
<table class="table table-sm shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#0F0F0F] border-bg-[#0F0F0F]">
<table class="table table-sm shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
<thead class="">
<tr class="">
<th class="bg-[#0F0F0F] border-b border-[#000] text-white font-semibold text-sm text-start">Year</th>
<th class="bg-[#09090B] border-b border-[#000] text-white font-semibold text-sm text-start">Year</th>
{#each ($screenWidth >= 640 ? xData?.slice(-6) : xData) as item}
<td class="z-20 bg-[#0F0F0F] border-b border-[#000] text-white font-semibold text-sm text-center bg-[#0F0F0F]">{'FY'+item}</td>
<td class="z-20 bg-[#09090B] border-b border-[#000] text-white font-semibold text-sm text-center bg-[#09090B]">{'FY'+item}</td>
{/each}
</tr>
</thead>
<tbody class="shadow-md">
<tr class="bg-[#0F0F0F] border-b-[#0F0F0F]">
<th class="text-white text-start font-medium bg-[#0F0F0F] border-b border-[#0F0F0F]">
<tr class="bg-[#09090B] border-b-[#09090B]">
<th class="text-white text-start font-medium bg-[#09090B] border-b border-[#09090B]">
Forecast
</th>
{#each ($screenWidth >= 640 ? tableDataForecast?.slice(-6) : tableDataForecast) as item}
<td class="text-white text-center font-medium border-b border-[#0F0F0F]">
<td class="text-white text-center font-medium border-b border-[#09090B]">
{(item?.val === '0.00' || item?.val === null) ? '-' : item?.val}
</td>
{/each}
</tr>
<tr class="bg-[#0F0F0F] border-b-[#0F0F0F]">
<th class="bg-[#202020] text-white text-start font-medium bg-[#0F0F0F] border-b border-[#0F0F0F]">
<tr class="bg-[#09090B] border-b-[#09090B]">
<th class="bg-[#09090B] text-white text-start font-medium bg-[#09090B] border-b border-[#09090B]">
Actual
</th>
{#each ($screenWidth >= 640 ? tableDataActual?.slice(-6) : tableDataActual) as item}
<td class="text-white text-center font-medium bg-[#202020]">
<td class="text-white text-center font-medium bg-[#09090B]">
{(item?.val === '0.00' || item?.val === null) ? '-' : item?.val}
</td>
{/each}
@ -344,7 +344,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -352,7 +352,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

6
src/lib/components/AnalystInsight.svelte
View File

@ -137,7 +137,7 @@ function latestInfoDate(inputDate) {
<!--Start Item-->
<div class="flex flex-row items-center w-full mb-6">
<div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#202020]'} shadow-lg h-full pl-3 pt-2 pb-4">
<div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
<div class="flex flex-col items-start">
<div class="flex flex-row items-start w-full pt-2">
@ -173,7 +173,7 @@ function latestInfoDate(inputDate) {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -181,7 +181,7 @@ function latestInfoDate(inputDate) {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

16
src/lib/components/BorrowedShare.svelte
View File

@ -267,7 +267,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
</div>
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -281,14 +281,14 @@ function findLowestAndHighestFee(data, lastDateStr) {
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Available Shares
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF9E21] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF9E21] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Fee
</span>
@ -305,7 +305,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
<div class="flex justify-start items-center w-full m-auto ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
@ -313,7 +313,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Fee Range</span>
</td>
@ -321,7 +321,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
{lowestFee+'%'+'-'+highestFee+'%'}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Total Available Shares</span>
</td>
@ -340,7 +340,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -348,7 +348,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

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

@ -126,7 +126,7 @@ $: {
</span>
</div>
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

4
src/lib/components/BuyTrade.svelte
View File

@ -184,7 +184,7 @@
<div class= "flex flex-col">
<div class="text-white text-md flex flex-col flex-shrink-0">
<div class="rounded-full w-10 h-10 relative bg-[#202020] mb-2">
<div class="rounded-full w-10 h-10 relative bg-[#09090B] mb-2">
<img class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://financialmodelingprep.com/image-stock/${$assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker}.png`} loading="lazy"/>
</div>
<span class="mb-1">
@ -353,7 +353,7 @@
<div class= "flex flex-col">
<div class="text-white text-md flex flex-col flex-shrink-0">
<div class="rounded-full w-10 h-10 relative bg-[#202020] mb-2">
<div class="rounded-full w-10 h-10 relative bg-[#09090B] mb-2">
<img class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://financialmodelingprep.com/image-stock/${$assetType === 'stock' ? $stockTicker : $etfTicker}.png`} loading="lazy"/>
</div>
<span class="mb-1">

102
src/lib/components/ClinicalTrial.svelte
View File

@ -261,7 +261,7 @@ $: {
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -288,15 +288,15 @@ $: {
<table class="table table-sm table-compact table-pin-rows table-pin-cols w-full">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#0F0F0F]">Drug</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#0F0F0F]">Stage</th>
<th class="text-white shadow-md font-semibold text-sm text-center bg-[#0F0F0F]">Phase Status</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#0F0F0F]">Result</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Drug</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Stage</th>
<th class="text-white shadow-md font-semibold text-sm text-center bg-[#09090B]">Phase Status</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Result</th>
</tr>
</thead>
<tbody>
{#each displayList as item,index}
<tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-[#202020] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
<tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
<td class="text-white font-medium">
{item["Interventions"]?.length === 0 ? '-' : item["Interventions"]?.length > charNumber ? formatString(item["Interventions"]?.slice(0,charNumber)) + "..." : formatString(item["Interventions"])}
@ -335,7 +335,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -343,7 +343,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>
@ -365,75 +365,75 @@ $: {
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="modal-box w-full relative bg-[#202020] h-auto max-h-[900px] overflow-y-scroll">
<label for="clinicalDesktopModal" class="cursor-pointer absolute right-5 top-2 bg-[#202020] text-2xl text-white">
<label class="modal-box w-full relative bg-[#09090B] h-auto max-h-[900px] overflow-y-scroll">
<label for="clinicalDesktopModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white">
✕
</label>
<h3 class="text-xl font-semibold text-white mt-10">
Title: {trialTitle}
</h3>
<p class="py-4 text-gray-200 bg-[#202020] w-full">
<p class="py-4 text-gray-200 bg-[#09090B] w-full">
<span class="font-semibold text-white">Brief Summary:</span>
{trialSummary}
</p>
<table class="table table-sm table-compact bg-[#202020] w-full mt-5 mb-10 text-white">
<table class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white">
<tbody>
<!-- row 1 -->
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">NCT Number</td>
<td class="bg-[#202020] ">{trialId}</td>
<td class="bg-[#09090B] font-semibold ">NCT Number</td>
<td class="bg-[#09090B] ">{trialId}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Start Date</td>
<td class="bg-[#202020] ">{trialStart}</td>
<td class="bg-[#09090B] font-semibold ">Start Date</td>
<td class="bg-[#09090B] ">{trialStart}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">End Date</td>
<td class="bg-[#202020] ">{trialEnd}</td>
<td class="bg-[#09090B] font-semibold ">End Date</td>
<td class="bg-[#09090B] ">{trialEnd}</td>
</tr>
<!-- row 2 -->
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Study Status</td>
<td class="bg-[#202020] ">{trialStage}</td>
<td class="bg-[#09090B] font-semibold ">Study Status</td>
<td class="bg-[#09090B] ">{trialStage}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Phase Status</td>
<td class="bg-[#202020] ">{trialPhase}</td>
<td class="bg-[#09090B] font-semibold ">Phase Status</td>
<td class="bg-[#09090B] ">{trialPhase}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Study Results</td>
<td class="bg-[#202020] ">{trialResult}</td>
<td class="bg-[#09090B] font-semibold ">Study Results</td>
<td class="bg-[#09090B] ">{trialResult}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Sex</td>
<td class="bg-[#202020] ">{formatString(trialSex)}</td>
<td class="bg-[#09090B] font-semibold ">Sex</td>
<td class="bg-[#09090B] ">{formatString(trialSex)}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Age</td>
<td class="bg-[#202020] ">{formatString(trialAge)?.replace('Older_adult', 'Older Adult')}</td>
<td class="bg-[#09090B] font-semibold ">Age</td>
<td class="bg-[#09090B] ">{formatString(trialAge)?.replace('Older_adult', 'Older Adult')}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Sponsor</td>
<td class="bg-[#202020] ">{trialSponsor}</td>
<td class="bg-[#09090B] font-semibold ">Sponsor</td>
<td class="bg-[#09090B] ">{trialSponsor}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Enrollment</td>
<td class="bg-[#202020] ">{trialEnrollment}</td>
<td class="bg-[#09090B] font-semibold ">Enrollment</td>
<td class="bg-[#09090B] ">{trialEnrollment}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Study Type</td>
<td class="bg-[#202020] ">{trialStudyType}</td>
<td class="bg-[#09090B] font-semibold ">Study Type</td>
<td class="bg-[#09090B] ">{trialStudyType}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Funder Type</td>
<td class="bg-[#202020] ">{trialFunderType}</td>
<td class="bg-[#09090B] font-semibold ">Funder Type</td>
<td class="bg-[#09090B] ">{trialFunderType}</td>
</tr>
<tr class="border-b border-slate-700">
<td class="bg-[#202020] font-semibold ">Website</td>
<td class="bg-[#202020] "><a class="text-blue-400 sm:hover:text-white" href={trialLink} rel="noopener noreferrer" target="_blank">{trialLink}</a></td>
<td class="bg-[#09090B] font-semibold ">Website</td>
<td class="bg-[#09090B] "><a class="text-blue-400 sm:hover:text-white" href={trialLink} rel="noopener noreferrer" target="_blank">{trialLink}</a></td>
</tr>
</tbody>
</table>
@ -472,56 +472,56 @@ $: {
<table class="table table-sm table-compact w-full mt-5 mb-10 text-white">
<tbody>
<!-- row 1 -->
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
<td class="font-semibold w-full">NCT Number</td>
<td class="">{trialId}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Start Date</td>
<td class="">{trialStart}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">End Date</td>
<td class="">{trialEnd}</td>
</tr>
<!-- row 2 -->
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Study Status</td>
<td class="">{trialStage}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Phase Status</td>
<td class="">{trialPhase}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Study Results</td>
<td class="">{trialResult}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Sex</td>
<td class="">{formatString(trialSex)}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Age</td>
<td class="">{formatString(trialAge)?.replace('Older_adult', 'Older Adult')}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Sponsor</td>
<td class="">{trialSponsor}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Enrollment</td>
<td class="">{trialEnrollment}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Study Type</td>
<td class="">{trialStudyType}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Funder Type</td>
<td class="">{trialFunderType}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020] even:bg-[#0F0F0F]">
<tr class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]">
<td class="font-semibold ">Website</td>
<td class=""><a class="text-blue-400 sm:hover:text-white" href={trialLink} rel="noopener noreferrer" target="_blank">{trialLink}</a></td>
</tr>

2
src/lib/components/CommentSection.svelte
View File

@ -454,7 +454,7 @@ const handleDownvote = async (event) => {
<label for={'delete'+deleteCommentId} class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05]"></label>
<div class="modal-box bg-[#202020] p-5 border border-slate-600 shadow-none" >
<div class="modal-box bg-[#09090B] p-5 border border-slate-600 shadow-none" >
<h3 class="font-bold text-md sm:text-lg sm:mb-10 text-white mt-5">
Are you sure you want to delete the comment?

4
src/lib/components/Correlation.svelte
View File

@ -74,9 +74,9 @@
{#each (showFullStats ? correlationList : correlationList?.slice(0, 3)) as item, index}
<div class="shadow-lg bg-[#202020] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && correlationList?.length > 2 ? 'opacity-[0.3]' : '' }">
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && correlationList?.length > 2 ? 'opacity-[0.3]' : '' }">
<div on:click={() => stockSelector(item?.symbol)} class="flex-shrink-0 mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#0F0F0F]">
<div on:click={() => stockSelector(item?.symbol)} class="flex-shrink-0 mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#09090B]">
<img
class="avatar rounded-full w-5 h-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}

6
src/lib/components/CountrySegmentation.svelte
View File

@ -48,7 +48,7 @@ $: {
<section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0">
<section class="bg-[#09090B] overflow-hidden text-white h-full sm:mb-0">
<div class="flex justify-center m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="w-full max-w-2xl">
@ -75,9 +75,9 @@ $: {
<!--Start Progress-->
{#each (showFullStats ? geographicList : geographicList?.slice(0,3)) as item,index}
<div class="shadow-lg bg-[#202020] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && geographicList?.length > 2 ? 'opacity-[0.3]' : '' }">
<div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && geographicList?.length > 2 ? 'opacity-[0.3]' : '' }">
<div class="flex-shrink-0 mr-3 rounded-full w-10 h-10 relative bg-[#0F0F0F]">
<div class="flex-shrink-0 mr-3 rounded-full w-10 h-10 relative bg-[#09090B]">
<img
class="flex-shrink-0 rounded-full w-7 h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
src={`https://hatscripts.github.io/circle-flags/flags/${item?.code}.svg`}

2
src/lib/components/CreateNewPost.svelte
View File

@ -9,7 +9,7 @@
<!-- List container -->
<div class="flex flex-col">
<!-- Item -->
<div class="sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#202020] rounded-[4px] sm:rounded-[8px]">
<div class="sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#09090B] rounded-[4px] sm:rounded-[8px]">
<div class="flex h-14 sm:h-16 justify-start items-center">
<div class="ml-2 sm:ml-3 avatar relative">
<div class="w-8 sm:w-10 rounded-full">

42
src/lib/components/CryptoProfileCard.svelte
View File

@ -47,7 +47,7 @@
</script>
<div class="sm:space-y-3">
<div class="lg:rounded-2xl shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#202020] h-auto h-auto w-screen pt-16 sm:w-full lg:w-96 lg:pt-0">
<div class="lg:rounded-2xl shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full lg:w-96 lg:pt-0">
<!--Start Header-->
<div class="sm:rounded-t-2xl w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$cryptoTicker?.toUpperCase()}.jpg`});">
@ -83,35 +83,35 @@
<table class="table table-md table-compact">
<tbody>
<!-- row 1 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Name</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020]">{$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0,30) + '...' : $displayCompanyName}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Ticker</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020]">{$cryptoTicker}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Name</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0,30) + '...' : $displayCompanyName}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Ticker</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$cryptoTicker}</td>
</tr>
<!-- row 2 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Mkt Cap</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{abbreviateNumber(marketCap,true)}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Total Volume</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{abbreviateNumber(totalVolume)}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Mkt Cap</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(marketCap,true)}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Total Volume</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(totalVolume)}</td>
</tr>
<!-- row 2 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Circulating Supply</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{abbreviateNumber(circulatingSupply)}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Max Supply</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{maxSupply !== null ? abbreviateNumber(maxSupply) : 'Uncapped'}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Circulating Supply</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(circulatingSupply)}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Max Supply</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{maxSupply !== null ? abbreviateNumber(maxSupply) : 'Uncapped'}</td>
</tr>
<!-- row 2 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">ATH Price</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">${new Intl.NumberFormat("en", {
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">ATH Price</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">${new Intl.NumberFormat("en", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(athPrice)}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">ATH Date</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{new Date(athDate).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">ATH Date</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{new Date(athDate).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}</td>
</tr>
</tbody>
</table>

4
src/lib/components/DCF.svelte
View File

@ -223,7 +223,7 @@
{#if data?.user?.tier === 'Pro'}
{#if fairPrice !== null}
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
<div class="mt-4 text-white text-[1rem] sm:text-xl pb-4 sm:pb-0 m-auto text-start">
The DCF model signals a
@ -298,7 +298,7 @@
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

16
src/lib/components/DarkPool.svelte
View File

@ -248,7 +248,7 @@ $: {
</div>
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -262,14 +262,14 @@ $: {
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Total Volume
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#536FC5] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#536FC5] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Short Volume
</span>
@ -287,7 +287,7 @@ $: {
<div class="flex justify-start items-center w-full m-auto ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
@ -295,7 +295,7 @@ $: {
{ formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Volume</span>
</td>
@ -303,7 +303,7 @@ $: {
{monthlyVolume}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short % of Volume</span>
</td>
@ -320,7 +320,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -328,7 +328,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

10
src/lib/components/DividendCard.svelte
View File

@ -36,7 +36,7 @@
<div class="space-y-3 lg:pt-5 lg:{dividendList?.length !== 0 ? '' : 'hidden'}">
<div class="lg:rounded-2xl shadow-lg bg-[#000] lg:bg-[#202020] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} lg:w-96">
<div class="lg:rounded-2xl shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} lg:w-96">
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
<div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
@ -56,15 +56,15 @@
<table class="table lg:table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#202020] border-b border-blue-400">Ex-Dividend</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#202020] border-b border-blue-400">Payment Date</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#202020] border-b border-blue-400">Amount</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B] border-b border-blue-400">Ex-Dividend</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B] border-b border-blue-400">Payment Date</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B] border-b border-blue-400">Amount</th>
</tr>
</thead>
<tbody>
{#each dividendHistoryList?.slice(0,5) as item}
<tr class="text-white bg-[#000] lg:bg-[#202020] border-b border-[#000] lg:border-[#202020]">
<tr class="text-white bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
<td class="text-start text-sm text-white font-medium">
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td>

2
src/lib/components/ESGCard.svelte
View File

@ -50,7 +50,7 @@ $: {
<!--Start ESG Card -->
<div class="space-y-3 lg:pt-5 hidden lg:block lg:{esgScore && esgRiskRating && environmentalScore && governanceScore !== 'n/a' ? '' : 'hidden'}">
<div class="rounded-2xl shadow-lg bg-[#000] sm:bg-[#202020] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96 -mx-1 sm:mx-0">
<div class="rounded-2xl shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96 -mx-1 sm:mx-0">
<!--Start Content-->
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">

2
src/lib/components/ETFKeyInformation.svelte
View File

@ -119,7 +119,7 @@
</label>
<!--Start Header-->
<div class="bg-[#202020] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
Top Holdings
</h2>

44
src/lib/components/ETFProfileCard.svelte
View File

@ -56,10 +56,10 @@ let showFullText = false;
</script>
<div class="sm:space-y-3">
<div class="lg:rounded-2xl shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#202020] h-auto h-auto w-screen pt-16 sm:w-full lg:w-96 lg:pt-0">
<div class="lg:rounded-2xl shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full lg:w-96 lg:pt-0">
<!--Start Header-->
<div class="lg:rounded-t-2xl w-full h-[130px] bg-[#0F0F0F] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url('{defaultImage}');">
<div class="lg:rounded-t-2xl w-full h-[130px] bg-[#09090B] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url('{defaultImage}');">
<div class="flex flex-row pt-1 pb-2">
<div class="badge badge-error gap-2 mt-2 font-medium text-sm text-white">
@ -95,32 +95,32 @@ let showFullText = false;
<table class="table table-md table-compact">
<tbody>
<!-- row 1 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Name</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020]">{$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0,30) + '...' : $displayCompanyName}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Ticker</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020]">{$etfTicker}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Name</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0,30) + '...' : $displayCompanyName}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Ticker</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$etfTicker}</td>
</tr>
<!-- row 3 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Provider</td>
<td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-blue-400 lg:border-b lg:border-[#202020] lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#202020]">{formatETFName(provider)}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Country</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020]">{country?.length !== 0 ? country : '-'}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Provider</td>
<td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-blue-400 lg:border-b lg:border-[#27272A] lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Country</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{country?.length !== 0 ? country : '-'}</td>
</tr>
<!-- row 2 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Value</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{abbreviateNumber(aum,true)}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Volume</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{abbreviateNumber(avgVolume)}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Value</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(aum,true)}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Volume</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(avgVolume)}</td>
</tr>
<!-- row 3 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.8rem">
<td class="text-start bg-[#000] lg:bg-[#202020] text-white font-medium">Holdings</td>
<td class="bg-[#000] lg:bg-[#202020]">{holdingsCount} Assets</td>
<td class="text-start bg-[#000] lg:bg-[#202020] text-white font-medium">Inception</td>
<td class="bg-[#000] lg:bg-[#202020]">{inceptionDate}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Holdings</td>
<td class="bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td>
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Inception</td>
<td class="bg-[#000] lg:bg-[#09090B]">{inceptionDate}</td>
</tr>
</tbody>
</table>

12
src/lib/components/Enterprise.svelte
View File

@ -223,28 +223,28 @@ $: {
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#F8901E] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#F8901E] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Enterprise Value
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#5470C6] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#5470C6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Mkt Cap
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md inline-block">
Debt
</span>
</div>
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center sm:items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Cash Equivalents
</span>
@ -258,7 +258,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -266,7 +266,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

6
src/lib/components/ExecutiveCard.svelte
View File

@ -78,7 +78,7 @@ afterUpdate(async() => {
<div class="space-y-3 sm:pt-5">
<div class="bg-[#000] h-auto w-screen">
<!--Start Header-->
<div class="bg-[#202020] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
Executives
</h2>
@ -126,7 +126,7 @@ afterUpdate(async() => {
<!--Start Item-->
<div class="flex flex-row items-center pl-4 pr-4 w-full mb-3">
<div class="w-full rounded-md bg-[#202020] shadow-lg h-auto pb-3 pl-3 pt-3">
<div class="w-full rounded-md bg-[#09090B] shadow-lg h-auto pb-3 pl-3 pt-3">
<div class="flex flex-row items-center relative">
<div class="flex flex-col">
<div class="flex flex-row items-center mr-auto mb-2 text-white font-medium text-[1rem] w-56">
@ -178,7 +178,7 @@ afterUpdate(async() => {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>

16
src/lib/components/FailToDeliver.svelte
View File

@ -267,7 +267,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
</div>
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -281,14 +281,14 @@ function findLowestAndHighestPrice(data, lastDateStr) {
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Price
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF9E21] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF9E21] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Share Quantity
</span>
@ -305,7 +305,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
<div class="flex justify-start items-center w-full m-auto ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
@ -313,7 +313,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Price Range</span>
</td>
@ -321,7 +321,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
{'$'+lowestPrice+'-'+'$'+highestPrice}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Total failed deliveries</span>
</td>
@ -340,7 +340,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -348,7 +348,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

4
src/lib/components/Feedback.svelte
View File

@ -128,7 +128,7 @@
<div class="p-2 mt-5 w-full ">
<textarea
class="textarea textarea-bordered placeholder-gray-300 w-full bg-[#202020] text-white border border-gray-600"
class="textarea textarea-bordered placeholder-gray-300 w-full bg-[#09090B] text-white border border-gray-600"
placeholder="Your feedback..."
value={inputValue}
on:input={handleInput}
@ -199,7 +199,7 @@
<div class="pl-7 pr-7 w-full ">
<textarea
class="textarea textarea-bordered h-24 placeholder-gray-300 w-full bg-[#202020] text-white border border-gray-600"
class="textarea textarea-bordered h-24 placeholder-gray-300 w-full bg-[#09090B] text-white border border-gray-600"
placeholder="Your feedback..."
value={inputValue}
on:input={handleInput}

2
src/lib/components/Footer.svelte
View File

@ -8,7 +8,7 @@
<!--Footer-->
<footer class="bg-[#202020] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 left-0 w-full">
<footer class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 left-0 w-full">
<div class="container mx-auto px-3">
<div class="w-full flex flex-col md:flex-row py-6">

10
src/lib/components/FundamentalAnalysis.svelte
View File

@ -115,7 +115,7 @@ $: {
<div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-2xl h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">Quarter Sentiment</span>
{#if !deactivateContent}
@ -131,7 +131,7 @@ $: {
<!--End Flow Sentiment-->
<!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-2xl h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Accuracy</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -159,7 +159,7 @@ $: {
<!--End Put/Call-->
<!--Start Precision-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-2xl h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Precision</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -221,7 +221,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -229,7 +229,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

2
src/lib/components/GetAccess.svelte
View File

@ -17,7 +17,7 @@ let opacityValue = 0.2
<label on:click={() => goto('/login')} class="p-5 relative cursor-pointer flex flex-col items-center justify-center mt-10 overflow-hidden">
<div class="rounded-full w-14 h-14 bg-[#202020] relative">
<div class="rounded-full w-14 h-14 bg-[#09090B] relative">
<svg class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="white" d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"/></svg>
</div>
<span class="text-slate-300 font-medium text-md sm:text-lg mt-3 w-3/4 text-center">

10
src/lib/components/GovernmentContract.svelte
View File

@ -245,7 +245,7 @@
</div>
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -260,7 +260,7 @@
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
# of Contracts
</span>
@ -268,7 +268,7 @@
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FFAD24] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FFAD24] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Amount
</span>
@ -282,7 +282,7 @@
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -290,7 +290,7 @@
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

2
src/lib/components/H1BVisa.svelte
View File

@ -129,7 +129,7 @@ $: {
</div>
{#if h1bVisaList?.length !== 0}
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
<div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full">

18
src/lib/components/ImpliedVolatility.svelte
View File

@ -302,7 +302,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
</div>
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -316,14 +316,14 @@ function findLowestAndhighestIV(data, lastDateStr) {
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Price
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#F03500] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#F03500] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Implied Volatility
</span>
@ -331,7 +331,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Realized Volatility
</span>
@ -348,7 +348,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
<div class="flex justify-start items-center w-full m-auto ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
@ -356,7 +356,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>IV Range</span>
</td>
@ -364,7 +364,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
{lowestIV+'%'+'-'+highestIV+'%'}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>RV Range</span>
</td>
@ -383,7 +383,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -391,7 +391,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

2
src/lib/components/Lazy.svelte
View File

@ -21,7 +21,7 @@
{:else}
<div bind:this={el} class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>

2
src/lib/components/Lobbying.svelte
View File

@ -117,7 +117,7 @@ $: {
</div>
{#if lobbyingList?.length !== 0}
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
<div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full">

34
src/lib/components/LoginPopup.svelte
View File

File diff suppressed because one or more lines are too long

28
src/lib/components/MarketMaker.svelte
View File

@ -257,7 +257,7 @@ else {
</div>
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -271,14 +271,14 @@ else {
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Notional Sum
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Share Quantity
</span>
@ -295,7 +295,7 @@ else {
<div class="flex justify-start items-center w-full m-auto ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
@ -303,7 +303,7 @@ else {
{formatDateRange(historyData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Total Notional Sum</span>
</td>
@ -311,7 +311,7 @@ else {
${abbreviateNumber(historyData?.slice(-1)?.at(0)?.totalNotionalSum)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Total Trade Count</span>
</td>
@ -319,7 +319,7 @@ else {
{abbreviateNumber(historyData?.slice(-1)?.at(0)?.totalWeeklyTradeCount)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Total Share Quantity</span>
</td>
@ -341,15 +341,15 @@ else {
<table class="table table-sm table-compact w-full">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#0F0F0F]">Name</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#0F0F0F]">Trade Count</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#0F0F0F]">Share Quantity</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#0F0F0F]">Notional Sum</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Name</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Trade Count</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Share Quantity</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Notional Sum</th>
</tr>
</thead>
<tbody>
{#each (showFullStats ? topMarketMakers?.slice(0,10) : topMarketMakers?.slice(0,3)) as item,index}
<tr class="border-y border-gray-800 odd:bg-[#202020] {index === 2 && !showFullStats && topMarketMakers?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F]">
<tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && topMarketMakers?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
<td class="text-white font-medium">
{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
@ -384,7 +384,7 @@ else {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -392,7 +392,7 @@ else {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

66
src/lib/components/Markethour.svelte
View File

File diff suppressed because one or more lines are too long

4
src/lib/components/MiniPlot.svelte
View File

@ -47,7 +47,7 @@
layout: {
background: {
type: ColorType.Solid,
color: '#202020',
color: '#27272A',
},
lineColor: '#2B2B43',
textColor: '#D9D9D9',
@ -138,7 +138,7 @@ if(chart && typeof window !== 'undefined')
<label on:click={etfSelector} class="sm:hover:border-[#3C74D4] duration-200 transition ease-in-out cursor-pointer flex flex-row items-center rounded-lg shadow-lg border border-slate-800 bg-[#202020]">
<label on:click={etfSelector} class="sm:hover:border-[#3C74D4] duration-200 transition ease-in-out cursor-pointer flex flex-row items-center rounded-lg shadow-lg border border-slate-800 bg-[#09090B]">
<div class="flex flex-col items-center lg:mr-5">
<span class="text-white font-bold text-xs w-20 text-center">{title}</span>
<div class="flex flex-row mt-1 items-center">

6
src/lib/components/OptionsData.svelte
View File

@ -136,7 +136,7 @@ $: {
</script>
<section class="bg-[#0F0F0F] overflow-hidden text-white h-full w-full sm:mb-10">
<section class="bg-[#09090B] overflow-hidden text-white h-full w-full sm:mb-10">
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<main class="w-full">
@ -246,14 +246,14 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
</div>
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

12
src/lib/components/OptionsNetFlow.svelte
View File

@ -257,7 +257,7 @@
</div>
</div>
<div class="pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -272,7 +272,7 @@
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
Price
</span>
@ -280,7 +280,7 @@
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#10DB06] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#10DB06] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Net Call
</span>
@ -288,7 +288,7 @@
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Net Put
</span>
@ -303,7 +303,7 @@
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -311,7 +311,7 @@
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

6
src/lib/components/PostSection.svelte
View File

@ -288,7 +288,7 @@ $: {
{/if}
</form>
<!--End Upvote-->
<label class="text-center py-4 w-14 rounded-lg bg-[#202020] border border-gray-700 text-[1rem] text-bold text-white">
<label class="text-center py-4 w-14 rounded-lg bg-[#09090B] border border-gray-700 text-[1rem] text-bold text-white">
{upvoteCounter[posts?.id] - downvoteCounter[posts?.id] }
</label>
<!--Start Downvote-->
@ -314,7 +314,7 @@ $: {
</div>
<div class="w-full bg-[#202020] border-t border-b sm:border sm:hover:border-slate-600 border-gray-700 rounded-none sm:rounded-lg">
<div class="w-full bg-[#09090B] border-t border-b sm:border sm:hover:border-slate-600 border-gray-700 rounded-none sm:rounded-lg">
<!-- List container -->
<div class="flex flex-col">
<!-- Item -->
@ -660,7 +660,7 @@ $: {
<label for={deletePostId} class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
<div class="modal-box bg-[#202020] p-10" >
<div class="modal-box bg-[#09090B] p-10" >
<h3 class="font-bold text-md sm:text-lg sm:mb-10">

12
src/lib/components/PriceAnalysis.svelte
View File

@ -102,7 +102,7 @@ function getPlotOptions() {
smooth: true,
type: 'line',
areaStyle: {
color: '#0F0F0F', // color of the background
color: '#09090B', // color of the background
opacity: 1
},
lineStyle: {
@ -225,7 +225,7 @@ $: {
<div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">Price Sentiment</span>
<span class="text-start text-[1rem] font-medium {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span>
@ -234,7 +234,7 @@ $: {
<!--End Flow Sentiment-->
<!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm"><span class="italic">R</span><sup>2</sup> Score</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -262,7 +262,7 @@ $: {
<!--End Put/Call-->
<!--Start mape-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">MAPE</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -317,14 +317,14 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
</div>
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

12
src/lib/components/RetailVolume.svelte
View File

@ -292,7 +292,7 @@ $: {
</div>
</div>
<div class="pb-8 sm:pb-2 rounded-lg bg-[#0F0F0F]">
<div class="pb-8 sm:pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
@ -316,7 +316,7 @@ $: {
<div class="flex justify-start items-center w-full m-auto mt-6 ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
@ -324,7 +324,7 @@ $: {
{formatDateRange(rawData?.lastDate)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Volume in $</span>
</td>
@ -332,7 +332,7 @@ $: {
{monthlyVolume}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Retail Sentiment Range</span>
</td>
@ -351,7 +351,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -359,7 +359,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

8
src/lib/components/RevenueSegmentation.svelte
View File

@ -277,9 +277,9 @@ $: {
<!--Start Progress-->
{#each (showFullStats ? geographicList : geographicList?.slice(0,3)) as item,index}
<div class="shadow-lg bg-[#202020] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && geographicList?.length > 2 ? 'opacity-[0.3]' : '' }">
<div class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && geographicList?.length > 2 ? 'opacity-[0.3]' : '' }">
<div class="mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#0F0F0F]">
<div class="mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#27272A]">
{#if item?.name?.toLowerCase() === 'europe'}
<svg class="rounded-full w-6 h-6 sm:w-7 sm:h-7 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><mask id="circleFlagsEu0"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#circleFlagsEu0)"><path fill="#0052b4" d="M0 0h512v512H0z"/><path fill="#ffda44" d="m256 100.2l8.3 25.5H291l-21.7 15.7l8.3 25.6l-21.7-15.8l-21.7 15.8l8.3-25.6l-21.7-15.7h26.8zm-110.2 45.6l24 12.2l18.9-19l-4.2 26.5l23.9 12.2l-26.5 4.2l-4.2 26.5l-12.2-24l-26.5 4.3l19-19zM100.2 256l25.5-8.3V221l15.7 21.7l25.6-8.3l-15.8 21.7l15.8 21.7l-25.6-8.3l-15.7 21.7v-26.8zm45.6 110.2l12.2-24l-19-18.9l26.5 4.2l12.2-23.9l4.2 26.5l26.5 4.2l-24 12.2l4.3 26.5l-19-19zM256 411.8l-8.3-25.5H221l21.7-15.7l-8.3-25.6l21.7 15.8l21.7-15.8l-8.3 25.6l21.7 15.7h-26.8zm110.2-45.6l-24-12.2l-18.9 19l4.2-26.5l-23.9-12.2l26.5-4.2l4.2-26.5l12.2 24l26.5-4.3l-19 19zM411.8 256l-25.5 8.3V291l-15.7-21.7l-25.6 8.3l15.8-21.7l-15.8-21.7l25.6 8.3l15.7-21.7v26.8zm-45.6-110.2l-12.2 24l19 18.9l-26.5-4.2l-12.2 23.9l-4.2-26.5l-26.5-4.2l24-12.2l-4.3-26.5l19 19z"/></g></svg>
{:else if item?.name?.toLowerCase() === 'taiwan'}
@ -326,7 +326,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -334,7 +334,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

6
src/lib/components/SECFilingsCard.svelte
View File

@ -171,7 +171,7 @@ $: {
<div class="w-11/12 mt-5">
<div class="relative right-0 bg-[#27272A] rounded-lg">
<div class="relative right-0 bg-[#09090B] rounded-lg">
<div class="relative flex flex-row items-center p-1 list-none rounded-lg">
<AnimateSharedLayout>
@ -226,7 +226,7 @@ $: {
<div class="mt-5 w-full">
{#each displayList as item}
<div class="flex flex-col justify-center m-auto items-start rounded-md bg-[#202020] shadow-lg h-auto w-11/12 mb-3" transition:fade={{ delay: 0, duration: 80 }} in={accordionOpen[item?.year]}>
<div class="flex flex-col justify-center m-auto items-start rounded-md bg-[#09090B] shadow-lg h-auto w-11/12 mb-3" transition:fade={{ delay: 0, duration: 80 }} in={accordionOpen[item?.year]}>
<div class="flex flex-row items-center w-full p-3">
@ -285,7 +285,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>

10
src/lib/components/Searchbar.svelte
View File

@ -456,7 +456,7 @@ class="cursor-pointer w-8 h-8 flex items-center justify-center bg-purple-600 ro
{#if !showSuggestions }
{#each popularList as item}
<li>
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#202020] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<div class="flex flex-row items-center w-full">
<div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
@ -489,7 +489,7 @@ class="cursor-pointer w-8 h-8 flex items-center justify-center bg-purple-600 ro
<li>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#202020] rounded-lg flex justify-start items-center p-2 text-white group'}">
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'}">
<div class="flex flex-row items-center w-full">
<div class="flex flex-col">
@ -525,7 +525,7 @@ class="cursor-pointer w-8 h-8 flex items-center justify-center bg-purple-600 ro
{:else}
<div class="flex justify-center items-center m-auto mt-4 py-20">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -599,7 +599,7 @@ class="cursor-pointer w-8 h-8 flex items-center justify-center bg-purple-600 ro
{#if !showSuggestions }
{#each popularList as item}
<li>
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.type) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer bg-[#202020] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.type) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<div class="flex flex-row items-center w-full">
<div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
@ -630,7 +630,7 @@ class="cursor-pointer w-8 h-8 flex items-center justify-center bg-purple-600 ro
<li>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#202020] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}">
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}">
<div class="flex flex-row items-center w-full">
<div class="flex flex-col ml-1">

4
src/lib/components/SectorSegmentation.svelte
View File

@ -87,7 +87,7 @@ $: {
<section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0 w-full">
<section class="bg-[#09090B] overflow-hidden text-white h-full sm:mb-0 w-full">
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
@ -116,7 +116,7 @@ $: {
<!--Start Progress-->
{#each (showFullStats ? sectorList : sectorList?.slice(0,3)) as item,index}
<div on:click= {() => sectorSelector(item?.industry)} class="shadow-lg bg-[#202020] w-full rounded-lg p-4 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && sectorList?.length > 3 ? 'opacity-[0.5]' : '' }">
<div on:click= {() => sectorSelector(item?.industry)} class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && sectorList?.length > 3 ? 'opacity-[0.5]' : '' }">
<div class="flex flex-col -mt-2 w-full">
<div class="flex flex-row items-center w-full">

10
src/lib/components/SentimentAnalysis.svelte
View File

@ -113,7 +113,7 @@ $: {
<div class="pb-4 w-full mt-5">
<div class="w-auto p-4 sm:p-6 bg-[#202020] sm:bg-[#0F0F0F] rounded-lg relative">
<div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
<h3 class="text-gray-300 font-medium text-sm uppercase mb-3">
Average Score
</h3>
@ -172,7 +172,7 @@ $: {
</div>
<div class="w-full">
<div class="w-auto p-4 sm:p-6 bg-[#202020] sm:bg-[#0F0F0F] rounded-lg relative">
<div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
<h3 class="text-gray-300 font-medium text-sm uppercase mb-3">
Average Score Trend
</h3>
@ -233,7 +233,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -243,7 +243,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -251,7 +251,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

28
src/lib/components/ShareHolders.svelte
View File

@ -194,7 +194,7 @@ $: {
{#if data?.user?.tier === 'Pro'}
{#if isLoaded}
{#if shareholderList?.length !== 0}
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#09090B] sm:bg-[#09090B]">
<div class="text-white text-md mt-3">
As of {new Date(rawData?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })},
<span class="font-semibold">{rawData?.investorsHolding}</span> Hedge Funds hold a total of <span class="font-semibold">{abbreviateNumber(rawData?.numberOf13Fshares)}</span> {$displayCompanyName} shares, with a combined investment of <span class="font-semibold">{abbreviateNumber(rawData?.totalInvested, true)}</span>.
@ -213,7 +213,7 @@ $: {
<div class="flex flex-row items-center mr-auto mb-5">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-4 h-4 bg-[#F8901E] border-4 box-content border-[#202020] rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
<div class="w-4 h-4 bg-[#F8901E] border-4 box-content border-[#27272A] rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
<span class="text-white text-sm sm:text-[1rem] font-medium inline-block">
Others: {otherOwner >= 99.99 ? 99.99 : otherOwner?.toFixed(2)}%
</span>
@ -221,7 +221,7 @@ $: {
<div class="flex flex-row items-center mr-auto">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-4 h-4 bg-[#5470C6] border-4 box-content border-[#202020] rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
<div class="w-4 h-4 bg-[#5470C6] border-4 box-content border-[#27272A] rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
<span class="text-white text-sm sm:text-[1rem] font-medium inline-block">
Institutions: {institutionalOwner <= 0.01 ? "< 0.01%" : institutionalOwner?.toFixed(2)+'%'}
</span>
@ -242,7 +242,7 @@ $: {
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
<!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Put/Call</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -269,7 +269,7 @@ $: {
</div>
<!--End Put/Call-->
<!--Start Call Flow-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Call Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -299,7 +299,7 @@ $: {
<!--End Call Flow-->
<!--Start Put Flow-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Put Flow</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -350,17 +350,17 @@ $: {
<table class="table table-sm table-compact w-full">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#0F0F0F]">Institute</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#0F0F0F]">Ownership</th>
<th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#0F0F0F]">Shares</th>
<th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#0F0F0F]">Market Value</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#0F0F0F]">Portfolio</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Institute</th>
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Ownership</th>
<th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#09090B]">Shares</th>
<th class="text-white shadow-md font-semibold text-sm text-end hidden sm:table-cell bg-[#09090B]">Market Value</th>
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Portfolio</th>
</tr>
</thead>
<tbody>
{#each (showFullStats ? shareholderList?.slice(0,10) : shareholderList?.slice(0,3)) as item,index}
{#if item?.investorName?.length > 0}
<tr on:click={() => goto('/hedge-funds/'+item?.cik)} class="border-y border-gray-800 odd:bg-[#202020] {index === 2 && !showFullStats && shareholderList?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
<tr on:click={() => goto('/hedge-funds/'+item?.cik)} class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && shareholderList?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
<td class="text-white font-medium">
{item?.investorName?.length > charNumber ? formatString(item?.investorName?.slice(0,charNumber)) + "..." : formatString(item?.investorName)}
@ -403,7 +403,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -411,7 +411,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

20
src/lib/components/ShareStatistics.svelte
View File

@ -181,7 +181,7 @@ $: {
{#if isLoaded}
{#if Object?.keys(rawData)?.length !== 0}
<div class="mt-2 pb-4 bg-[#0F0F0F]">
<div class="mt-2 pb-4 bg-[#09090B]">
<div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
@ -199,14 +199,14 @@ $: {
<div class="flex flex-row items-center justify-between mx-auto mt-8 w-full sm:w-11/12">
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#5470C6] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#5470C6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-sm sm:font-semibold inline-block">
Floating Shares
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#C12F23] border-4 box-content border-[#202020] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#C12F23] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-sm sm:font-semibold inline-block">
Outstanding Shares
</span>
@ -226,7 +226,7 @@ $: {
<div class="flex justify-start items-center w-full m-auto mt-6 ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Interest</span>
</td>
@ -234,7 +234,7 @@ $: {
{abbreviateNumber(rawData?.sharesShort)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Previous Month</span>
</td>
@ -242,7 +242,7 @@ $: {
{abbreviateNumber(rawData?.sharesShortPriorMonth)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short % of Shares Out</span>
</td>
@ -250,7 +250,7 @@ $: {
{rawData?.shortOutStandingPercent}%
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short % of Float</span>
</td>
@ -258,7 +258,7 @@ $: {
{rawData?.shortFloatPercent}%
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#202020]">
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Ratio (days to cover)</span>
</td>
@ -277,7 +277,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -285,7 +285,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

12
src/lib/components/SimilarETFCard.svelte
View File

@ -26,7 +26,7 @@ export let similarTicker;
<div class="space-y-3 sm:pt-5 hidden lg:block sm:{similarTicker?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-2xl shadow-lg bg-[#000] sm:bg-[#202020] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96">
<div class="sm:rounded-2xl shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96">
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 p-3">
@ -39,14 +39,14 @@ export let similarTicker;
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#202020] border-b border-blue-400">Fund Name</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#202020] border-b border-blue-400">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#202020] border-b border-blue-400">Holdings</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Fund Name</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Holdings</th>
</tr>
</thead>
<tbody>
{#each similarTicker as item, index}
<tr on:click={() => etfSelector(item?.symbol)} class="shake-ticker text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#202020] border-b border-[#000] sm:border-[#202020]">
<tr on:click={() => etfSelector(item?.symbol)} class="shake-ticker text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
{#if index <=6}
<td class="text-gray-200">
@ -105,7 +105,7 @@ export let similarTicker;
<div class="bg-[#000] h-auto w-screen">
<!--Start Header-->
<div class="bg-[#202020] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
Similar Ticker
</h2>

12
src/lib/components/SimilarTickerCard.svelte
View File

@ -26,7 +26,7 @@ export let similarstock;
<div class="space-y-3 sm:pt-5 hidden lg:block lg:{similarstock?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-2xl shadow-lg bg-[#000] sm:bg-[#202020] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96">
<div class="sm:rounded-2xl shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
@ -40,14 +40,14 @@ export let similarstock;
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#202020] border-b border-blue-400">Company</th>
<th class="text-white font-semibold text-sm text-center bg-[#000] sm:bg-[#202020] border-b border-blue-400">Market Cap</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#202020] border-b border-blue-400">Avg Volume</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Company</th>
<th class="text-white font-semibold text-sm text-center bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Market Cap</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Avg Volume</th>
</tr>
</thead>
<tbody>
{#each similarstock as item, index}
<tr on:click={() => stockSelector(item?.symbol)} class="shake-ticker text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#202020] border-b border-[#000] sm:border-[#202020]">
<tr on:click={() => stockSelector(item?.symbol)} class="shake-ticker text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
{#if index <=6}
<td class="text-gray-200">
@ -104,7 +104,7 @@ export let similarstock;
<div class="bg-[#000] h-auto w-screen">
<!--Start Header-->
<div class="bg-[#202020] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
Similar Ticker
</h2>

2
src/lib/components/SiteProgress.svelte
View File

@ -47,7 +47,7 @@
<style>
progress {
--bar-color: #0F0F0F;
--bar-color: #09090B;
--val-color: rgb(34, 153, 221,0.8);
position: fixed;
top: 30;

2
src/lib/components/SkeletonLoading.svelte
View File

@ -6,7 +6,7 @@
<!-- List container -->
<div class="flex flex-col">
<!-- Item -->
<div class="border border-slate-800 rounded-md bg-[#202020]">
<div class="border border-slate-800 rounded-md bg-[#09090B]">
<div class="flex h-auto justify-between items-center">

2
src/lib/components/StockSlider.svelte
View File

@ -47,7 +47,7 @@ $animationSpeed: 60s;
// Styling
.slider {
background: #0F0F0F;
background: #09090B;
margin: auto;
overflow: hidden;
position: relative;

2
src/lib/components/StockSplits.svelte
View File

@ -57,7 +57,7 @@
<!--Start Item-->
<div class="flex flex-row items-center ml-5 w-full mb-6">
<div class="w-full rounded-lg bg-[#202020] shadow-lg h-16 pl-3 ml-6 sm:ml-3 pt-2">
<div class="w-full rounded-lg bg-[#27272A] shadow-lg h-16 pl-3 ml-6 sm:ml-3 pt-2">
<div class="flex flex-row items-center">
<div class="flex flex-col">
<span class="text-slate-400 font-medium text-sm sm:text-md mb-2 mr-auto">

8
src/lib/components/TARating.svelte
View File

@ -111,14 +111,14 @@ $: {
<!-- head -->
<thead>
<tr>
<th class="text-white text-sm font-medium bg-[#0F0F0F] font-semibold">Name</th>
<th class="text-white text-sm font-medium bg-[#0F0F0F] font-semibold text-end">Value</th>
<th class="text-white text-sm font-medium bg-[#0F0F0F] font-semibold text-end">Signal</th>
<th class="text-white text-sm font-medium bg-[#09090B] font-semibold">Name</th>
<th class="text-white text-sm font-medium bg-[#09090B] font-semibold text-end">Value</th>
<th class="text-white text-sm font-medium bg-[#09090B] font-semibold text-end">Signal</th>
</tr>
</thead>
<tbody>
{#each (showFullStats ? signalList : signalList?.slice(0, 3)) as item,index}
<tr class="border-y border-gray-800 odd:bg-[#202020] {index === 2 && !showFullStats && signalList?.length > 2 ? 'opacity-[0.3]' : '' }">
<tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && signalList?.length > 2 ? 'opacity-[0.3]' : '' }">
<td class="text-white text-sm w-1/2 sm:w-full">
{item?.name}
</td>

8
src/lib/components/TagSearchbar.svelte
View File

@ -342,7 +342,7 @@ $: {
{#if !showSuggestions }
{#each popularList as item}
<li>
<a data-sveltekit-preload-data="false" on:click={() => popularTicker(item?.symbol) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#202020] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<a data-sveltekit-preload-data="false" on:click={() => popularTicker(item?.symbol) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<div class="flex flex-row items-center w-full">
<div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
@ -375,7 +375,7 @@ $: {
<li>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#202020] rounded-lg flex justify-start items-center p-2 text-white group'}">
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'}">
<div class="flex flex-row items-center w-full">
<div class="flex flex-col">
@ -482,7 +482,7 @@ $: {
{#if !showSuggestions }
{#each popularList as item}
<li>
<a data-sveltekit-preload-data="false" on:click={() => popularTicker(item?.symbol, item?.type) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer bg-[#202020] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<a data-sveltekit-preload-data="false" on:click={() => popularTicker(item?.symbol, item?.type) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<div class="flex flex-row items-center w-full">
<div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
@ -513,7 +513,7 @@ $: {
<li>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#202020] rounded-lg flex justify-start items-center p-2 text-white group'}">
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'}">
<div class="flex flex-row items-center w-full">
<div class="flex flex-col ml-1">

4
src/lib/components/TextEditor.svelte
View File

@ -242,7 +242,7 @@ function handleImageInput(event) {
<div class="p-2 w-full max-w-xl mr-auto overflow-y-scroll {commentId?.length !== 0 ? '-ml-2' : ''}">
<textarea
on:click={() => expandField = true}
class="rounded-lg text-sm {expandField ? 'min-h-24 h-auto border-[#1C4090]' : 'h-12 border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-500 w-full bg-[#202020] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
class="rounded-lg text-sm {expandField ? 'min-h-24 h-auto border-[#1C4090]' : 'h-12 border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-500 w-full bg-[#09090B] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
placeholder={placeholder}
value={inputValue}
bind:this={ref}
@ -301,7 +301,7 @@ function handleImageInput(event) {
<!--
{:else}
<section class="border-1 border-t border-slate-800 {imageInput?.length !== 0 ? 'min-h-44' : expandField ? 'min-h-40' : 'min-h-24'} rounded-none fixed z-20 w-full -translate-x-1/2 bg-[#202020] bottom-0 left-1/2">
<section class="border-1 border-t border-slate-800 {imageInput?.length !== 0 ? 'min-h-44' : expandField ? 'min-h-40' : 'min-h-24'} rounded-none fixed z-20 w-full -translate-x-1/2 bg-[#09090B] bottom-0 left-1/2">
<div class="w-full m-auto rounded-none mt-5">
<textarea
on:click={() => expandField = true}

40
src/lib/components/TickerInfoCard.svelte
View File

@ -86,7 +86,7 @@ $: {
</script>
<div class="sm:space-y-3">
<div class="rounded-2xl shadow-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#202020] h-auto w-screen pt-16 sm:w-full lg:w-96 lg:pt-0">
<div class="rounded-2xl shadow-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full lg:w-96 lg:pt-0">
<!--Start Header-->
<div class="sm:rounded-t-2xl w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});">
@ -119,32 +119,32 @@ $: {
<table class="table table-sm table-compact ">
<tbody>
<!-- row 1 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">CEO</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{ceoName}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Industry</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{industry}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">CEO</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{ceoName}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Industry</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{industry}</td>
</tr>
<!-- row 2 -->
<tr class="text-white " style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Country</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-normal">{country}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white whitespace-pre-line font-medium">Sector</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020] whitespace-pre-line">{sector}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Country</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{country}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white whitespace-pre-line font-medium">Sector</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-pre-line">{sector}</td>
</tr>
<!-- row 3 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Employees</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020]">{employees}</td>
<td class="text-start lg:border-b lg:border-[#202020] bg-[#000] lg:bg-[#202020] text-white font-medium">Exchange</td>
<td class="bg-[#000] lg:border-b lg:border-[#202020] lg:bg-[#202020]">{exchange}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Employees</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{employees}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Exchange</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{exchange}</td>
</tr>
<!-- row 4 -->
<tr class="text-white border-b border-[#202020]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#202020] text-white font-medium">Mkt Cap</td>
<td class="bg-[#000] lg:bg-[#202020]">{marketCap}</td>
<td class="text-start bg-[#000] lg:bg-[#202020] text-white font-medium">Avg. Volume</td>
<td class="bg-[#000] lg:bg-[#202020]">{avgVolume}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Mkt Cap</td>
<td class="bg-[#000] lg:bg-[#09090B]">{marketCap}</td>
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Avg. Volume</td>
<td class="bg-[#000] lg:bg-[#09090B]">{avgVolume}</td>
</tr>
</tbody>
</table>

10
src/lib/components/TopETFTickerHolder.svelte
View File

@ -22,7 +22,7 @@
<div class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-2xl shadow-lg bg-[#000] sm:bg-[#202020] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96">
<div class="sm:rounded-2xl shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-96">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
@ -40,14 +40,14 @@
<table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#202020] border-b border-blue-400">Company Name</th>
<th class="text-white font-semibold text-sm text-center bg-[#000] sm:bg-[#202020] border-b border-blue-400">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#202020] border-b border-blue-400">% of Fund</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Company Name</th>
<th class="text-white font-semibold text-sm text-center bg-[#000] sm:bg-[#09090B] border-b border-blue-400">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] sm:bg-[#09090B] border-b border-blue-400">% of Fund</th>
</tr>
</thead>
<tbody>
{#each topETFHolder as item, index}
<tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#202020] border-b border-[#000] sm:border-[#202020]">
<tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#000] sm:bg-[#09090B] border-b border-[#000] sm:border-[#27272A]">
{#if index <=6}
<td class="text-gray-200">

10
src/lib/components/TopHoldingCard.svelte
View File

@ -37,7 +37,7 @@ $: {
<div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">
<div class="lg:rounded-2xl shadow-lg bg-[#000] lg:bg-[#202020] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} lg:w-96">
<div class="lg:rounded-2xl shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} lg:w-96">
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
@ -59,15 +59,15 @@ $: {
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr class="border-b border-blue-400">
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#202020] border-b border-blue-400">Company</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#202020] border-b border-blue-400">Market Value</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#202020] border-b border-blue-400">Portfolio</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B] border-b border-blue-400">Company</th>
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B] border-b border-blue-400">Market Value</th>
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B] border-b border-blue-400">Portfolio</th>
</tr>
</thead>
<tbody>
{#each topHoldingList?.slice(0,5) as item}
{#if item?.asset !== null}
<tr on:click={() => stockSelector(item?.asset)} class="lg:shake-ticker text-white cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#202020] border-b border-[#000] lg:border-[#202020]">
<tr on:click={() => stockSelector(item?.asset)} class="lg:shake-ticker text-white cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
<td class="text-gray-200">
<div class="flex flex-row items-center">
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">

12
src/lib/components/TrendAnalysis.svelte
View File

@ -128,7 +128,7 @@ $: {
<div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
<!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm">Trend Sentiment</span>
<span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
@ -137,7 +137,7 @@ $: {
<!--End Flow Sentiment-->
<!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Accuracy</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -165,7 +165,7 @@ $: {
<!--End Put/Call-->
<!--Start Precision-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-medium text-gray-200 text-sm ">Precision</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@ -224,7 +224,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -234,7 +234,7 @@ $: {
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -242,7 +242,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

2
src/lib/components/UpgradeToPro.svelte
View File

@ -2,7 +2,7 @@
export let data;
export let title;
export let color = '#202020'
export let color = '#27272A'
</script>
{#if data?.user?.tier !== 'Pro'}

4
src/lib/components/VaR.svelte
View File

@ -104,7 +104,7 @@
<div class="pb-4 w-full mt-5">
<div class="w-auto p-4 sm:p-6 bg-[#202020] sm:bg-[#0F0F0F] rounded-lg relative">
<div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
<div class="flex flex-row items-center justify-between ">
<div class="relative size-[60px] sm:size-[70px] ml-auto">
<svg class="size-full w-[60px] h-[60px] sm:w-[70px] sm:h-[70px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
@ -146,7 +146,7 @@
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

4
src/lib/components/WIIM.svelte
View File

@ -70,7 +70,7 @@ $: {
<!--Start Item-->
<div class="flex flex-row items-center w-full mb-6">
<div class="w-full rounded-lg {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#202020]'} shadow-lg h-full pl-3 pt-2 pb-4">
<div class="w-full rounded-lg {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
<div class="flex flex-col items-start">
<div class="flex flex-row items-start w-full pt-2">
@ -130,7 +130,7 @@ $: {
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<div class="shadow-lg shadow-bg-[#000] bg-[#09090B] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] 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 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>

44
src/lib/components/WatchListCard.svelte
View File

@ -374,7 +374,7 @@ if(watchList && isLoaded)
<div class="flex justify-start items-center ml-3 mb-10">
<label for="sortByModal" class="cursor-pointer bg-[#0F0F0F] flex flex-row items-center">
<label for="sortByModal" class="cursor-pointer bg-[#09090B] flex flex-row items-center">
<span class="text-white text-sm sm:text-md mr-2">
Sort By:
</span>
@ -399,7 +399,7 @@ if(watchList && isLoaded)
<div class="w-screen sm:w-full rounded-lg">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#0F0F0F] border-bg-[#0F0F0F] m-auto mt-4 ">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 ">
<!-- head -->
<thead>
<tr class="">
@ -415,14 +415,14 @@ if(watchList && isLoaded)
<tbody class="p-0">
{#each watchList as item, index}
<!-- row -->
<tr on:click={() => goto(`/${item?.type === 'stock' ? 'stocks' : item?.type === 'etf' ? 'etf' : 'crypto'}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] border-b-[#0F0F0F] cursor-pointer">
<tr on:click={() => goto(`/${item?.type === 'stock' ? 'stocks' : item?.type === 'etf' ? 'etf' : 'crypto'}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 text-sm text-start border-b-[#0F0F0F]">
<td class="hidden sm:table-cell text-blue-400 text-sm text-start border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-white border-b-[#0F0F0F]">
<td class="text-white border-b-[#09090B]">
<span class="hidden sm:block text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
@ -432,27 +432,27 @@ if(watchList && isLoaded)
</div>
</td>
<td class="text-white text-sm text-center border-b-[#0F0F0F] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">
{item?.eps !== null ? item?.eps?.toFixed(2) : '-'}
</td>
<td class="text-white text-sm text-center border-b-[#0F0F0F] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">
{item?.pe !== null ? item?.pe?.toFixed(2) : '-'}
</td>
<td class="text-white text-sm text-center border-b-[#0F0F0F] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">
{new Intl.NumberFormat("en", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(item?.volume)}
</td>
<td class="text-white text-sm text-center border-b-[#0F0F0F] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">
<td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">
{abbreviateNumber(item?.marketCap,true)}
</td>
<td class="border-b-[#0F0F0F]">
<td class="border-b-[#09090B]">
<div class="flex flex-row justify-end items-center">
<div class="flex flex-col mt-3">
@ -545,7 +545,7 @@ if(watchList && isLoaded)
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#202020] rounded-xl 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">
<label class="bg-[#09090B] rounded-xl 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"></span>
</label>
</div>
@ -569,14 +569,14 @@ if(watchList && isLoaded)
<dialog id="sortByModal" class="modal modal-bottom sm:modal-middle ">
<label id="sortByModal" for="sortByModal" class="cursor-pointer modal-backdrop bg-[#0F0F0F] bg-opacity-[0.5]"></label>
<label id="sortByModal" for="sortByModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
<div class="modal-box w-full bg-[#202020] sm:border sm:border-slate-800">
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
<label for="sortByModal" class="cursor-pointer absolute right-5 top-2 bg-[#202020] text-[1.8rem] text-white">
<label for="sortByModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
✕
</label>
@ -587,7 +587,7 @@ if(watchList && isLoaded)
</h3>
<div class="flex flex-col items-center w-full max-w-3xl bg-[#202020]">
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
<label for="sortByModal" on:click={() => selectSortingMethod('Change')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
@ -600,7 +600,7 @@ if(watchList && isLoaded)
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if sortBy === 'Change'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
@ -619,7 +619,7 @@ if(watchList && isLoaded)
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if sortBy === 'Price'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
@ -637,7 +637,7 @@ if(watchList && isLoaded)
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if sortBy === 'Market Cap'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
@ -650,7 +650,7 @@ if(watchList && isLoaded)
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if sortBy === 'EPS'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
@ -663,7 +663,7 @@ if(watchList && isLoaded)
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if sortBy === 'PE Ratio'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
@ -676,7 +676,7 @@ if(watchList && isLoaded)
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if sortBy === 'Volume'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>
</div>
@ -690,7 +690,7 @@ if(watchList && isLoaded)
</span>
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
{#if sortBy === 'Name: A-Z'}
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#0F0F0F000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
{/if}
</div>

25
src/lib/components/shadcn/accordion/accordion-content.svelte Normal file
View File

@ -0,0 +1,25 @@
<script lang="ts">
import { Accordion as AccordionPrimitive } from "bits-ui";
import { slide } from "svelte/transition";
import { cn } from "$lib/utils.js";
type $$Props = AccordionPrimitive.ContentProps;
let className: $$Props["class"] = undefined;
export let transition: $$Props["transition"] = slide;
export let transitionConfig: $$Props["transitionConfig"] = {
duration: 200,
};
export { className as class };
</script>
<AccordionPrimitive.Content
class={cn("overflow-hidden text-sm transition-all", className)}
{transition}
{transitionConfig}
{...$$restProps}
>
<div class="pb-4 pt-0">
<slot />
</div>
</AccordionPrimitive.Content>

14
src/lib/components/shadcn/accordion/accordion-item.svelte Normal file
View File

@ -0,0 +1,14 @@
<script lang="ts">
import { Accordion as AccordionPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = AccordionPrimitive.ItemProps;
let className: $$Props["class"] = undefined;
export let value: $$Props["value"];
export { className as class };
</script>
<AccordionPrimitive.Item {value} class={cn("", className)} {...$$restProps}>
<slot />
</AccordionPrimitive.Item>

26
src/lib/components/shadcn/accordion/accordion-trigger.svelte Normal file
View File

@ -0,0 +1,26 @@
<script lang="ts">
import { Accordion as AccordionPrimitive } from "bits-ui";
import ChevronDown from "lucide-svelte/icons/chevron-down";
import { cn } from "$lib/utils.js";
type $$Props = AccordionPrimitive.TriggerProps;
type $$Events = AccordionPrimitive.TriggerEvents;
let className: $$Props["class"] = undefined;
export let level: AccordionPrimitive.HeaderProps["level"] = 3;
export { className as class };
</script>
<AccordionPrimitive.Header {level} class="flex ">
<AccordionPrimitive.Trigger
class={cn(
"flex flex-1 items-center justify-between font-medium transition-all [&[data-state=open]>svg1]:rotate-180",
className
)}
{...$$restProps}
on:click
>
<slot />
<ChevronDown class="h-4 w-4 absolute right-16 transition-transform duration-200 " />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>

17
src/lib/components/shadcn/accordion/index.ts Normal file
View File

@ -0,0 +1,17 @@
import { Accordion as AccordionPrimitive } from "bits-ui";
import Content from "./accordion-content.svelte";
import Item from "./accordion-item.svelte";
import Trigger from "./accordion-trigger.svelte";
const Root = AccordionPrimitive.Root;
export {
Root,
Content,
Item,
Trigger,
//
Root as Accordion,
Content as AccordionContent,
Item as AccordionItem,
Trigger as AccordionTrigger,
};

13
src/lib/components/shadcn/alert/alert-description.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
<slot />
</div>

21
src/lib/components/shadcn/alert/alert-title.svelte Normal file
View File

@ -0,0 +1,21 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { HeadingLevel } from "./index.ts";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
level?: HeadingLevel;
};
let className: $$Props["class"] = undefined;
export let level: $$Props["level"] = "h5";
export { className as class };
</script>
<svelte:element
this={level}
class={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...$$restProps}
>
<slot />
</svelte:element>

17
src/lib/components/shadcn/alert/alert.svelte Normal file
View File

@ -0,0 +1,17 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { type Variant, alertVariants } from "./index.ts";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement> & {
variant?: Variant;
};
let className: $$Props["class"] = undefined;
export let variant: $$Props["variant"] = "default";
export { className as class };
</script>
<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
<slot />
</div>

33
src/lib/components/shadcn/alert/index.ts Normal file
View File

@ -0,0 +1,33 @@
import { type VariantProps, tv } from "tailwind-variants";
import Root from "./alert.svelte";
import Description from "./alert-description.svelte";
import Title from "./alert-title.svelte";
export const alertVariants = tv({
base: "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
});
export type Variant = VariantProps<typeof alertVariants>["variant"];
export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
export {
Root,
Description,
Title,
//
Root as Alert,
Description as AlertDescription,
Title as AlertTitle,
};

25
src/lib/components/shadcn/button/button.svelte Normal file
View File

@ -0,0 +1,25 @@
<script lang="ts">
import { Button as ButtonPrimitive } from "bits-ui";
import { type Events, type Props, buttonVariants } from "./index.ts";
import { cn } from "$lib/utils.js";
type $$Props = Props;
type $$Events = Events;
let className: $$Props["class"] = undefined;
export let variant: $$Props["variant"] = "default";
export let size: $$Props["size"] = "default";
export let builders: $$Props["builders"] = [];
export { className as class };
</script>
<ButtonPrimitive.Root
{builders}
class={cn(buttonVariants({ variant, size, className }))}
type="button"
{...$$restProps}
on:click
on:keydown
>
<slot />
</ButtonPrimitive.Root>

49
src/lib/components/shadcn/button/index.ts Normal file
View File

@ -0,0 +1,49 @@
import { type VariantProps, tv } from "tailwind-variants";
import type { Button as ButtonPrimitive } from "bits-ui";
import Root from "./button.svelte";
const buttonVariants = tv({
base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
type Variant = VariantProps<typeof buttonVariants>["variant"];
type Size = VariantProps<typeof buttonVariants>["size"];
type Props = ButtonPrimitive.Props & {
variant?: Variant;
size?: Size;
};
type Events = ButtonPrimitive.Events;
export {
Root,
type Props,
type Events,
//
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants,
};

13
src/lib/components/shadcn/card/card-content.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("p-6 pt-0", className)} {...$$restProps}>
<slot />
</div>

13
src/lib/components/shadcn/card/card-description.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLParagraphElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<p class={cn("text-sm text-white", className)} {...$$restProps}>
<slot />
</p>

13
src/lib/components/shadcn/card/card-footer.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
<slot />
</div>

13
src/lib/components/shadcn/card/card-header.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
<slot />
</div>

21
src/lib/components/shadcn/card/card-title.svelte Normal file
View File

@ -0,0 +1,21 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { HeadingLevel } from "./index.ts";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
tag?: HeadingLevel;
};
let className: $$Props["class"] = undefined;
export let tag: $$Props["tag"] = "h3";
export { className as class };
</script>
<svelte:element
this={tag}
class={cn("text-lg font-semibold leading-none tracking-tight", className)}
{...$$restProps}
>
<slot />
</svelte:element>

16
src/lib/components/shadcn/card/card.svelte Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div
class={cn("rounded-lg border text-white shadow-sm", className)}
{...$$restProps}
>
<slot />
</div>

24
src/lib/components/shadcn/card/index.ts Normal file
View File

@ -0,0 +1,24 @@
import Root from "./card.svelte";
import Content from "./card-content.svelte";
import Description from "./card-description.svelte";
import Footer from "./card-footer.svelte";
import Header from "./card-header.svelte";
import Title from "./card-title.svelte";
export {
Root,
Content,
Description,
Footer,
Header,
Title,
//
Root as Card,
Content as CardContent,
Description as CardDescription,
Footer as CardFooter,
Header as CardHeader,
Title as CardTitle,
};
export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

35
src/lib/components/shadcn/dropdown-menu/dropdown-menu-checkbox-item.svelte Normal file
View File

@ -0,0 +1,35 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import Check from "lucide-svelte/icons/check";
import { cn } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
let className: $$Props["class"] = undefined;
export let checked: $$Props["checked"] = undefined;
export { className as class };
</script>
<DropdownMenuPrimitive.CheckboxItem
bind:checked
class={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.CheckboxIndicator>
<Check class="h-4 w-4" />
</DropdownMenuPrimitive.CheckboxIndicator>
</span>
<slot />
</DropdownMenuPrimitive.CheckboxItem>

27
src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte Normal file
View File

@ -0,0 +1,27 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn, flyAndScale } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.ContentProps;
type $$Events = DropdownMenuPrimitive.ContentEvents;
let className: $$Props["class"] = undefined;
export let sideOffset: $$Props["sideOffset"] = 4;
export let transition: $$Props["transition"] = flyAndScale;
export let transitionConfig: $$Props["transitionConfig"] = undefined;
export { className as class };
</script>
<DropdownMenuPrimitive.Content
{transition}
{transitionConfig}
{sideOffset}
class={cn(
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
className
)}
{...$$restProps}
on:keydown
>
<slot />
</DropdownMenuPrimitive.Content>

31
src/lib/components/shadcn/dropdown-menu/dropdown-menu-item.svelte Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.ItemProps & {
inset?: boolean;
};
type $$Events = DropdownMenuPrimitive.ItemEvents;
let className: $$Props["class"] = undefined;
export let inset: $$Props["inset"] = undefined;
export { className as class };
</script>
<DropdownMenuPrimitive.Item
class={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
>
<slot />
</DropdownMenuPrimitive.Item>

19
src/lib/components/shadcn/dropdown-menu/dropdown-menu-label.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.LabelProps & {
inset?: boolean;
};
let className: $$Props["class"] = undefined;
export let inset: $$Props["inset"] = undefined;
export { className as class };
</script>
<DropdownMenuPrimitive.Label
class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
{...$$restProps}
>
<slot />
</DropdownMenuPrimitive.Label>

11
src/lib/components/shadcn/dropdown-menu/dropdown-menu-radio-group.svelte Normal file
View File

@ -0,0 +1,11 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
type $$Props = DropdownMenuPrimitive.RadioGroupProps;
export let value: $$Props["value"] = undefined;
</script>
<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
<slot />
</DropdownMenuPrimitive.RadioGroup>

35
src/lib/components/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte Normal file
View File

@ -0,0 +1,35 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import Circle from "lucide-svelte/icons/circle";
import { cn } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.RadioItemProps;
type $$Events = DropdownMenuPrimitive.RadioItemEvents;
let className: $$Props["class"] = undefined;
export let value: $$Props["value"];
export { className as class };
</script>
<DropdownMenuPrimitive.RadioItem
class={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
className
)}
{value}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.RadioIndicator>
<Circle class="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.RadioIndicator>
</span>
<slot />
</DropdownMenuPrimitive.RadioItem>

14
src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte Normal file
View File

@ -0,0 +1,14 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.SeparatorProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<DropdownMenuPrimitive.Separator
class={cn("-mx-1 my-1 h-px bg-muted", className)}
{...$$restProps}
/>

13
src/lib/components/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLSpanElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
<slot />
</span>

30
src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte Normal file
View File

@ -0,0 +1,30 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn, flyAndScale } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.SubContentProps;
type $$Events = DropdownMenuPrimitive.SubContentEvents;
let className: $$Props["class"] = undefined;
export let transition: $$Props["transition"] = flyAndScale;
export let transitionConfig: $$Props["transitionConfig"] = {
x: -10,
y: 0,
};
export { className as class };
</script>
<DropdownMenuPrimitive.SubContent
{transition}
{transitionConfig}
class={cn(
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
className
)}
{...$$restProps}
on:keydown
on:focusout
on:pointermove
>
<slot />
</DropdownMenuPrimitive.SubContent>

32
src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte Normal file
View File

@ -0,0 +1,32 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import ChevronRight from "lucide-svelte/icons/chevron-right";
import { cn } from "$lib/utils.js";
type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
inset?: boolean;
};
type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
let className: $$Props["class"] = undefined;
export let inset: $$Props["inset"] = undefined;
export { className as class };
</script>
<DropdownMenuPrimitive.SubTrigger
class={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
inset && "pl-8",
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerleave
on:pointermove
>
<slot />
<ChevronRight class="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>

48
src/lib/components/shadcn/dropdown-menu/index.ts Normal file
View File

@ -0,0 +1,48 @@
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import Item from "./dropdown-menu-item.svelte";
import Label from "./dropdown-menu-label.svelte";
import Content from "./dropdown-menu-content.svelte";
import Shortcut from "./dropdown-menu-shortcut.svelte";
import RadioItem from "./dropdown-menu-radio-item.svelte";
import Separator from "./dropdown-menu-separator.svelte";
import RadioGroup from "./dropdown-menu-radio-group.svelte";
import SubContent from "./dropdown-menu-sub-content.svelte";
import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
const Sub = DropdownMenuPrimitive.Sub;
const Root = DropdownMenuPrimitive.Root;
const Trigger = DropdownMenuPrimitive.Trigger;
const Group = DropdownMenuPrimitive.Group;
export {
Sub,
Root,
Item,
Label,
Group,
Trigger,
Content,
Shortcut,
Separator,
RadioItem,
SubContent,
SubTrigger,
RadioGroup,
CheckboxItem,
//
Root as DropdownMenu,
Sub as DropdownMenuSub,
Item as DropdownMenuItem,
Label as DropdownMenuLabel,
Group as DropdownMenuGroup,
Content as DropdownMenuContent,
Trigger as DropdownMenuTrigger,
Shortcut as DropdownMenuShortcut,
RadioItem as DropdownMenuRadioItem,
Separator as DropdownMenuSeparator,
RadioGroup as DropdownMenuRadioGroup,
SubContent as DropdownMenuSubContent,
SubTrigger as DropdownMenuSubTrigger,
CheckboxItem as DropdownMenuCheckboxItem,
};

29
src/lib/components/shadcn/input/index.ts Normal file
View File

@ -0,0 +1,29 @@
import Root from "./input.svelte";
export type FormInputEvent<T extends Event = Event> = T & {
currentTarget: EventTarget & HTMLInputElement;
};
export type InputEvents = {
blur: FormInputEvent<FocusEvent>;
change: FormInputEvent<Event>;
click: FormInputEvent<MouseEvent>;
focus: FormInputEvent<FocusEvent>;
focusin: FormInputEvent<FocusEvent>;
focusout: FormInputEvent<FocusEvent>;
keydown: FormInputEvent<KeyboardEvent>;
keypress: FormInputEvent<KeyboardEvent>;
keyup: FormInputEvent<KeyboardEvent>;
mouseover: FormInputEvent<MouseEvent>;
mouseenter: FormInputEvent<MouseEvent>;
mouseleave: FormInputEvent<MouseEvent>;
mousemove: FormInputEvent<MouseEvent>;
paste: FormInputEvent<ClipboardEvent>;
input: FormInputEvent<InputEvent>;
wheel: FormInputEvent<WheelEvent>;
};
export {
Root,
//
Root as Input,
};

42
src/lib/components/shadcn/input/input.svelte Normal file
View File

@ -0,0 +1,42 @@
<script lang="ts">
import type { HTMLInputAttributes } from "svelte/elements";
import type { InputEvents } from "./index.ts";
import { cn } from "$lib/utils.js";
type $$Props = HTMLInputAttributes;
type $$Events = InputEvents;
let className: $$Props["class"] = undefined;
export let value: $$Props["value"] = undefined;
export { className as class };
// Workaround for https://github.com/sveltejs/svelte/issues/9305
// Fixed in Svelte 5, but not backported to 4.x.
export let readonly: $$Props["readonly"] = undefined;
</script>
<input
class={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
bind:value
{readonly}
on:blur
on:change
on:click
on:focus
on:focusin
on:focusout
on:keydown
on:keypress
on:keyup
on:mouseover
on:mouseenter
on:mouseleave
on:mousemove
on:paste
on:input
on:wheel|passive
{...$$restProps}
/>

Some files were not shown because too many files have changed in this diff Show More