ui fix
This commit is contained in:
MuslemRahimi
parent
24e248b676
commit
e092ac02d7
@ -596,7 +596,7 @@
|
|||||||
class:opacity-30={index + 1 === rawData?.length &&
|
class:opacity-30={index + 1 === rawData?.length &&
|
||||||
data?.user?.tier !== "Pro"}
|
data?.user?.tier !== "Pro"}
|
||||||
>
|
>
|
||||||
<div class="p-2 text-center text-sm whitespace-nowrap">
|
<div class="p-2 text-center text-xs sm:text-sm whitespace-nowrap">
|
||||||
{formatTime(displayedData[index]?.time)}
|
{formatTime(displayedData[index]?.time)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -618,7 +618,7 @@
|
|||||||
)
|
)
|
||||||
? 'text-[#FFA500]'
|
? 'text-[#FFA500]'
|
||||||
: $mode === 'light'
|
: $mode === 'light'
|
||||||
? 'text-[#4B5563]'
|
? 'text-gray-400'
|
||||||
: 'text-[#fff]'}"
|
: 'text-[#fff]'}"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
|
|||||||
@ -863,7 +863,7 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
{#each stockList as item, index}
|
{#each stockList as item, index}
|
||||||
<tr
|
<tr
|
||||||
class="sdark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
|
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
|
||||||
1 ===
|
1 ===
|
||||||
rawData?.length &&
|
rawData?.length &&
|
||||||
!['Pro', 'Plus']?.includes(data?.user?.tier) &&
|
!['Pro', 'Plus']?.includes(data?.user?.tier) &&
|
||||||
|
|||||||
@ -156,14 +156,14 @@
|
|||||||
{#if editMode}
|
{#if editMode}
|
||||||
<label
|
<label
|
||||||
on:click={handleDelete}
|
on:click={handleDelete}
|
||||||
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"
|
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-200 dark:sm:hover:bg-default/60 ease-out sm:hover:text-red-500"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="inline-block w-5 h-5"
|
class="inline-block w-5 h-5"
|
||||||
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="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
|
||||||
>
|
>
|
||||||
@ -175,17 +175,17 @@
|
|||||||
|
|
||||||
<label
|
<label
|
||||||
on:click={() => (editMode = !editMode)}
|
on:click={() => (editMode = !editMode)}
|
||||||
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"
|
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-gray-800 dark:sm:hover:text-gray-200"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="inline-block w-5 h-5"
|
class="inline-block w-5 h-5"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 1024 1024"
|
viewBox="0 0 1024 1024"
|
||||||
><path
|
><path
|
||||||
fill="white"
|
fill="currentColor"
|
||||||
d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
|
d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
|
||||||
/><path
|
/><path
|
||||||
fill="white"
|
fill="currentColor"
|
||||||
d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
|
d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
@ -202,77 +202,47 @@
|
|||||||
class="w-full rounded-md overflow-hidden overflow-x-auto no-scrollbar"
|
class="w-full rounded-md overflow-hidden overflow-x-auto no-scrollbar"
|
||||||
>
|
>
|
||||||
<table
|
<table
|
||||||
class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full bg-table m-auto mt-4 overflow-x-auto"
|
class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-4 overflow-x-auto"
|
||||||
>
|
>
|
||||||
<thead class="bg-default">
|
<thead class="bg-default">
|
||||||
<tr class="">
|
<tr
|
||||||
<td
|
class="bg-white dark:bg-default border-b border-[#27272A] text-muted dark:text-white"
|
||||||
class="text-slate-200 font-semibold text-sm text-start"
|
>
|
||||||
>Time</td
|
<td class=" font-semibold text-sm text-center">Time</td>
|
||||||
>
|
|
||||||
<th
|
<th
|
||||||
class="text-slate-200 bg-default font-semibold text-sm text-start"
|
class="bg-white dark:bg-default font-semibold text-sm text-center"
|
||||||
>Symbol</th
|
>Symbol</th
|
||||||
>
|
>
|
||||||
<td
|
<td class=" font-semibold text-sm text-center">Date</td>
|
||||||
class="text-slate-200 font-semibold text-sm text-start"
|
<td class=" font-semibold text-sm text-center">Expiry</td>
|
||||||
>Date</td
|
<td class=" font-semibold text-sm text-center">DTE</td>
|
||||||
>
|
<td class=" font-semibold text-sm text-center">Strike</td>
|
||||||
<td
|
<td class=" font-semibold text-sm text-center">C/P</td>
|
||||||
class="text-slate-200 font-semibold text-sm text-start"
|
<td class=" font-semibold text-sm text-center">Sent.</td>
|
||||||
>Expiry</td
|
<td class=" font-semibold text-sm text-center">Exec.</td>
|
||||||
>
|
<td class=" font-semibold text-sm text-center">Spot</td>
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
<td class=" font-semibold text-sm text-center">Price</td>
|
||||||
>DTE</td
|
<td class=" font-semibold text-sm text-center">Prem.</td>
|
||||||
>
|
<td class=" font-semibold text-sm text-center">Type</td>
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
<td class=" font-semibold text-sm text-center">Vol.</td>
|
||||||
>Strike</td
|
<td class=" font-semibold text-sm text-center">OI</td>
|
||||||
>
|
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
|
||||||
>C/P</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-slate-200 font-semibold text-sm text-start"
|
|
||||||
>Sent.</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-slate-200 font-semibold text-sm text-start"
|
|
||||||
>Exec.</td
|
|
||||||
>
|
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
|
||||||
>Spot</td
|
|
||||||
>
|
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
|
||||||
>Price</td
|
|
||||||
>
|
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
|
||||||
>Prem.</td
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="text-slate-200 font-semibold text-sm text-start"
|
|
||||||
>Type</td
|
|
||||||
>
|
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
|
||||||
>Vol.</td
|
|
||||||
>
|
|
||||||
<td class="text-slate-200 font-semibold text-sm text-end"
|
|
||||||
>OI</td
|
|
||||||
>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#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-[#F6F7F8] dark:odd:bg-odd">
|
||||||
<td class=" text-sm text-start whitespace-nowrap">
|
<td
|
||||||
|
class="text-xs sm:text-sm text-start whitespace-nowrap"
|
||||||
|
>
|
||||||
{formatTime(item?.time)}
|
{formatTime(item?.time)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<th
|
<th
|
||||||
on:click={() => handleFilter(item?.id)}
|
on:click={() => handleFilter(item?.id)}
|
||||||
class="{index % 2
|
class="{index % 2
|
||||||
? 'bg-table'
|
? 'bg-white dark:bg-default'
|
||||||
: 'bg-odd'} font-normal text-sm sm:text-[1rem] text-start"
|
: 'bg-[#F6F7F8] dark:bg-odd'} font-normal text-sm sm:text-[1rem] text-center"
|
||||||
>
|
>
|
||||||
<div class=" flex flex-row items-center">
|
<div class=" flex flex-row items-center">
|
||||||
<input
|
<input
|
||||||
@ -289,16 +259,17 @@
|
|||||||
assetType={item?.underlying_type}
|
assetType={item?.underlying_type}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="text-blue-400 cursor-pointer"
|
<span
|
||||||
|
class="text-blue-800 dark:text-blue-400 cursor-pointer"
|
||||||
>{item?.ticker}</span
|
>{item?.ticker}</span
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<td class=" text-sm sm:text-[1rem] text-start">
|
<td class=" text-sm sm:text-[1rem] text-center">
|
||||||
{formatDate(item?.date)}
|
{formatDate(item?.date)}
|
||||||
</td>
|
</td>
|
||||||
<td class=" text-sm sm:text-[1rem] text-start">
|
<td class=" text-sm sm:text-[1rem] text-center">
|
||||||
{reformatDate(item?.date_expiration)}
|
{reformatDate(item?.date_expiration)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
@ -313,8 +284,8 @@
|
|||||||
<td
|
<td
|
||||||
class="text-sm sm:text-[1rem] {item?.put_call ===
|
class="text-sm sm:text-[1rem] {item?.put_call ===
|
||||||
'Calls'
|
'Calls'
|
||||||
? 'text-green-800 dark:text-[#00FC50]'
|
? 'dark:text-[#00FC50]'
|
||||||
: 'text-red-800 dark:text-[#FF2F1F]'} text-start"
|
: 'dark:text-[#FF2F1F]'} text-center"
|
||||||
>
|
>
|
||||||
{item?.put_call}
|
{item?.put_call}
|
||||||
</td>
|
</td>
|
||||||
@ -322,15 +293,15 @@
|
|||||||
<td
|
<td
|
||||||
class="text-sm sm:text-[1rem] {item?.sentiment ===
|
class="text-sm sm:text-[1rem] {item?.sentiment ===
|
||||||
'Bullish'
|
'Bullish'
|
||||||
? 'text-green-800 dark:text-[#00FC50]'
|
? 'dark:text-[#00FC50]'
|
||||||
: item?.sentiment === 'Bearish'
|
: item?.sentiment === 'Bearish'
|
||||||
? 'text-red-800 dark:text-[#FF2F1F]'
|
? 'dark:text-[#FF2F1F]'
|
||||||
: 'text-[#C6A755]'} text-start"
|
: 'text-[#C6A755]'} text-center"
|
||||||
>
|
>
|
||||||
{item?.sentiment}
|
{item?.sentiment}
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
|
class="text-sm sm:text-[1rem] text-center whitespace-nowrap"
|
||||||
>
|
>
|
||||||
{item?.execution_estimate}
|
{item?.execution_estimate}
|
||||||
</td>
|
</td>
|
||||||
@ -346,17 +317,17 @@
|
|||||||
<td
|
<td
|
||||||
class="text-sm sm:text-[1rem] text-end {item?.put_call ===
|
class="text-sm sm:text-[1rem] text-end {item?.put_call ===
|
||||||
'Puts'
|
'Puts'
|
||||||
? 'text-[#CB281C]'
|
? 'dark:text-[#CB281C]'
|
||||||
: 'text-[#0FB307]'} "
|
: 'dark:text-[#0FB307]'} "
|
||||||
>
|
>
|
||||||
{abbreviateNumber(item?.cost_basis)}
|
{abbreviateNumber(item?.cost_basis)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-sm sm:text-[1rem] text-start {item?.option_activity_type ===
|
class="text-sm sm:text-[1rem] text-center {item?.option_activity_type ===
|
||||||
'Sweep'
|
'Sweep'
|
||||||
? 'text-[#C6A755]'
|
? 'dark:text-[#C6A755]'
|
||||||
: 'text-[#976DB7]'}"
|
: 'dark:text-[#976DB7]'}"
|
||||||
>
|
>
|
||||||
{item?.option_activity_type}
|
{item?.option_activity_type}
|
||||||
</td>
|
</td>
|
||||||
@ -384,14 +355,13 @@
|
|||||||
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 class=" text-[1rem] sm:text-lg m-auto p-4 text-center">
|
<span class=" text-[1rem] sm:text-lg m-auto p-4 text-center">
|
||||||
Add your unusual options contracts and start tracking them
|
Track your unusual options contracts 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 border border-gray-300 dark:border-gray-600 group"
|
class="py-3 bg-blue-600 sm:hover:bg-blue-700 rounded-md w-64 flex 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] text-white"
|
||||||
>Follow the Whales
|
>Follow the Whales
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user