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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-30 13:41:38 +02:00
parent ee8f4c951c
commit 94dd5b9516
38 changed files with 269 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -381,7 +381,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
@ -525,7 +525,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

4
src/lib/components/DarkPool/HistoricalVolume.svelte
View File

@ -105,7 +105,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -121,7 +121,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
enabled: false, enabled: false,
}, },

4
src/lib/components/DarkPool/PriceLevel.svelte
View File

@ -53,7 +53,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 10, // Increases space between label and axis distance: 10, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -67,7 +67,7 @@
}, },
opposite: true, opposite: true,
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
tickPositioner: function () { tickPositioner: function () {
const positions = []; const positions = [];
const info = this.getExtremes(); const info = this.getExtremes();

2
src/lib/components/DarkPool/RealtimeTrade.svelte
View File

@ -110,7 +110,7 @@
title: { text: null }, title: { text: null },
labels: { style: { color: $mode === "light" ? "black" : "white" } }, labels: { style: { color: $mode === "light" ? "black" : "white" } },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
opposite: true, opposite: true,
}, },
{ {

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

@ -162,7 +162,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
enabled: false, enabled: false,
}, },
@ -173,7 +173,7 @@
}, },
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
enabled: false, enabled: false,
}, },

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

@ -60,7 +60,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
rotation: -45, rotation: -45,
distance: 10, // Increases space between label and axis distance: 10, // Increases space between label and axis
@ -68,7 +68,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {

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

@ -125,7 +125,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

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

@ -61,8 +61,8 @@
</div> </div>
{#if errors} {#if errors}
<label for={id} class="label py-0 pt-1 text-xs"> <label for={id} class=" py-0 pt-1 text-xs">
<span class="text-error"> <span class="text-red-700 font-semibold dark:font-normal dark:text-error">
{errors} {errors}
</span> </span>
</label> </label>

2
src/lib/components/Options/ContractLookup.svelte
View File

@ -274,7 +274,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { style: { color: $mode === "light" ? "black" : "white" } }, labels: { style: { color: $mode === "light" ? "black" : "white" } },
title: { text: null }, title: { text: null },
opposite: true, opposite: true,

4
src/lib/components/Options/GreekByExpiry.svelte
View File

@ -151,7 +151,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -166,7 +166,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {

4
src/lib/components/Options/GreekByStrike.svelte
View File

@ -125,7 +125,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
// Only display every 5th label // Only display every 5th label
formatter: function () { formatter: function () {
@ -135,7 +135,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {

4
src/lib/components/Options/GreekExposure.svelte
View File

@ -161,7 +161,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -191,7 +191,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {

4
src/lib/components/Options/OpenInterestByExpiry.svelte
View File

@ -66,7 +66,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 10, // Adjust space between labels and axis distance: 10, // Adjust space between labels and axis
formatter: function () { formatter: function () {
@ -94,7 +94,7 @@
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

4
src/lib/components/Options/OpenInterestByStrike.svelte
View File

@ -65,7 +65,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
rotation: -45, rotation: -45,
// Only display every 5th label // Only display every 5th label
@ -76,7 +76,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

2
src/lib/components/Options/TickerFlow.svelte
View File

@ -197,7 +197,7 @@
}, },
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

6
src/lib/components/Options/UnusualActivity.svelte
View File

@ -188,7 +188,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
formatter: function () { formatter: function () {
const date = new Date(this.value); const date = new Date(this.value);
@ -213,7 +213,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
@ -498,7 +498,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { style: { color: $mode === "light" ? "black" : "white" } }, labels: { style: { color: $mode === "light" ? "black" : "white" } },
title: { text: null }, title: { text: null },
opposite: true, opposite: true,

4
src/lib/components/Options/Volatility.svelte
View File

@ -116,7 +116,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -143,7 +143,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

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

@ -181,7 +181,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -207,7 +207,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

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

@ -63,7 +63,7 @@
}, },
opposite: true, opposite: true,
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
formatter: function () { formatter: function () {
return this?.value + "%"; return this?.value + "%";

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

@ -92,7 +92,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {

2
src/lib/components/Table/TableHeader.svelte
View File

@ -22,7 +22,7 @@
{#each columns as column} {#each columns as column}
<th <th
on:click={() => sortData(column.key)} on:click={() => sortData(column.key)}
class="cursor-pointer select-none font-semibold text-sm whitespace-nowrap {column.align === class="cursor-pointer select-none font-semibold text-sm sm:text-[1rem] whitespace-nowrap {column.align ===
'right' 'right'
? 'text-end' ? 'text-end'
: 'text-start'}" : 'text-start'}"

2
src/routes/etf/[tickerID]/+page.svelte
View File

@ -256,7 +256,7 @@
startOnTick: false, startOnTick: false,
endOnTick: false, endOnTick: false,
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
title: { text: null }, title: { text: null },
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },

2
src/routes/index/[tickerID]/+page.svelte
View File

@ -254,7 +254,7 @@
startOnTick: false, startOnTick: false,
endOnTick: false, endOnTick: false,
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
title: { text: null }, title: { text: null },
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },

2
src/routes/ipos/statistics/+page.svelte
View File

@ -96,7 +96,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

2
src/routes/market-flow/+page.svelte
View File

@ -361,7 +361,7 @@
}, },
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

4
src/routes/market-flow/sector-flow/+page.svelte
View File

@ -351,7 +351,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -388,7 +388,7 @@
}, },
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

2
src/routes/potus-tracker/+page.svelte
View File

@ -145,7 +145,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {

11
src/routes/pricing/+page.svelte
View File

@ -106,18 +106,15 @@
><path ><path
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
></path></svg ></path></svg
><span class="font-medium text-muted dark:text-zinc-300" ><span class="font-medium text-muted dark:text-zinc-300 text-lg"
>Trusted by <span>4,000</span>+ Traders</span >Trusted by <span class="font-semibold">5,000</span>+ Traders</span
> >
</div> </div>
<span <span
class="hidden sm:inline-block text-zinc-600" class="hidden sm:inline-block text-zinc-600"
style="opacity: 1; transform: none;">|</span style="opacity: 1; transform: none;">|</span
> >
<div <div class="mt-2 sm:mt-0 flex items-center text-lg">
class="mt-2 sm:mt-0 flex items-center"
style="opacity: 1; transform: none;"
>
<svg <svg
stroke="currentColor" stroke="currentColor"
fill="currentColor" fill="currentColor"
@ -137,7 +134,7 @@
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
href="https://www.trustpilot.com/review/stocknear.com" href="https://www.trustpilot.com/review/stocknear.com"
class="sm:hover: sm:hover:underline sm:hover:underline-offset-4" class="sm:hover:text-blue-700 dark:sm:hover:text-blue-400 underline underline-offset-4"
> >
Trustpilot</a Trustpilot</a
></span ></span

26
src/routes/profile/+page.svelte
View File

@ -200,7 +200,9 @@
<h1 class="mb-1 text-2xl sm:text-3xl font-bold">My Account</h1> <h1 class="mb-1 text-2xl sm:text-3xl font-bold">My Account</h1>
</div> </div>
<div class="rounded border border-gray-600 p-4 xs:p-4 xs:text-lg"> <div
class="rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
>
<h2 class=" text-2xl font-semibold mb-3">User Information</h2> <h2 class=" text-2xl font-semibold mb-3">User Information</h2>
<div class="mt-1"> <div class="mt-1">
<strong>Email:</strong> <strong>Email:</strong>
@ -222,7 +224,7 @@
</div> </div>
<div <div
class="mt-6 rounded border border-gray-600 p-4 xs:p-4 xs:text-lg" class="mt-6 rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
> >
<h2 class=" text-2xl font-semibold mb-3">Notification</h2> <h2 class=" text-2xl font-semibold mb-3">Notification</h2>
Customize your notification alerts based on your preferences. Customize your notification alerts based on your preferences.
@ -325,7 +327,7 @@
<p class="mb-3">Push notifications are currently active.</p> <p class="mb-3">Push notifications are currently active.</p>
<div class="mt-3"> <div class="mt-3">
<button <button
class="border border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100" class="shadow-sm border border-gray-300 dark:border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
type="button" type="button"
on:click={handlePushUnsubscribe} on:click={handlePushUnsubscribe}
>Disable notifications</button >Disable notifications</button
@ -339,14 +341,14 @@
</p> </p>
{#if !loading} {#if !loading}
<button <button
class="border border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100" class="shadow-sm border border-gray-300 dark:border-gray-600 w-fit px-5 py-1.5 bg-white text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
type="button" type="button"
on:click={handlePushSubscribe} on:click={handlePushSubscribe}
>Enable notifications</button >Enable notifications</button
> >
{:else} {:else}
<button <button
class="cursor-not-allowed border border-gray-600 w-fit px-5 py-1.5 bg-white/60 text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100" class="cursor-not-allowed shadow-sm border border-gray-300 dark:border-gray-600 w-fit px-5 py-1.5 bg-white/60 text-black text-sm font-semibold rounded sm:hover:bg-white/80 transition ease-out duration-100"
><div class="flex flex-row m-auto items-center"> ><div class="flex flex-row m-auto items-center">
<span class="loading loading-infinity"></span> <span class="loading loading-infinity"></span>
<span class=" ml-1.5">Activating...</span> <span class=" ml-1.5">Activating...</span>
@ -369,7 +371,7 @@
</p> </p>
<label <label
for="installModal" for="installModal"
class="cursor-pointer border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5" class="cursor-pointer border border-gray-300 shadow-sshadow-sm m dark:border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5"
> >
Install the App Install the App
</label> </label>
@ -378,7 +380,7 @@
</div> </div>
<div <div
class="mt-6 rounded border border-gray-600 p-4 xs:p-4 xs:text-lg" class="mt-6 rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
> >
<h2 class=" text-2xl font-semibold mb-3">Manage Subscription</h2> <h2 class=" text-2xl font-semibold mb-3">Manage Subscription</h2>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
@ -458,7 +460,7 @@
> >
<label <label
for="cancelSubscriptionModal" for="cancelSubscriptionModal"
class="cursor-pointer border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5" class="cursor-pointer border border-gray-300 shadow-sshadow-sm m dark:border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-default sm:hover:bg-gray-200 dark:sm:hover:bg-primary text-sm sm:text-[1rem] px-4 py-2 rounded mt-5"
> >
Cancel Subscription Cancel Subscription
</label> </label>
@ -485,7 +487,7 @@
</div> </div>
<div <div
class="mt-6 rounded border border-gray-600 p-4 xs:p-4 xs:text-lg" class="mt-6 rounded shadow-sm border border-gray-300 dark:border-gray-600 p-4 xs:p-4 xs:text-lg"
> >
<h2 class=" text-2xl font-semibold mb-3">Need help?</h2> <h2 class=" text-2xl font-semibold mb-3">Need help?</h2>
<div class="mt-1"> <div class="mt-1">
@ -543,7 +545,7 @@
method="POST" method="POST"
action="?/cancelSubscription" action="?/cancelSubscription"
use:enhance={submitCancellation} use:enhance={submitCancellation}
class="modal-box w-full bg-secondary border border-gray-600 flex flex-col items-center" class="modal-box w-full bg-secondary shadow-sm border border-gray-300 dark:border-gray-600 flex flex-col items-center"
> >
<div class="mx-auto mb-8 h-1.5 w-20 shrink-0 rounded-full bg-gray-500" /> <div class="mx-auto mb-8 h-1.5 w-20 shrink-0 rounded-full bg-gray-500" />
<div class="text-white mb-5 text-center"> <div class="text-white mb-5 text-center">
@ -674,7 +676,7 @@
<label for="installModal" class="cursor-pointer modal-backdrop"></label> <label for="installModal" class="cursor-pointer modal-backdrop"></label>
<div <div
class="modal-box text-white rounded w-full bg-secondary border border-gray-600" class="modal-box text-white rounded w-full bg-secondary shadow-sm border border-gray-300 dark:border-gray-600"
> >
<div class="flex flex-row items-center pt-5"> <div class="flex flex-row items-center pt-5">
<h4 class=" text-2xl font-bold text-center m-auto">Steps to install</h4> <h4 class=" text-2xl font-bold text-center m-auto">Steps to install</h4>
@ -706,7 +708,7 @@
</ul> </ul>
</div> </div>
<div class="border-t border-gray-600 mt-2"> <div class="boshadow-sm rder-t border-gray-300 dark:border-gray-600 mt-2">
<label <label
for="installModal" for="installModal"
class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer" class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"

4
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -93,8 +93,8 @@
? "#047857" ? "#047857"
: "#00FC50"; : "#00FC50";
const fillColorStart = isNegative const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.55)" ? "rgba(204, 38, 26, 0.5)"
: "rgb(4, 120, 87, 0.55)"; //"rgba(0, 252, 80, 0.3)"; : "rgb(4, 120, 87, 0.5)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)" ? "rgba(204, 38, 26, 0.004)"
: "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)"; : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";

215
src/routes/stocks/[tickerID]/forecast/+page.svelte
View File

@ -223,7 +223,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: "white" },
}, },
@ -371,7 +371,7 @@
textColor = "#D9220E"; textColor = "#D9220E";
} else if (rating < 3) { } else if (rating < 3) {
ratingText = "Hold"; ratingText = "Hold";
textColor = "#f5b700"; textColor = "#C19000";
} else if (rating < 4) { } else if (rating < 4) {
ratingText = "Buy"; ratingText = "Buy";
textColor = "#31B800"; textColor = "#31B800";
@ -518,12 +518,12 @@
}, },
xAxis: { xAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
type: "datetime", type: "datetime",
endOnTick: false, endOnTick: false,
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
formatter: function () { formatter: function () {
const date = new Date(this.value); const date = new Date(this.value);
@ -540,14 +540,14 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
formatter: function () { formatter: function () {
return `$${this.value.toFixed(0)}`; return `$${this.value.toFixed(0)}`;
}, },
}, },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
}, },
series: [ series: [
@ -561,7 +561,7 @@
symbol: "circle", symbol: "circle",
radius: 4, radius: 4,
}, },
lineWidth: 2, lineWidth: 3,
}, },
{ {
animation: false, animation: false,
@ -733,66 +733,84 @@
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<div class="sm:pl-4 sm:pt-4 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-4 w-full m-auto">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between" class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
> >
<h1 class="mb-px text-xl sm:text-2xl font-bold bp:text-3xl sm:pl-1"> <h1 class="mb-px text-xl sm:text-2xl font-bold bp:text-3xl sm:pl-1">
{removeCompanyStrings($displayCompanyName)} Forecast {removeCompanyStrings($displayCompanyName)} Stock Forecast
</h1> </h1>
<div class="flex flex-col w-full sm:w-fit items-end justify-end">
<div class="inline-flex justify-center w-full rounded-md sm:w-auto"> <label
<div for="topAnalystModal"
class="bg-gray-300 dark:bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4" class="ml-auto mb-1 hidden sm:inline-block"
><svg
class="size-[18px] text-gray-400 dark:text-dark-400 dark:hover:text-dark-300 sm:hover:text-gray-700 cursor-pointer"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
></path></svg
></label
> >
{#each tabs as item, i} <div class="inline-flex justify-center w-full rounded-md sm:w-auto">
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} <div
<button class="bg-gray-300 dark:bg-secondary w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
on:click={() => goto("/pricing")} >
class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1" {#each tabs as item, i}
> {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
<span class="relative text-sm block font-semibold"> <button
{item.title} on:click={() => goto("/pricing")}
<svg class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="currentColor"
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
>
</span>
</button>
{:else}
<button
on:click={() => changeTab(i)}
class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
{/if}
<span
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
i
? 'text-black'
: ''}"
> >
{item.title} <span class="relative text-sm block font-semibold">
</span> {item.title}
</button> <svg
{/if} class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
{/each} xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="currentColor"
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
>
</span>
</button>
{:else}
<button
on:click={() => changeTab(i)}
class="cursor-pointer group relative z-1 rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div
class="absolute inset-0 rounded-md bg-[#fff]"
></div>
{/if}
<span
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
i
? 'text-black'
: ''}"
>
{item.title}
</span>
</button>
{/if}
{/each}
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full mb-6 mt-3"> <div class="w-full mb-6 mt-3">
<div <div
class="rounded-sm border border-gray-300 dark:border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-300 dark:divide-gray-600" class="rounded shadow-sm border border-gray-300 dark:border-gray-600 p-0.5 xs:p-1 md:flex md:flex-col md:space-y-4 md:divide-y md:p-4 lg:flex-row lg:space-x-4 lg:space-y-0 lg:divide-x lg:divide-y-0 divide-gray-300 dark:divide-gray-600"
> >
<div <div
class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0" class="p-3 md:flex md:space-x-4 md:p-0 lg:block lg:max-w-[32%] lg:space-x-0"
@ -814,9 +832,9 @@
</div> </div>
<div class="max-h-[225px]" use:highcharts={optionsPieChart}></div> <div class="max-h-[225px]" use:highcharts={optionsPieChart}></div>
</div> </div>
<div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0"> <div class="grow md:pt-4 lg:pl-4 lg:pt-0">
<div <div
class="chart mt-5 sm:mt-0 border-l border-r sm:border border-gray-800 rounded" class="sm:shadow-sm sm:border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
<div <div
@ -846,23 +864,25 @@
><td class="py-[3px] text-left lg:py-0.5">Change</td> ><td class="py-[3px] text-left lg:py-0.5">Change</td>
<td <td
class={lowChange > 0 class={lowChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{lowChange}%</td : "text-red-700 dark:text-[#FF2F1F]"}>{lowChange}%</td
> >
<td <td
class={avgChange > 0 class={avgChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{avgChange}%</td : "text-red-700 dark:text-[#FF2F1F]"}>{avgChange}%</td
> >
<td <td
class={medianChange > 0 class={medianChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{medianChange}%</td : "text-red-700 dark:text-[#FF2F1F]"}
>{medianChange}%</td
> >
<td <td
class={highChange > 0 class={highChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{highChange}%</td : "text-red-700 dark:text-[#FF2F1F]"}
>{highChange}%</td
></tr ></tr
></tbody ></tbody
> >
@ -872,7 +892,7 @@
</div> </div>
<div <div
class="w-full rounded-sm border border-gray-300 dark:border-gray-600 mt-8 p-3 divide-gray-300 dark:divide-gray-600 lg:flex lg:space-x-4 lg:divide-x" class="w-full shadow-sm rounded-sm border border-gray-300 dark:border-gray-600 mt-8 p-3 divide-gray-300 dark:divide-gray-600 lg:flex lg:space-x-4 lg:divide-x"
> >
<div class="flex flex-col justify-between p-1 lg:max-w-[32%]"> <div class="flex flex-col justify-between p-1 lg:max-w-[32%]">
<div> <div>
@ -939,7 +959,7 @@
<div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0"> <div class="grow pt-2 md:pt-4 lg:pl-4 lg:pt-0">
{#if optionsBarChart !== null} {#if optionsBarChart !== null}
<div <div
class="border border-gray-800 rounded" class="shadow-sm border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={optionsBarChart} use:highcharts={optionsBarChart}
></div> ></div>
{/if} {/if}
@ -1008,7 +1028,7 @@
</h2> </h2>
{#if data?.getAnalystEstimate?.length !== 0} {#if data?.getAnalystEstimate?.length !== 0}
<div <div
class="mb-4 grid grid-cols-1 overflow-hidden rounded-md border divide-gray-300 dark:divide-gray-600 border-gray-300 dark:border-gray-600 md:grid-cols-2 lg:grid-cols-4" class="mb-4 shadow-sm grid grid-cols-1 overflow-hidden rounded-md border divide-gray-300 dark:divide-gray-600 border-gray-300 dark:border-gray-600 md:grid-cols-2 lg:grid-cols-4"
> >
<div <div
class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0 border-gray-300 dark:border-gray-600" class="border-b px-3 py-5 last:border-b-0 xs:px-4 sm:p-6 md:border-b lg:border-b-0 border-gray-300 dark:border-gray-600"
@ -1267,19 +1287,52 @@
</div> </div>
</section> </section>
<style> <!--Start Create Watchlist Modal-->
.app { <input type="checkbox" id="topAnalystModal" class="modal-toggle" />
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
@media (max-width: 640px) { <dialog id="topAnalystModal" class="modal overflow-hidden p-3 sm:p-0">
.app { <label for="topAnalystModal" class="cursor-pointer modal-backdrop"></label>
height: 300px;
}
}
.chart { <div
width: 100%; class="modal-box text-white rounded w-full bg-secondary shadow-sm border border-gray-300 dark:border-gray-600"
} >
</style> <div class="flex flex-row items-center pt-5">
<h4 class=" text-2xl font-bold text-center m-auto">Steps to install</h4>
<label
for="topAnalystModal"
class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem]"
>
<svg
class="w-6 h-6 sm:w-8 sm:h-8"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
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
>
</label>
</div>
<div class=" flex flex-col justify-center items-center text-xl h-full">
<ul class="list-decimal list-inside text-left mt-5">
<li class="mb-2">Tap on the Safari share button.</li>
<li class="mb-2">Tap on "Add to Home Screen."</li>
<li class="mb-4">Tap on "Add."</li>
<p class="text-lg mb-4">
Note that web apps on iOS can only be installed using Safari.
</p>
</ul>
</div>
<div class="boshadow-sm rder-t border-gray-300 dark:border-gray-600 mt-2">
<label
for="topAnalystModal"
class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
>
Close
</label>
</div>
</div>
</dialog>

63
src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
View File

@ -80,15 +80,15 @@
let markerColor, markerSymbol; let markerColor, markerSymbol;
if (item.score > 6) { if (item.score > 6) {
// Bullish: green marker with an upward triangle // Bullish: green marker with an upward triangle
markerColor = "#2ecc71"; markerColor = "#007050";
markerSymbol = "triangle-up"; markerSymbol = "circle";
} else if (item.score < 5) { } else if (item.score < 5) {
// Bearish: red marker with a downward triangle // Bearish: red marker with a downward triangle
markerColor = "#e74c3c"; markerColor = "#007050";
markerSymbol = "triangle-down"; markerSymbol = "circle";
} else { } else {
// Neutral (score exactly 5): yellow marker with a circle // Neutral (score exactly 5): yellow marker with a circle
markerColor = "#2C6288"; markerColor = "#007050";
markerSymbol = "circle"; markerSymbol = "circle";
} }
@ -206,11 +206,11 @@
}, },
xAxis: { xAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
type: "datetime", type: "datetime",
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
formatter: function () { formatter: function () {
const date = new Date(this.value); const date = new Date(this.value);
@ -230,14 +230,14 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
formatter: function () { formatter: function () {
return `$${this.value.toFixed(0)}`; return `$${this.value.toFixed(0)}`;
}, },
}, },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
}, },
series: [ series: [
{ {
@ -248,7 +248,7 @@
marker: { marker: {
enabled: true, enabled: true,
}, },
lineWidth: 2, lineWidth: 3,
}, },
{ {
name: "Projected Price", name: "Projected Price",
@ -258,7 +258,7 @@
marker: { marker: {
enabled: false, enabled: false,
}, },
lineWidth: 2, lineWidth: 2.5,
dashStyle: "Dash", // Dashed line for the last part dashStyle: "Dash", // Dashed line for the last part
}, },
], ],
@ -377,12 +377,12 @@
}, },
xAxis: { xAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
type: "datetime", type: "datetime",
endOnTick: false, endOnTick: false,
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
formatter: function () { formatter: function () {
const date = new Date(this.value); const date = new Date(this.value);
@ -399,14 +399,14 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
formatter: function () { formatter: function () {
return `$${this.value.toFixed(0)}`; return `$${this.value.toFixed(0)}`;
}, },
}, },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
}, },
series: [ series: [
@ -420,7 +420,7 @@
symbol: "circle", symbol: "circle",
radius: 4, radius: 4,
}, },
lineWidth: 2, lineWidth: 3,
}, },
{ {
animation: false, animation: false,
@ -431,6 +431,7 @@
marker: { marker: {
enabled: false, enabled: false,
}, },
lineWidth: 2.5,
}, },
{ {
animation: false, animation: false,
@ -441,6 +442,7 @@
marker: { marker: {
enabled: false, enabled: false,
}, },
lineWidth: 2.5,
}, },
{ {
animation: false, animation: false,
@ -451,6 +453,7 @@
marker: { marker: {
enabled: false, enabled: false,
}, },
lineWidth: 2.5,
}, },
], ],
@ -557,8 +560,8 @@
{#if isPro} {#if isPro}
<span <span
class="text-xl font-bold {avgReturn >= 0 class="text-xl font-bold {avgReturn >= 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'}" : 'text-red-700 dark:text-[#FF2F1F]'}"
>{avgReturn?.toFixed(2)}%</span >{avgReturn?.toFixed(2)}%</span
> >
{:else} {:else}
@ -693,8 +696,8 @@
{#if index < 5 || isPro} {#if index < 5 || isPro}
<span <span
class={item?.change > 0 class={item?.change > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-red-600 dark:text-[#FF2F1F]"} : "text-red-700 dark:text-[#FF2F1F]"}
> >
{item?.change}% {item?.change}%
</span> </span>
@ -729,8 +732,8 @@
)} the model shows that the average return would be )} the model shows that the average return would be
<span <span
class="font-semibold {avgReturn >= 0 class="font-semibold {avgReturn >= 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'}" : 'text-red-700 dark:text-[#FF2F1F]'}"
>{avgReturn?.toFixed(2)}%</span >{avgReturn?.toFixed(2)}%</span
> based on the backtesting results. > based on the backtesting results.
</p> </p>
@ -969,26 +972,26 @@
{:else} {:else}
<td <td
class={lowChange > 0 class={lowChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-red-600 dark:text-[#FF2F1F]"} : "text-red-700 dark:text-[#FF2F1F]"}
>{lowChange}%</td >{lowChange}%</td
> >
<td <td
class={avgChange > 0 class={avgChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-red-600 dark:text-[#FF2F1F]"} : "text-red-700 dark:text-[#FF2F1F]"}
>{avgChange}%</td >{avgChange}%</td
> >
<td <td
class={medianChange > 0 class={medianChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-red-600 dark:text-[#FF2F1F]"} : "text-red-700 dark:text-[#FF2F1F]"}
>{medianChange}%</td >{medianChange}%</td
> >
<td <td
class={highChange > 0 class={highChange > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-700 dark:text-[#00FC50]"
: "text-red-600 dark:text-[#FF2F1F]"} : "text-red-700 dark:text-[#FF2F1F]"}
>{highChange}%</td >{highChange}%</td
> >
{/if} {/if}

13
src/routes/stocks/[tickerID]/history/+page.svelte
View File

@ -1,9 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { stockTicker, displayCompanyName } from "$lib/store";
stockTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js"; import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@ -12,6 +8,7 @@
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { removeCompanyStrings } from "$lib/utils";
export let data; export let data;
let timePeriod = "Daily"; let timePeriod = "Daily";
@ -285,10 +282,10 @@
<main class="w-full lg:w-3/4 lg:pr-10"> <main class="w-full lg:w-3/4 lg:pr-10">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
<div <div
class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5" class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-3"
> >
<h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0"> <h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0">
{$stockTicker} Stock Price History {removeCompanyStrings($displayCompanyName)} Stock Price History
</h1> </h1>
<div <div
class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0" class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0"
@ -399,7 +396,7 @@
</div> </div>
</div> </div>
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full m-auto mt-2"> <div class="w-full m-auto">
<div <div
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto" class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
> >

2
src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
View File

@ -93,7 +93,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

32
src/routes/stocks/[tickerID]/profile/employees/+page.svelte
View File

@ -113,7 +113,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {
@ -528,22 +528,22 @@
<thead class="text-muted dark:text-white dark:bg-default"> <thead class="text-muted dark:text-white dark:bg-default">
<tr> <tr>
<th <th
class="text-start text-sm whitespace-nowrap font-semibold" class="text-start text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
> >
Date Date
</th> </th>
<th <th
class="text-end text-sm whitespace-nowrap font-semibold" class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
> >
Employees Employees
</th> </th>
<th <th
class="text-end text-sm whitespace-nowrap font-semibold" class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
> >
Change Change
</th> </th>
<th <th
class="text-end text-sm whitespace-nowrap font-semibold" class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold"
> >
Growth Growth
</th> </th>
@ -589,7 +589,7 @@
{#if index === historyList?.length - 1} {#if index === historyList?.length - 1}
n/a n/a
{:else if item?.employeeCount > historyList[index + 1]?.employeeCount} {:else if item?.employeeCount > historyList[index + 1]?.employeeCount}
<span class="text-green-600 dark:text-[#00FC50]"> <span class="text-green-700 dark:text-[#00FC50]">
+{( +{(
((item?.employeeCount - ((item?.employeeCount -
historyList[index + 1]?.employeeCount) / historyList[index + 1]?.employeeCount) /
@ -598,7 +598,7 @@
).toFixed(2)}% ).toFixed(2)}%
</span> </span>
{:else if item?.employeeCount < historyList[index + 1]?.employeeCount} {:else if item?.employeeCount < historyList[index + 1]?.employeeCount}
<span class="text-red-600 dark:text-[#FF2F1F]"> <span class="text-red-700 dark:text-[#FF2F1F]">
-{( -{(
(Math.abs( (Math.abs(
item?.employeeCount - item?.employeeCount -
@ -629,21 +629,3 @@
</div> </div>
</div> </div>
</section> </section>
<style>
.app {
height: 400px;
width: 100%;
}
@media (max-width: 560px) {
.app {
width: 100%;
height: 300px;
}
}
.chart {
width: 100%;
}
</style>

4
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -280,7 +280,7 @@
}, },
labels: { labels: {
style: { style: {
color: $mode === "light" ? "black" : "white", color: $mode === "light" ? "#545454" : "white",
}, },
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
@ -306,7 +306,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

2
src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
View File

@ -122,7 +122,7 @@
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },

37
src/routes/update-password/+page.svelte
View File

@ -7,22 +7,22 @@
export let data; export let data;
export let form; export let form;
let loading = false; let isUpdating = false;
const submitUpdatePassword = () => { const submitUpdatePassword = () => {
loading = true; isUpdating = true;
return async ({ result, update }) => { return async ({ result, update }) => {
if (result.success) { if (result.success) {
toast.success("Password updated!", { toast.success("Password updated!", {
style: "border-radius: 200px; background: #2A2E39; color: #fff;", style: "border-radius: 200px; background: #2A2E39; color: #fff;",
}); });
} else if (result.error || result.errors) { } else {
toast.error("Invalid credentials", { toast.error("Invalid credentials", {
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;`,
}); });
} }
await update(); await update();
loading = false; isUpdating = false;
}; };
}; };
</script> </script>
@ -30,7 +30,7 @@
<SEO title="Update Password" description="Update your account password" /> <SEO title="Update Password" description="Update your account password" />
<section <section
class="flex flex-col items-center min-h-screen w-full max-w-3xl m-auto" class="flex flex-col items-center min-h-screen w-full max-w-3xl m-auto px-3 sm:px-0 mt-10"
> >
<div class="w-full overflow-hidden m-auto mt-5"> <div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden"> <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@ -44,9 +44,7 @@
use:enhance={submitUpdatePassword} use:enhance={submitUpdatePassword}
class="flex flex-col space-y-2 w-full max-w-lg m-auto" class="flex flex-col space-y-2 w-full max-w-lg m-auto"
> >
<h1 <h1 class="mb-1 text-2xl sm:text-3xl font-bold mb-6 text-center">
class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-6 text-center"
>
Reset Your Password Reset Your Password
</h1> </h1>
@ -76,12 +74,23 @@
/> />
<div class="w-full max-w-lg pt-3"> <div class="w-full max-w-lg pt-3">
<button {#if !isUpdating}
type="submit" <button
class="py-2.5 cursor-pointer rounded bg-[#fff] text-black font-semibold sm:hover:bg-gray-300 w-full max-w-lg normal-case text-md" type="submit"
> class="cursor-pointer py-2.5 bg-[#3B82F6] dark:bg-[#fff] border-none sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-white dark:text-black font-semibold text-[1rem]"
{loading ? "Updating..." : "Update Password"} >
</button> <span>Update Password</span>
</button>
{:else}
<label
class="cursor-not-allowed btn bg-[#3B82F6] dark:bg-[#fff] opacity-[0.5] border border-gray-600 sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-white dark:text-black font-semibold text-[1rem]"
>
<div class="flex flex-row m-auto items-center">
<span class="loading loading-infinity"></span>
<span class=" ml-1.5">Processing</span>
</div>
</label>
{/if}
</div> </div>
</form> </form>
</main> </main>