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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 22:12:52 +01:00
parent 57d7fd157c
commit ac9fc73737
4 changed files with 130 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/lib/components/Table/DarkPoolTable.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
import { screenWidth } from "$lib/store"; import { screenWidth } from "$lib/store";
import { abbreviateNumberWithColor, sectorNavigation } from "$lib/utils"; import { abbreviateNumber, sectorNavigation } from "$lib/utils";
import VirtualList from "svelte-tiny-virtual-list"; import VirtualList from "svelte-tiny-virtual-list";
import HoverStockChart from "$lib/components/HoverStockChart.svelte"; import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import { mode } from "mode-watcher";
export let data; export let data;
export let displayedData = []; export let displayedData = [];
@ -128,7 +129,7 @@
<div class="min-w-[1000px]"> <div class="min-w-[1000px]">
<!-- Header row using grid --> <!-- Header row using grid -->
<div <div
class="grid grid-cols-10 sticky top-0 z-40 border border-gray-800 bg-default text-white font-bold text-xs uppercase" class="grid grid-cols-10 sticky top-0 z-40 border border-gray-300 dark:border-gray-800 font-bold text-xs uppercase"
> >
<div <div
on:click={() => sortData("date")} on:click={() => sortData("date")}
@ -350,15 +351,15 @@
let:style let:style
{style} {style}
class="grid grid-cols-10 gap-0" class="grid grid-cols-10 gap-0"
class:bg-[#19191F]={index % 2 === 0} class:bg-[#fff]={index % 2 === 0 && $mode === "light"}
class:bg-[#121217]={index % 2 !== 0} class:bg-[#19191F]={index % 2 === 0 && $mode !== "light"}
class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"}
class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
class:opacity-30={index + 1 === rawData?.length && class:opacity-30={index + 1 === rawData?.length &&
data?.user?.tier !== "Pro"} data?.user?.tier !== "Pro"}
> >
<!-- Date Column --> <!-- Date Column -->
<div <div class="p-2 text-center text-xs sm:text-sm whitespace-nowrap">
class="p-2 text-center text-white text-xs sm:text-sm whitespace-nowrap"
>
{$screenWidth < 640 {$screenWidth < 640
? formatToNewYorkTime(displayedData[index]?.date)?.slice(0, -3) ? formatToNewYorkTime(displayedData[index]?.date)?.slice(0, -3)
: formatToNewYorkTime(displayedData[index]?.date)} : formatToNewYorkTime(displayedData[index]?.date)}
@ -371,48 +372,38 @@
/> />
</div> </div>
<!-- Price Column --> <!-- Price Column -->
<div class="p-2 text-center text-white text-sm sm:text-[1rem]"> <div class="p-2 text-center text-sm sm:text-[1rem]">
{displayedData[index]?.price} {displayedData[index]?.price}
</div> </div>
<!-- Premium Column --> <!-- Premium Column -->
<div class="p-2 text-center text-white text-sm sm:text-[1rem]"> <div class="p-2 text-center text-sm sm:text-[1rem]">
{@html abbreviateNumberWithColor( {abbreviateNumber(displayedData[index]?.premium, true, true)}
displayedData[index]?.premium,
true,
true,
)}
</div> </div>
<!-- Size Column --> <!-- Size Column -->
<div class="p-2 text-center text-white text-sm sm:text-[1rem]"> <div class="p-2 text-center text-sm sm:text-[1rem]">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
}).format(displayedData[index]?.size)} }).format(displayedData[index]?.size)}
</div> </div>
<!-- Volume Column --> <!-- Volume Column -->
<div class="p-2 text-center text-white text-sm sm:text-[1rem]"> <div class="p-2 text-center text-sm sm:text-[1rem]">
{@html abbreviateNumberWithColor( {abbreviateNumber(displayedData[index]?.volume, false, true)}
displayedData[index]?.volume,
false,
true,
)}
</div> </div>
<!-- % Size / Vol Column --> <!-- % Size / Vol Column -->
<div class="p-2 text-center text-white text-sm sm:text-[1rem]"> <div class="p-2 text-center text-sm sm:text-[1rem]">
{displayedData[index]?.sizeVolRatio > 0.01 {displayedData[index]?.sizeVolRatio > 0.01
? displayedData[index]?.sizeVolRatio?.toFixed(2) + "%" ? displayedData[index]?.sizeVolRatio?.toFixed(2) + "%"
: "< 0.01%"} : "< 0.01%"}
</div> </div>
<!-- % Size / Avg Vol Column --> <!-- % Size / Avg Vol Column -->
<div class="p-2 text-center text-white text-sm sm:text-[1rem]"> <div class="p-2 text-center text-sm sm:text-[1rem]">
{displayedData[index]?.sizeAvgVolRatio > 0.01 {displayedData[index]?.sizeAvgVolRatio > 0.01
? displayedData[index]?.sizeAvgVolRatio?.toFixed(2) + "%" ? displayedData[index]?.sizeAvgVolRatio?.toFixed(2) + "%"
: "< 0.01%"} : "< 0.01%"}
</div> </div>
<!-- Sector Column --> <!-- Sector Column -->
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
<a <a
href={sectorNavigation?.find( href={sectorNavigation?.find(
(item) => item?.title === displayedData[index]?.sector, (item) => item?.title === displayedData[index]?.sector,
@ -425,7 +416,7 @@
</a> </a>
</div> </div>
<!-- Asset Type Column --> <!-- Asset Type Column -->
<div class="p-2 text-center text-white text-sm sm:text-[1rem]"> <div class="p-2 text-center text-sm sm:text-[1rem]">
{displayedData[index]?.assetType} {displayedData[index]?.assetType}
</div> </div>
</div> </div>

153
src/routes/dark-pool-flow/+page.svelte
View File

@ -16,6 +16,7 @@
import { page } from "$app/stores"; import { page } from "$app/stores";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import DarkPoolTable from "$lib/components/Table/DarkPoolTable.svelte"; import DarkPoolTable from "$lib/components/Table/DarkPoolTable.svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
@ -427,12 +428,12 @@
let previousVolume = 0; //This is needed to play the sound only if it changes. let previousVolume = 0; //This is needed to play the sound only if it changes.
let notFound = false; let notFound = false;
let isLoaded = false; let isLoaded = false;
$: mode = $isOpen === true ? true : false; $: modeStatus = $isOpen === true ? true : false;
function toggleMode() { function toggleMode() {
if ($isOpen) { if ($isOpen) {
mode = !mode; modeStatus = !modeStatus;
if (mode === true && selectedDate !== undefined) { if (modeStatus === true && selectedDate !== undefined) {
selectedDate = undefined; selectedDate = undefined;
rawData = data?.getFlowData; rawData = data?.getFlowData;
displayedData = [...rawData]; displayedData = [...rawData];
@ -695,7 +696,7 @@
<body class="overflow-y-auto"> <body class="overflow-y-auto">
<section <section
class="w-full max-w-screen sm:max-w-7xl sm:max-w-[1400px] flex justify-center items-center bg-default pb-20 mt-5 sm:mt-0 px-3 sm:px-0" class="w-full max-w-screen sm:max-w-7xl sm:max-w-[1400px] flex justify-center items-center pb-20 mt-5 sm:mt-0 px-3 sm:px-0"
> >
<div class="w-full m-auto min-h-screen"> <div class="w-full m-auto min-h-screen">
<!-- <!--
@ -709,16 +710,18 @@
{#if !$isOpen} {#if !$isOpen}
<div <div
class="text-white text-sm sm:text-[1rem] italic text-center sm:text-start w-full ml-2 mb-3" class=" text-sm sm:text-[1rem] italic text-center sm:text-start w-full ml-2 mb-3"
> >
Dark Pool Live flow of {data?.user?.tier === "Pro" && selectedDate Dark Pool Live flow of {data?.user?.tier === "Pro" && selectedDate
? df.format(selectedDate?.toDate()) ? df.format(selectedDate?.toDate())
: nyseDate} (NYSE Time) : nyseDate} (NYSE Time)
</div> </div>
{/if} {/if}
<div class="rounded-md border border-gray-700 bg-primary p-2">
<div <div
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600" class="rounded-md border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-100 dark:bg-primary p-2"
>
<div
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-300 dark:border-gray-600"
> >
<div <div
class="flex flex-row items-center justify-center sm:justify-start" class="flex flex-row items-center justify-center sm:justify-start"
@ -729,7 +732,7 @@
class="xl:tooltip xl:tooltip-bottom flex flex-col items-center mr-3 cursor-pointer" class="xl:tooltip xl:tooltip-bottom flex flex-col items-center mr-3 cursor-pointer"
> >
<div <div
class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center" class="rounded-full w-10 h-10 relative bg-gray-400 dark:bg-[#000] flex items-center justify-center"
> >
{#if !muted} {#if !muted}
<svg <svg
@ -737,7 +740,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="#fff" fill="currentColor"
d="M9 2.5a.5.5 0 0 0-.849-.358l-2.927 2.85H3.5a1.5 1.5 0 0 0-1.5 1.5v2.99a1.5 1.5 0 0 0 1.5 1.5h1.723l2.927 2.875A.5.5 0 0 0 9 13.5zm1.111 2.689a.5.5 0 0 1 .703-.08l.002.001l.002.002l.005.004l.015.013l.046.04c.036.034.085.08.142.142c.113.123.26.302.405.54c.291.48.573 1.193.573 2.148c0 .954-.282 1.668-.573 2.148a3.394 3.394 0 0 1-.405.541a2.495 2.495 0 0 1-.202.196l-.008.007h-.001s-.447.243-.703-.078a.5.5 0 0 1 .075-.7l.002-.002l-.001.001l.002-.001h-.001l.018-.016c.018-.017.048-.045.085-.085a2.4 2.4 0 0 0 .284-.382c.21-.345.428-.882.428-1.63c0-.747-.218-1.283-.428-1.627a2.382 2.382 0 0 0-.368-.465a.5.5 0 0 1-.096-.717m1.702-2.08a.5.5 0 1 0-.623.782l.011.01l.052.045c.047.042.116.107.201.195c.17.177.4.443.63.794c.46.701.92 1.733.92 3.069a5.522 5.522 0 0 1-.92 3.065c-.23.35-.46.614-.63.79a3.922 3.922 0 0 1-.252.24l-.011.01h-.001a.5.5 0 0 0 .623.782l.033-.027l.075-.065c.063-.057.15-.138.253-.245a6.44 6.44 0 0 0 .746-.936a6.522 6.522 0 0 0 1.083-3.614a6.542 6.542 0 0 0-1.083-3.618a6.517 6.517 0 0 0-.745-.938a4.935 4.935 0 0 0-.328-.311l-.023-.019l-.007-.006l-.002-.002zM10.19 5.89l-.002-.001Z" d="M9 2.5a.5.5 0 0 0-.849-.358l-2.927 2.85H3.5a1.5 1.5 0 0 0-1.5 1.5v2.99a1.5 1.5 0 0 0 1.5 1.5h1.723l2.927 2.875A.5.5 0 0 0 9 13.5zm1.111 2.689a.5.5 0 0 1 .703-.08l.002.001l.002.002l.005.004l.015.013l.046.04c.036.034.085.08.142.142c.113.123.26.302.405.54c.291.48.573 1.193.573 2.148c0 .954-.282 1.668-.573 2.148a3.394 3.394 0 0 1-.405.541a2.495 2.495 0 0 1-.202.196l-.008.007h-.001s-.447.243-.703-.078a.5.5 0 0 1 .075-.7l.002-.002l-.001.001l.002-.001h-.001l.018-.016c.018-.017.048-.045.085-.085a2.4 2.4 0 0 0 .284-.382c.21-.345.428-.882.428-1.63c0-.747-.218-1.283-.428-1.627a2.382 2.382 0 0 0-.368-.465a.5.5 0 0 1-.096-.717m1.702-2.08a.5.5 0 1 0-.623.782l.011.01l.052.045c.047.042.116.107.201.195c.17.177.4.443.63.794c.46.701.92 1.733.92 3.069a5.522 5.522 0 0 1-.92 3.065c-.23.35-.46.614-.63.79a3.922 3.922 0 0 1-.252.24l-.011.01h-.001a.5.5 0 0 0 .623.782l.033-.027l.075-.065c.063-.057.15-.138.253-.245a6.44 6.44 0 0 0 .746-.936a6.522 6.522 0 0 0 1.083-3.614a6.542 6.542 0 0 0-1.083-3.618a6.517 6.517 0 0 0-.745-.938a4.935 4.935 0 0 0-.328-.311l-.023-.019l-.007-.006l-.002-.002zM10.19 5.89l-.002-.001Z"
/></svg /></svg
> >
@ -747,7 +750,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#fff" fill="currentColor"
d="M3.28 2.22a.75.75 0 1 0-1.06 1.06L6.438 7.5H4.25A2.25 2.25 0 0 0 2 9.749v4.497a2.25 2.25 0 0 0 2.25 2.25h3.68a.75.75 0 0 1 .498.19l4.491 3.994c.806.716 2.081.144 2.081-.934V16.06l5.72 5.72a.75.75 0 0 0 1.06-1.061zm13.861 11.74l1.138 1.137A6.974 6.974 0 0 0 19 12a6.973 6.973 0 0 0-.84-3.328a.75.75 0 0 0-1.32.714c.42.777.66 1.666.66 2.614c0 .691-.127 1.351-.359 1.96m2.247 2.246l1.093 1.094A9.956 9.956 0 0 0 22 12a9.959 9.959 0 0 0-1.96-5.946a.75.75 0 0 0-1.205.892A8.459 8.459 0 0 1 20.5 12a8.458 8.458 0 0 1-1.112 4.206M9.52 6.338l5.48 5.48V4.25c0-1.079-1.274-1.65-2.08-.934z" d="M3.28 2.22a.75.75 0 1 0-1.06 1.06L6.438 7.5H4.25A2.25 2.25 0 0 0 2 9.749v4.497a2.25 2.25 0 0 0 2.25 2.25h3.68a.75.75 0 0 1 .498.19l4.491 3.994c.806.716 2.081.144 2.081-.934V16.06l5.72 5.72a.75.75 0 0 0 1.06-1.061zm13.861 11.74l1.138 1.137A6.974 6.974 0 0 0 19 12a6.973 6.973 0 0 0-.84-3.328a.75.75 0 0 0-1.32.714c.42.777.66 1.666.66 2.614c0 .691-.127 1.351-.359 1.96m2.247 2.246l1.093 1.094A9.956 9.956 0 0 0 22 12a9.959 9.959 0 0 0-1.96-5.946a.75.75 0 0 0-1.205.892A8.459 8.459 0 0 1 20.5 12a8.458 8.458 0 0 1-1.112 4.206M9.52 6.338l5.48 5.48V4.25c0-1.079-1.274-1.65-2.08-.934z"
/></svg /></svg
> >
@ -757,8 +760,8 @@
<span <span
class="text-xs sm:text-sm sm:text-lg {!mode class="text-xs sm:text-sm sm:text-lg {!mode
? 'text-white' ? ''
: 'text-gray-400'} mr-3" : 'text-muted dark:text-gray-400'} mr-3"
> >
{$isOpen ? "Paused" : "Market Closed"} {$isOpen ? "Paused" : "Market Closed"}
</span> </span>
@ -768,7 +771,7 @@
> >
<input <input
on:click={() => on:click={() =>
toast.info("Feature is coming soon 🔥", { toast?.info("Feature is coming soon 🔥", {
style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`, style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`,
})} })}
type="checkbox" type="checkbox"
@ -784,9 +787,9 @@
<div class="ml-3 flex flex-col items-start"> <div class="ml-3 flex flex-col items-start">
<span <span
class="text-xs sm:text-sm sm:text-lg {mode class="text-xs sm:text-sm sm:text-lg {modeStatus
? 'text-white' ? ''
: 'text-gray-400'}" : 'text-muted dark:text-gray-400'}"
> >
Live Flow Live Flow
</span> </span>
@ -796,13 +799,13 @@
<div class="sm:ml-auto w-full sm:w-fit pt-5"> <div class="sm:ml-auto w-full sm:w-fit pt-5">
<div class="relative flex flex-col sm:flex-row items-center"> <div class="relative flex flex-col sm:flex-row items-center">
<div <div
class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-secondary rounded-md border border-gray-600" class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center shadow-sm bg-white dark:bg-secondary rounded-md border border-gray-300 dark:border-gray-600"
> >
<label class="flex flex-row items-center"> <label class="flex flex-row items-center">
<input <input
id="modal-search" id="modal-search"
type="search" type="search"
class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-inherit" class="sm:ml-2 text-[1rem] placeholder-gray-500 dark:placeholder-gray-300 border-transparent bg-white dark:bg-secondary focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5"
placeholder="Stock or ETF symbol..." placeholder="Stock or ETF symbol..."
bind:value={filterQuery} bind:value={filterQuery}
on:input={debouncedHandleInput} on:input={debouncedHandleInput}
@ -821,7 +824,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="white" fill="currentColor"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/></svg /></svg
> >
@ -832,7 +835,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#fff" fill="currentColor"
d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"
/></svg /></svg
> >
@ -851,12 +854,12 @@
<Popover.Trigger asChild let:builder> <Popover.Trigger asChild let:builder>
<Button <Button
on:click={() => on:click={() =>
toast.info("Feature is coming soon 🔥", { toast?.info("Feature is coming soon 🔥", {
style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`, style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`,
})} })}
class={cn( class={cn(
"w-full sm:w-[160px] truncate sm:mr-3 py-3 bg-[#000] sm:hover:bg-[#000] sm:hover:text-white text-white justify-center sm:justify-start text-center sm:text-left font-normal border-none rounded-md", "w-full sm:w-[160px] truncate sm:mr-3 py-3 shadow-sm border-gray-300 justify-center sm:justify-start text-center sm:text-left font-normal border-none rounded-md",
!selectedDate && "text-gray-300", !selectedDate && "text-muted dark:text-gray-300",
)} )}
builders={[builder]} builders={[builder]}
> >
@ -870,11 +873,11 @@
</div> </div>
<div <div
class="mr-1 flex items-center justify-between lg:mr-2 pb-1.5 border-b border-gray-600 mt-1.5" class="mr-1 flex items-center justify-between lg:mr-2 pb-1.5 border-b border-gray-300 dark:border-gray-600 mt-1.5"
> >
<button <button
on:click={() => (showFilters = !showFilters)} on:click={() => (showFilters = !showFilters)}
class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold text-white" class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold"
title="Hide Filter Area" title="Hide Filter Area"
> >
<svg <svg
@ -899,7 +902,7 @@
> >
<label <label
for="ruleModal" for="ruleModal"
class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-[#000] sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none py-2 pl-3 pr-4 font-semibold shadow-sm bg-white sm:hover:bg-gray-100 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@ -920,7 +923,7 @@
{#if ruleOfList?.length !== 0} {#if ruleOfList?.length !== 0}
<label <label
on:click={handleResetAll} on:click={handleResetAll}
class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-[#000] sm:hover:text-red-500 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold shadow-sm bg-white dark:bg-[#000] sm:hover:text-red-500 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@ -943,14 +946,14 @@
</div> </div>
<div <div
class="sm:grid sm:gap-x-2.5 md:grid-cols-2 lg:grid-cols-3 w-full mt-3 border-t border-b border-gray-600" class="sm:grid sm:gap-x-2.5 md:grid-cols-2 lg:grid-cols-3 w-full mt-3 border-t border-b border-gray-300 dark:border-gray-600"
> >
{#each displayRules as row (row?.rule)} {#each displayRules as row (row?.rule)}
<!--Start Added Rules--> <!--Start Added Rules-->
<div <div
class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-white" class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight"
> >
<div class="hide-scroll text-white"> <div class="hide-scroll">
{row?.label?.length > 20 {row?.label?.length > 20
? row?.label?.slice(0, 20)?.replace("[%]", "") + "..." ? row?.label?.slice(0, 20)?.replace("[%]", "") + "..."
: row?.label?.replace("[%]", "")} : row?.label?.replace("[%]", "")}
@ -963,7 +966,7 @@
role="tooltip" role="tooltip"
> >
<span <span
class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-300 sm:hover:text-white" class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-500 dark:text-gray-300 dark:sm:hover:text-white"
> >
<svg <svg
class="h-[10.5px] w-[10.5px]" class="h-[10.5px] w-[10.5px]"
@ -982,14 +985,14 @@
<div class="flex items-center"> <div class="flex items-center">
<button <button
on:click={() => handleDeleteRule(row?.rule)} on:click={() => handleDeleteRule(row?.rule)}
class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-hidden" class="mr-1.5 cursor-pointer text-gray-500 dark:text-gray-300 sm:hover:text-red-500 focus:outline-hidden"
title="Remove filter" title="Remove filter"
> >
<svg <svg
class="w-6 h-6" class="w-6 h-6"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="CurrentColor" stroke="currentColor"
style="max-width:40px" style="max-width:40px"
> >
<path <path
@ -1006,7 +1009,7 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-md truncate" class="bg-white dark:bg-[#000] shadow-sm h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 rounded-md truncate"
> >
<span class="truncate ml-2 text-sm sm:text-[1rem]"> <span class="truncate ml-2 text-sm sm:text-[1rem]">
{#if valueMappings[row?.rule] === "any"} {#if valueMappings[row?.rule] === "any"}
@ -1043,7 +1046,7 @@
> >
{#if !categoricalRules?.includes(row?.rule)} {#if !categoricalRules?.includes(row?.rule)}
<DropdownMenu.Label <DropdownMenu.Label
class="absolute mt-2 h-11 border-gray-800 border-b -top-1 z-20 fixed sticky bg-default" class="absolute mt-2 h-11 border-gray-300 dark:border-gray-800 border-b -top-1 z-20 fixed sticky bg-white dark:bg-default"
> >
<div <div
class="flex items-center justify-start gap-x-1" class="flex items-center justify-start gap-x-1"
@ -1056,7 +1059,7 @@
<DropdownMenu.Trigger asChild let:builder <DropdownMenu.Trigger asChild let:builder
><Button ><Button
builders={[builder]} builders={[builder]}
class="w-fit -mt-1 -ml-2 bg-default flex flex-row justify-between items-center text-white" class="w-fit -mt-1 -ml-2 flex flex-row justify-between items-center "
> >
<span <span
class="truncate ml-2 text-sm sm:text-[1rem]" class="truncate ml-2 text-sm sm:text-[1rem]"
@ -1111,11 +1114,9 @@
: ""} : ""}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule, 0)} handleValueInput(e, row?.rule, 0)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-secondary" class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-muted dark:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary"
/> />
<span <span class=" text-[1rem] font-normal mt-1">
class="text-white text-[1rem] font-normal mt-1"
>
& &
</span> </span>
<input <input
@ -1128,7 +1129,7 @@
: ""} : ""}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule, 1)} handleValueInput(e, row?.rule, 1)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-secondary" class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-muted dark:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary"
/> />
</div> </div>
{:else} {:else}
@ -1140,7 +1141,7 @@
: valueMappings[row?.rule]} : valueMappings[row?.rule]}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule)} handleValueInput(e, row?.rule)}
class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-secondary" class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-muted dark:placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary"
/> />
{/if} {/if}
@ -1155,7 +1156,7 @@
"add", "add",
)} )}
><svg ><svg
class="size-6 cursor-pointer text-white" class="size-6 cursor-pointer"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -1175,7 +1176,7 @@
"minus", "minus",
)} )}
><svg ><svg
class="size-6 cursor-pointer text-white" class="size-6 cursor-pointer"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -1207,7 +1208,7 @@
{#if ruleCondition[row?.rule] === "between"} {#if ruleCondition[row?.rule] === "between"}
{#if newValue && row?.step[index + 1]} {#if newValue && row?.step[index + 1]}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-primary" class="sm:hover:bg-gray-300 dark:sm:hover:bg-[#2A2E39]"
> >
<button <button
on:click={() => { on:click={() => {
@ -1216,7 +1217,7 @@
row?.step[index + 1], row?.step[index + 1],
]); ]);
}} }}
class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="cursor-pointer block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule]?.replace( {ruleCondition[row?.rule]?.replace(
"between", "between",
@ -1230,13 +1231,13 @@
{/if} {/if}
{:else} {:else}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-primary" class="sm:hover:bg-gray-300 dark:sm:hover:bg-[#2A2E39]"
> >
<button <button
on:click={() => { on:click={() => {
handleChangeValue(newValue); handleChangeValue(newValue);
}} }}
class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="cursor-pointer block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule] {ruleCondition[row?.rule]
?.replace("under", "Under") ?.replace("under", "Under")
@ -1250,7 +1251,7 @@
{:else if categoricalRules?.includes(row?.rule)} {:else if categoricalRules?.includes(row?.rule)}
{#each row?.step as item} {#each row?.step as item}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-[#2A2E39]" class="sm:hover:bg-gray-300 dark:sm:hover:bg-[#2A2E39]"
> >
<div <div
class="flex items-center" class="flex items-center"
@ -1261,7 +1262,7 @@
on:click={() => { on:click={() => {
handleChangeValue(item); handleChangeValue(item);
}} }}
class="cursor-pointer text-white" class="cursor-pointer"
for={item} for={item}
> >
<input <input
@ -1297,20 +1298,9 @@
<UpgradeToPro {data} display={true} /> <UpgradeToPro {data} display={true} />
</div> </div>
{:else} {:else}
<div <Infobox
class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]" text="Looks like your taste is one-of-a-kind! No matches found... yet!"
> />
<svg
class="w-6 h-6 shrink-0 inline-block sm:mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
Looks like your taste is one-of-a-kind! No matches found... yet!
</div>
{/if} {/if}
</div> </div>
{:else} {:else}
@ -1341,21 +1331,21 @@
></label> ></label>
<div <div
class="modal-box relative bg-primary z-20 mx-2 min-h-[30vh] h-[800px] rounded bg-default opacity-100 border border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl overflow-y-auto" class="modal-box relative bg-white dark:bg-primary z-20 mx-2 min-h-[30vh] h-[800px] rounded opacity-100 border border-gray-300 dark:border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl overflow-y-auto"
> >
<div class="relative flex flex-col w-full"> <div class="relative flex flex-col w-full">
<!-- Sticky Header --> <!-- Sticky Header -->
<div <div
class="fixed w-full h-fit sticky -top-6 z-40 bg-primary shadow-xs opacity-100 pb-6 pt-5 border-gray-600 border-b" class="fixed w-full h-fit sticky -top-6 z-40 shadow-xs opacity-100 pb-6 pt-5 border-gray-300 dark:border-gray-600 border-b"
> >
<div class="flex flex-row items-center justify-between mb-2"> <div class="flex flex-row items-center justify-between mb-2">
<h2 class="text-white text-[1rem] sm:text-xl font-semibold"> <h2 class=" text-[1rem] sm:text-xl font-semibold">
Select screener filters ({allRows?.length} total) Select screener filters ({allRows?.length} total)
</h2> </h2>
<label <label
for="ruleModal" for="ruleModal"
class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem] text-white" class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem]"
> >
<svg <svg
class="w-6 h-6 sm:w-8 sm:h-8" class="w-6 h-6 sm:w-8 sm:h-8"
@ -1382,7 +1372,7 @@
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none" class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
> >
<svg <svg
class="w-4 h-4 text-gray-200" class="w-4 h-4 text-muted dark:text-gray-200"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@ -1406,7 +1396,7 @@
> >
<button <button
on:click={() => (searchTerm = "")} on:click={() => (searchTerm = "")}
class="cursor-pointer text-gray-200 sm:hover:text-white" class="cursor-pointer text-muted dark:text-gray-200 dark:sm:hover:text-white"
tabindex="0" tabindex="0"
><svg ><svg
class="w-5 h-5" class="w-5 h-5"
@ -1428,7 +1418,7 @@
autocomplete="off" autocomplete="off"
type="search" type="search"
id="search" id="search"
class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-secondary border border-blue-500" class="placeholder-gray-500 dark:placeholder-gray-300 block w-full p-2 ps-10 text-sm text-muted dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-primary border border-blue-500"
placeholder="Search" placeholder="Search"
bind:value={searchTerm} bind:value={searchTerm}
/> />
@ -1438,7 +1428,7 @@
</div> </div>
<!-- Content --> <!-- Content -->
<div class="text-white mt-5"> <div class=" mt-5">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
{#each searchTerm?.length !== 0 ? filteredRows : allRows as row} {#each searchTerm?.length !== 0 ? filteredRows : allRows as row}
<div <div
@ -1447,7 +1437,7 @@
{#if row?.rule === "score" && data?.user?.tier !== "Pro"} {#if row?.rule === "score" && data?.user?.tier !== "Pro"}
<label id={row?.rule} on:click={() => changeRule(row?.rule)}> <label id={row?.rule} on:click={() => changeRule(row?.rule)}>
<svg <svg
class="w-4 h-4 mb-1 inline-block text-[#A3A3A3] sm:hover:text-white cursor-pointer" class="w-4 h-4 mb-1 inline-block text-[#A3A3A3] sm:hover: cursor-pointer"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -1475,7 +1465,7 @@
</div> </div>
{#if searchTerm?.length > 0 && filteredRows?.length === 0} {#if searchTerm?.length > 0 && filteredRows?.length === 0}
<div class="text-white mt-5 font-semibold text-[1rem] sm:text-lg"> <div class=" mt-5 font-semibold text-[1rem] sm:text-lg">
Nothing found Nothing found
</div> </div>
{/if} {/if}
@ -1490,21 +1480,18 @@
<input type="checkbox" id="mobileTooltip" class="modal-toggle" /> <input type="checkbox" id="mobileTooltip" class="modal-toggle" />
<dialog id="mobileTooltip" class="modal p-3"> <dialog id="mobileTooltip" class="modal p-3">
<label for="mobileTooltip" class="cursor-pointer modal-backdrop bg-[#000]/30" <label for="mobileTooltip" class="cursor-pointer modal-backdrop"></label>
></label>
<!-- Desktop modal content --> <!-- Desktop modal content -->
<div <div
class="modal-box rounded-md border border-gray-600 w-full bg-secondary flex flex-col items-center" class="modal-box rounded-md border border-gray-600 w-full bg-gray-100 dark:bg-secondary flex flex-col items-center"
> >
<div class="text-white mb-5 text-center"> <div class=" mb-5 text-center">
<h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3> <h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3>
<span class="text-white text-[1rem] font-normal" <span class=" text-[1rem] font-normal">{infoText?.text ?? "n/a"}</span>
>{infoText?.text ?? "n/a"}</span
>
{#if infoText?.equation !== undefined} {#if infoText?.equation !== undefined}
<div class="w-5/6 m-auto mt-5"></div> <div class="w-5/6 m-auto mt-5"></div>
<div class="text-[1rem] w-full pt-3 pb-3 m-auto text-white"> <div class="text-[1rem] w-full pt-3 pb-3 m-auto">
{infoText?.equation} {infoText?.equation}
</div> </div>
{/if} {/if}
@ -1513,7 +1500,7 @@
<div class="border-t border-gray-600 mt-2 w-full"> <div class="border-t border-gray-600 mt-2 w-full">
<label <label
for="mobileTooltip" for="mobileTooltip"
class="mt-4 font-semibold text-white text-xl m-auto flex justify-center cursor-pointer" class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
> >
Close Close
</label> </label>

53
src/routes/options-flow/+page.svelte
View File

@ -15,6 +15,7 @@
import CalendarIcon from "lucide-svelte/icons/calendar"; import CalendarIcon from "lucide-svelte/icons/calendar";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import { page } from "$app/stores"; import { page } from "$app/stores";
@ -1066,7 +1067,7 @@
{#if ruleOfList?.length !== 0} {#if ruleOfList?.length !== 0}
<label <label
on:click={handleResetAll} on:click={handleResetAll}
class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 font-semibold shadow-xs bg-[#000] sm:hover:text-red-500 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500" class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none py-2 pl-3 pr-4 font-semibold shadow-sm bg-white sm:hover:bg-gray-100 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@ -1109,7 +1110,7 @@
role="tooltip" role="tooltip"
> >
<span <span
class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-300 sm:hover:" class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-500 dark:text-gray-300 dark:sm:hover:text-white"
> >
<svg <svg
class="h-[10.5px] w-[10.5px]" class="h-[10.5px] w-[10.5px]"
@ -1128,14 +1129,14 @@
<div class="flex items-center"> <div class="flex items-center">
<button <button
on:click={() => handleDeleteRule(row?.rule)} on:click={() => handleDeleteRule(row?.rule)}
class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-hidden" class="mr-1.5 cursor-pointer text-gray-500 dark:text-gray-300 sm:hover:text-red-500 focus:outline-hidden"
title="Remove filter" title="Remove filter"
> >
<svg <svg
class="w-6 h-6" class="w-6 h-6"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="CurrentColor" stroke="currentColor"
style="max-width:40px" style="max-width:40px"
> >
<path <path
@ -1152,7 +1153,7 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 rounded-md truncate" class="shadow-sm h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 rounded-md truncate"
> >
<span class="truncate ml-2 text-sm sm:text-[1rem]"> <span class="truncate ml-2 text-sm sm:text-[1rem]">
{#if valueMappings[row?.rule] === "any"} {#if valueMappings[row?.rule] === "any"}
@ -1189,7 +1190,7 @@
> >
{#if !categoricalRules?.includes(row?.rule)} {#if !categoricalRules?.includes(row?.rule)}
<DropdownMenu.Label <DropdownMenu.Label
class="absolute mt-2 h-11 border-gray-800 border-b -top-1 z-20 fixed sticky bg-default" class="absolute mt-2 h-11 border-gray-300 dark:border-gray-800 border-b -top-1 z-20 fixed sticky bg-white dark:bg-default"
> >
<div <div
class="flex items-center justify-start gap-x-1" class="flex items-center justify-start gap-x-1"
@ -1202,7 +1203,7 @@
<DropdownMenu.Trigger asChild let:builder <DropdownMenu.Trigger asChild let:builder
><Button ><Button
builders={[builder]} builders={[builder]}
class="w-fit -mt-1 -ml-2 bg-default flex flex-row justify-between items-center " class="w-fit -mt-1 -ml-2 flex flex-row justify-between items-center "
> >
<span <span
class="truncate ml-2 text-sm sm:text-[1rem]" class="truncate ml-2 text-sm sm:text-[1rem]"
@ -1284,7 +1285,7 @@
: valueMappings[row?.rule]} : valueMappings[row?.rule]}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule)} handleValueInput(e, row?.rule)}
class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-muted dark:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary" class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-muted dark:placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary"
/> />
{/if} {/if}
@ -1351,7 +1352,7 @@
{#if ruleCondition[row?.rule] === "between"} {#if ruleCondition[row?.rule] === "between"}
{#if newValue && row?.step[index + 1]} {#if newValue && row?.step[index + 1]}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-gray-100 dark:bg-primary" class="sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
<button <button
on:click={() => { on:click={() => {
@ -1360,7 +1361,7 @@
row?.step[index + 1], row?.step[index + 1],
]); ]);
}} }}
class="block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-gray-100 dark:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="block w-full bg-white dark:bg-default border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-gray-100 focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule]?.replace( {ruleCondition[row?.rule]?.replace(
"between", "between",
@ -1374,13 +1375,13 @@
{/if} {/if}
{:else} {:else}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-gray-100 dark:bg-primary" class="sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
<button <button
on:click={() => { on:click={() => {
handleChangeValue(newValue); handleChangeValue(newValue);
}} }}
class="block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-gray-100 dark:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="block w-full bg-white dark:bg-default border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-gray-100 focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule] {ruleCondition[row?.rule]
?.replace("under", "Under") ?.replace("under", "Under")
@ -1394,7 +1395,7 @@
{:else if categoricalRules?.includes(row?.rule)} {:else if categoricalRules?.includes(row?.rule)}
{#each row?.step as item} {#each row?.step as item}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-[#2A2E39]" class="sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
<div <div
class="flex items-center" class="flex items-center"
@ -1642,20 +1643,9 @@
<UpgradeToPro {data} display={true} /> <UpgradeToPro {data} display={true} />
</div> </div>
{:else} {:else}
<div <Infobox
class=" text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-300 dark:border-gray-600 text-sm sm:text-[1rem]" text="Looks like your taste is one-of-a-kind! No matches found... yet!"
> />
<svg
class="w-6 h-6 shrink-0 inline-block sm:mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
Looks like your taste is one-of-a-kind! No matches found... yet!
</div>
{/if} {/if}
</div> </div>
{:else} {:else}
@ -1708,7 +1698,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="white" fill="currentColor"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/></svg /></svg
> >
@ -1750,7 +1740,7 @@
> >
<button <button
on:click={() => (searchTerm = "")} on:click={() => (searchTerm = "")}
class="cursor-pointer text-muted dark:text-gray-200 sm:hover:" class="cursor-pointer text-muted dark:text-gray-200 dark:sm:hover:text-white"
tabindex="0" tabindex="0"
><svg ><svg
class="w-5 h-5" class="w-5 h-5"
@ -1834,12 +1824,11 @@
<input type="checkbox" id="mobileTooltip" class="modal-toggle" /> <input type="checkbox" id="mobileTooltip" class="modal-toggle" />
<dialog id="mobileTooltip" class="modal p-3"> <dialog id="mobileTooltip" class="modal p-3">
<label for="mobileTooltip" class="cursor-pointer modal-backdrop bg-[#000]/40" <label for="mobileTooltip" class="cursor-pointer modal-backdrop"></label>
></label>
<!-- Desktop modal content --> <!-- Desktop modal content -->
<div <div
class="modal-box text-muted dark:text-white rounded-md border border-gray-300 dark:border-gray-600 w-full bg-gray-100 dark:bg-primary flex flex-col items-center" class="modal-box border-gray-300 dark:border-none text-muted dark:text-white rounded-md border border-gray-300 dark:border-gray-600 w-full bg-gray-100 dark:bg-primary flex flex-col items-center"
> >
<div class=" mb-5 text-center"> <div class=" mb-5 text-center">
<h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3> <h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3>

58
src/routes/watchlist/options/+page.svelte
View File

@ -150,13 +150,13 @@
{#if isLoaded} {#if isLoaded}
{#if optionsWatchlist?.length !== 0} {#if optionsWatchlist?.length !== 0}
<div class="flex flex-row justify-end items-center pb-2"> <div class="flex flex-row justify-end items-center pb-2">
<h2 class="font-semibold text-white text-xl mr-auto"> <h2 class="font-semibold text-xl mr-auto">
{optionsWatchlist?.length} Options {optionsWatchlist?.length} Options
</h2> </h2>
{#if editMode} {#if editMode}
<label <label
on:click={handleDelete} on:click={handleDelete}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-default sm:hover:bg-default/60 ease-out" class="border text-sm border-gray-300 dark:border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold shadow-xs bg-default sm:hover:bg-default/60 ease-out"
> >
<svg <svg
class="inline-block w-5 h-5" class="inline-block w-5 h-5"
@ -167,7 +167,7 @@
d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z" d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
/></svg /></svg
> >
<span class="ml-1 text-white text-sm"> <span class="ml-1 text-sm">
{numberOfChecked} {numberOfChecked}
</span> </span>
</label> </label>
@ -175,7 +175,7 @@
<label <label
on:click={() => (editMode = !editMode)} on:click={() => (editMode = !editMode)}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-xs bg-default sm:hover:bg-default/60 ease-out" class="border text-sm border-gray-300 dark:border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold shadow-xs bg-default sm:hover:bg-default/60 ease-out"
> >
<svg <svg
class="inline-block w-5 h-5" class="inline-block w-5 h-5"
@ -190,9 +190,9 @@
/></svg /></svg
> >
{#if !editMode} {#if !editMode}
<span class="ml-1 text-white text-sm"> Edit </span> <span class="ml-1 text-sm"> Edit </span>
{:else} {:else}
<span class="ml-1 text-white text-sm"> Cancel </span> <span class="ml-1 text-sm"> Cancel </span>
{/if} {/if}
</label> </label>
</div> </div>
@ -264,9 +264,7 @@
{#each optionsWatchlist as item, index} {#each optionsWatchlist as item, index}
<!-- row --> <!-- row -->
<tr class="odd:bg-odd border-b border-gray-800"> <tr class="odd:bg-odd border-b border-gray-800">
<td <td class=" text-sm text-start whitespace-nowrap">
class="text-white text-sm text-start whitespace-nowrap"
>
{formatTime(item?.time)} {formatTime(item?.time)}
</td> </td>
@ -297,22 +295,18 @@
{/if} {/if}
</div> </div>
</th> </th>
<td <td class=" text-sm sm:text-[1rem] text-start">
class="text-white text-sm sm:text-[1rem] text-start"
>
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] text-start">
class="text-white text-sm sm:text-[1rem] text-start"
>
{reformatDate(item?.date_expiration)} {reformatDate(item?.date_expiration)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{item?.dte < 0 ? "expired" : item?.dte + "d"} {item?.dte < 0 ? "expired" : item?.dte + "d"}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{item?.strike_price} {item?.strike_price}
</td> </td>
@ -336,16 +330,16 @@
{item?.sentiment} {item?.sentiment}
</td> </td>
<td <td
class="text-sm sm:text-[1rem] text-white text-start whitespace-nowrap" class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
> >
{item?.execution_estimate} {item?.execution_estimate}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{item?.underlying_price} {item?.underlying_price}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{item?.price} {item?.price}
</td> </td>
@ -367,18 +361,14 @@
{item?.option_activity_type} {item?.option_activity_type}
</td> </td>
<td <td class=" text-end text-sm sm:text-[1rem] text-end">
class="text-white text-end text-sm sm:text-[1rem] text-end"
>
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
}).format(item?.volume)} }).format(item?.volume)}
</td> </td>
<td <td class=" text-end text-sm sm:text-[1rem] text-end">
class="text-white text-end text-sm sm:text-[1rem] text-end"
>
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -393,15 +383,13 @@
<div <div
class="flex flex-col justify-center items-center m-auto pt-8" class="flex flex-col justify-center items-center m-auto pt-8"
> >
<span <span class=" text-[1rem] sm:text-lg m-auto p-4 text-center">
class="text-white text-[1rem] sm:text-lg m-auto p-4 text-center"
>
Add your unusual options contracts and start tracking them Add your unusual options contracts and start tracking them
now! now!
</span> </span>
<a <a
href="/options-flow" href="/options-flow"
class="py-3 sm:hover:bg-primary rounded-md w-64 flex mt-5 justify-center items-center m-auto text-white border border-gray-600 group" class="py-3 sm:hover:bg-primary rounded-md w-64 flex mt-5 justify-center items-center m-auto border border-gray-300 dark:border-gray-600 group"
> >
<span class="font-semibold text-[1rem]" <span class="font-semibold text-[1rem]"
>Follow the Whales >Follow the Whales
@ -412,15 +400,11 @@
<div <div
class="flex flex-col justify-center items-center m-auto pt-8" class="flex flex-col justify-center items-center m-auto pt-8"
> >
<span <span class=" font-bold text-2xl sm:text-3xl">
class="text-white font-bold text-white text-2xl sm:text-3xl"
>
Empty Options List Empty Options List
</span> </span>
<span <span class=" text-sm sm:text-lg m-auto p-4 text-center">
class="text-white text-sm sm:text-lg m-auto p-4 text-center"
>
Add your unusual options contracts and start tracking them Add your unusual options contracts and start tracking them
now! now!
</span> </span>
@ -453,7 +437,7 @@
{:else} {:else}
<a <a
href="/options-flow" href="/options-flow"
class="w-64 flex mt-5 justify-center items-center m-auto btn text-white border border-gray-600 group" class="w-64 flex mt-5 justify-center items-center m-auto btn bg-blue-700 sm:hover:bg-blue-600 border border-gray-300 dark:border-gray-600 group"
> >
<span class="font-semibold text-[1rem]" <span class="font-semibold text-[1rem]"
>Follow the Whales >Follow the Whales