adding light mode
This commit is contained in:
MuslemRahimi
parent
b92f8e067d
commit
0c4130bd98
11
package-lock.json
generated
11
package-lock.json
generated
@ -50,6 +50,7 @@
|
||||
"lucide-svelte": "^0.438.0",
|
||||
"luxon": "^3.5.0",
|
||||
"memoize-one": "^6.0.0",
|
||||
"mode-watcher": "^0.5.1",
|
||||
"object-to-formdata": "^4.5.1",
|
||||
"parse5": "^7.1.2",
|
||||
"pocketbase": "^0.25.2",
|
||||
@ -6919,6 +6920,16 @@
|
||||
"ufo": "^1.5.3"
|
||||
}
|
||||
},
|
||||
"node_modules/mode-watcher": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.5.1.tgz",
|
||||
"integrity": "sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"svelte": "^4.0.0 || ^5.0.0-next.1"
|
||||
}
|
||||
},
|
||||
"node_modules/mouse-change": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/mouse-change/-/mouse-change-1.4.0.tgz",
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
"lucide-svelte": "^0.438.0",
|
||||
"luxon": "^3.5.0",
|
||||
"memoize-one": "^6.0.0",
|
||||
"mode-watcher": "^0.5.1",
|
||||
"object-to-formdata": "^4.5.1",
|
||||
"parse5": "^7.1.2",
|
||||
"pocketbase": "^0.25.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en" class="bg-default">
|
||||
<html lang="en" class="bg-white dark:bg-default">
|
||||
<head>
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
|
||||
@ -12,7 +12,7 @@
|
||||
<!-- Global background color -->
|
||||
<body
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="bg-default overflow-x-hidden"
|
||||
class="bg-white dark:bg-default overflow-x-hidden"
|
||||
>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
<div class="fixed z-100 bottom-8 sm:bottom-10 right-8 sm:right-16">
|
||||
<label
|
||||
for="feedbackInfo"
|
||||
class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-700 sm:bg-[#fff] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
|
||||
class="border border-gray-300 inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-300 shadow-xl ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<a
|
||||
href="/notifications"
|
||||
on:click={toggle}
|
||||
class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-primary relative border p-2 rounded-md border-gray-600 ml-3 -mr-1"
|
||||
class="bg-gray-200 dark:bg-default text-gray-500 dark:text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-primary relative border p-2 rounded-md border-gray-300 dark:border-gray-600 ml-3 -mr-1"
|
||||
>
|
||||
<Bell class="h-[20px] w-[20px] " />
|
||||
|
||||
|
||||
@ -323,7 +323,7 @@
|
||||
<Combobox.Input
|
||||
id="combobox-input"
|
||||
on:click={() => (inputValue = "")}
|
||||
class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-hidden focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary focus:bg-secondary"
|
||||
class="grow rounded-sm border border-gray-300 dark:border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-600 dark:placeholder-gray-400 focus:shadow-lg focus:outline-hidden focus:ring-0 tiny:pl-8 xs:pl-10 text-muted dark:text-white md:py-2 w-full bg-[#F9FAFB] dark:bg-secondary focus:bg-white dark:focus:bg-secondary"
|
||||
placeholder="Company or stock symbol..."
|
||||
aria-label="Company or stock symbol..."
|
||||
/>
|
||||
@ -348,58 +348,77 @@
|
||||
<div
|
||||
class="pointer-events-none absolute end-6 top-2.5 gap-1 opacity-80 rtl:flex-row-reverse hidden lg:flex"
|
||||
>
|
||||
<kbd class="kbd kbd-sm bg-[#1C2128] text-gray-400">ctrl</kbd>
|
||||
<kbd class="kbd kbd-sm bg-[#1C2128] text-gray-400">K</kbd>
|
||||
<kbd
|
||||
class="kbd kbd-sm bg-gray-300 dark:bg-[#1C2128] text-gray-600 dark:text-gray-400"
|
||||
>ctrl</kbd
|
||||
>
|
||||
<kbd
|
||||
class="kbd kbd-sm bg-gray-300 dark:bg-[#1C2128] text-gray-600 dark:text-gray-400"
|
||||
>K</kbd
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Combobox.Content
|
||||
class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-secondary px-1 py-3 shadow-popover outline-hidden"
|
||||
class="w-auto z-40 -mt-0.5 rounded-md border border-gray-300 dark:border-gray-700 bg-[#F9FAFB] dark:bg-secondary px-1 py-3 shadow-xl outline-hidden"
|
||||
sideOffset={8}
|
||||
>
|
||||
{#if inputValue?.length > 0 && searchBarData?.length > 0}
|
||||
<div
|
||||
class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full"
|
||||
class="pl-2 pb-2 border-b border-gray-300 dark:border-gray-600 text-muted dark:text-white text-sm font-semibold w-full"
|
||||
>
|
||||
Suggestions
|
||||
</div>
|
||||
{#each searchBarData as item}
|
||||
<Combobox.Item
|
||||
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-primary"
|
||||
class="cursor-pointer text-muted dark:text-white border-b border-gray-300 dark:border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-gray-200 dark:data-highlighted:bg-gray-200 dark:data-highlighted:bg-primary"
|
||||
value={item?.symbol}
|
||||
label={item?.name}
|
||||
on:click={() => handleSearch(item?.symbol, item?.type)}
|
||||
>
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<span class="text-sm text-blue-400">{item?.symbol}</span>
|
||||
<span class="ml-3 text-sm text-white">{item?.name}</span>
|
||||
<span class="ml-auto text-sm text-white">{item?.type}</span>
|
||||
<span class="text-sm text-blue-500 dark:text-blue-400"
|
||||
>{item?.symbol}</span
|
||||
>
|
||||
<span class="ml-3 text-sm text-muted dark:text-white"
|
||||
>{item?.name}</span
|
||||
>
|
||||
<span class="ml-auto text-sm text-muted dark:text-white"
|
||||
>{item?.type}</span
|
||||
>
|
||||
</div>
|
||||
</Combobox.Item>
|
||||
{/each}
|
||||
{:else if inputValue?.length === 0 || !showSuggestions}
|
||||
<div
|
||||
class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full"
|
||||
class="pl-2 pb-2 border-b border-gray-300 dark:border-gray-600 text-muted dark:text-white text-sm font-semibold w-full"
|
||||
>
|
||||
{searchHistory?.length > 0 ? "Recent" : "Popular"}
|
||||
</div>
|
||||
{#each searchHistory?.length > 0 ? searchHistory : popularList as item}
|
||||
<Combobox.Item
|
||||
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-primary"
|
||||
class="cursor-pointer text-white border-b border-gray-300 dark:border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-gray-200 dark:data-highlighted:bg-primary"
|
||||
value={item?.symbol}
|
||||
label={item?.name}
|
||||
on:click={() => handleSearch(item?.symbol, item?.type)}
|
||||
>
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<span class="text-sm text-blue-400">{item?.symbol}</span>
|
||||
<span class="ml-3 text-sm text-white">{item?.name}</span>
|
||||
<span class="ml-auto text-sm text-white">{item?.type}</span>
|
||||
<span
|
||||
class="text-sm text-muted font-semibold dark:font-normal dark:text-blue-400"
|
||||
>{item?.symbol}</span
|
||||
>
|
||||
<span class="ml-3 text-sm text-muted dark:text-white"
|
||||
>{item?.name}</span
|
||||
>
|
||||
<span class="ml-auto text-sm text-muted dark:text-white"
|
||||
>{item?.type}</span
|
||||
>
|
||||
</div>
|
||||
</Combobox.Item>
|
||||
{/each}
|
||||
{:else}
|
||||
<span class="block px-5 py-2 text-sm text-white">
|
||||
<span class="block px-5 py-2 text-sm text-muted dark:text-white">
|
||||
No results found
|
||||
</span>
|
||||
{/if}
|
||||
@ -411,7 +430,7 @@
|
||||
|
||||
<label
|
||||
for="searchBarModal"
|
||||
class="sm:hidden cursor-pointer p-2 sm:hover:bg-primary text-gray-300 sm:hover:text-white shrink-0 flex items-center justify-center border border-gray-600 rounded-md"
|
||||
class="sm:hidden cursor-pointer p-2 sm:hover:bg-primary text-gray-300 sm:hover:text-white shrink-0 flex items-center justify-center border border-gray-300 dark:border-gray-600 rounded-md"
|
||||
>
|
||||
<Search class="h-[20px] w-[20px]" />
|
||||
</label>
|
||||
@ -427,7 +446,7 @@
|
||||
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
|
||||
|
||||
<div
|
||||
class="z-999 modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
|
||||
class="z-999 modal-box overflow-hidden rounded-md bg-secondary border border-gray-300 dark:border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
|
||||
>
|
||||
<label
|
||||
for="searchBarModal"
|
||||
@ -473,7 +492,7 @@
|
||||
|
||||
<input
|
||||
id="modal-search"
|
||||
class="rounded-md w-full text-white bg-secondary border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
|
||||
class="rounded-md w-full text-white bg-gray-300 dark:bg-secondary border border-gray-300 dark:border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
|
||||
type="search"
|
||||
placeholder="Company or stock symbol..."
|
||||
bind:value={inputValue}
|
||||
@ -514,17 +533,19 @@
|
||||
<ul class="text-sm">
|
||||
{#if !showSuggestions}
|
||||
{#each searchHistory?.length > 0 ? searchHistory : popularList as item}
|
||||
<li class="border-b border-gray-600">
|
||||
<li class="border-b border-gray-300 dark:border-gray-600">
|
||||
<a
|
||||
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Index" ? "index" : "stocks"}/${item?.symbol}`}
|
||||
on:click={() => popularTicker(item?.symbol)}
|
||||
class="mb-2 {item?.symbol === focusedSuggestion
|
||||
? 'cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
|
||||
: 'cursor-pointer bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'} w-full"
|
||||
: 'cursor-pointer bg-secondary sm:hover:bg-gray-300 dark:sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'} w-full"
|
||||
>
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-blue-400">{item?.symbol}</span>
|
||||
<span class="text-blue-500 dark:text-blue-400"
|
||||
>{item?.symbol}</span
|
||||
>
|
||||
<span class="text-white"
|
||||
>{item?.name.length > 150
|
||||
? item?.name?.slice(0, 150) + "..."
|
||||
@ -544,7 +565,7 @@
|
||||
Suggestions
|
||||
</div>
|
||||
{#each searchBarData as item}
|
||||
<li class="border-b border-gray-600">
|
||||
<li class="border-b border-gray-300 dark:border-gray-600">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<a
|
||||
@ -556,7 +577,9 @@
|
||||
>
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-blue-400">{item?.symbol}</span>
|
||||
<span class="text-blue-500 dark:text-blue-400"
|
||||
>{item?.symbol}</span
|
||||
>
|
||||
<span class="text-white"
|
||||
>{item?.name?.length > 150
|
||||
? item?.name?.slice(0, 150) + "..."
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<div
|
||||
class={cn(
|
||||
"rounded-md border border-gray-800 bg-default text-white shadow-xs",
|
||||
"rounded-md border border-gray-300 dark:border-gray-800 bg-white dark:bg-default text-muted dark:text-white shadow-xs",
|
||||
className,
|
||||
)}
|
||||
{...$$restProps}
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
|
||||
<DropdownMenuPrimitive.Item
|
||||
class={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none ",
|
||||
"relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none ",
|
||||
inset && "pl-8",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
|
||||
<tr
|
||||
class={cn(
|
||||
"border-b border-gray-800 transition-colors data-[state=selected]:bg-muted",
|
||||
className
|
||||
"border-b border-gray-300 dark:border-gray-800 transition-colors data-[state=selected]:bg-muted",
|
||||
className,
|
||||
)}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
||||
@ -9,7 +9,13 @@
|
||||
</script>
|
||||
|
||||
<div class="relative w-full overflow-auto">
|
||||
<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
|
||||
<table
|
||||
class={cn(
|
||||
"w-full caption-bottom text-sm text-muted dark:text-white",
|
||||
className,
|
||||
)}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</table>
|
||||
</div>
|
||||
@ -6,7 +6,9 @@
|
||||
import { Toaster } from "svelte-sonner";
|
||||
import "@bprogress/core/css";
|
||||
import { BProgress } from "@bprogress/core";
|
||||
import { ModeWatcher } from "mode-watcher";
|
||||
|
||||
import { setMode, mode } from "mode-watcher";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
@ -238,6 +240,14 @@
|
||||
isBeforeMarketOpen.set(isBeforeMarketOpenValue);
|
||||
isAfterMarketClose.set(isAfterMarketCloseValue);
|
||||
};
|
||||
|
||||
function handleModeChange() {
|
||||
if ($mode === "light") {
|
||||
setMode("dark");
|
||||
} else {
|
||||
setMode("light");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={$screenWidth} />
|
||||
@ -267,21 +277,21 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="app {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}">
|
||||
<div class="flex min-h-screen w-full flex-col bg-default">
|
||||
<div class="flex min-h-screen w-full flex-col bg-white dark:bg-default">
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="w-full navbar sticky {$screenWidth &&
|
||||
$screenWidth < 640 &&
|
||||
hideHeader
|
||||
? 'invisible -mt-20'
|
||||
: ''} top-0 z-40 bg-default border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6"
|
||||
: ''} top-0 z-40 bg-white dark:bg-default border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6"
|
||||
>
|
||||
<Sheet.Root>
|
||||
<Sheet.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
size="icon"
|
||||
class="bg-default text-white sm:hover:bg-[#18181B] border-none"
|
||||
class="bg-white dark:bg-default text-white sm:hover:bg-[#18181B] border-none"
|
||||
>
|
||||
<Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
|
||||
<span class="sr-only">Toggle Menu</span>
|
||||
@ -289,7 +299,7 @@
|
||||
</Sheet.Trigger>
|
||||
<Sheet.Content
|
||||
side="left"
|
||||
class="max-w-screen w-full sm:max-w-xs bg-[#18181B] overflow-y-auto text-white"
|
||||
class="max-w-screen w-full sm:max-w-xs bg-[#18181B] overflow-y-auto text-muted dark:text-white"
|
||||
>
|
||||
<nav class=" grid gap-6 text-lg bg-[#18181B]">
|
||||
<Sheet.Close asChild let:builder>
|
||||
@ -299,7 +309,7 @@
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-4 px-0.5 text-white text-[1rem] font-semibold"
|
||||
class="flex items-center gap-4 px-0.5 text-muted dark:text-white text-[1rem] font-semibold"
|
||||
>
|
||||
<img
|
||||
class="avatar w-9 sm:w-10 rounded-full"
|
||||
@ -808,7 +818,7 @@
|
||||
src={stocknear_logo}
|
||||
alt="Stocknear Logo"
|
||||
/>
|
||||
<span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
|
||||
<span class="text-muted dark:text-white font-semibold ml-2 text-lg">Stocknear</span>
|
||||
</a>
|
||||
|
||||
<div
|
||||
@ -826,11 +836,11 @@
|
||||
<Button
|
||||
size="icon"
|
||||
aria-label="Settings"
|
||||
class="overflow-hidden rounded-md bg-default sm:hover:bg-[#18181B] border border-gray-600 w-10 h-10"
|
||||
class="overflow-hidden rounded-md bg-gray-200 dark:bg-default sm:hover:bg-[#18181B] border border-gray-300 dark:border-gray-600 w-10 h-10"
|
||||
builders={[builder]}
|
||||
>
|
||||
<svg
|
||||
class="h-[28px] w-[28px] overflow-hidden rounded-full text-gray-300"
|
||||
class="h-[28px] w-[28px] overflow-hidden rounded-full text-gray-500 dark:text-gray-300"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
@ -865,6 +875,13 @@
|
||||
</DropdownMenu.Item>
|
||||
</a>
|
||||
|
||||
<button on:click={handleModeChange} class="cursor-pointer w-full sm:hover:bg-[#18181B] relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none">
|
||||
|
||||
<span>{$mode === 'light' ? 'Light' : 'Dark'} Mode</span>
|
||||
<span class="sr-only">Toggle theme</span>
|
||||
</button>
|
||||
|
||||
|
||||
<DropdownMenu.Separator />
|
||||
<form class="cursor-pointer" action="/logout" method="POST">
|
||||
<button
|
||||
@ -875,6 +892,7 @@
|
||||
<DropdownMenu.Item
|
||||
class="sm:hover:bg-[#18181B] cursor-pointer"
|
||||
>
|
||||
<svg class="lucide lucide-log-out mr-2 w-3.5 h-3.5 transform scale-x-[-1]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>
|
||||
<span class="text-start">Logout</span>
|
||||
</DropdownMenu.Item>
|
||||
</button>
|
||||
@ -1217,6 +1235,7 @@
|
||||
-->
|
||||
|
||||
<slot />
|
||||
<ModeWatcher defaultMode={"dark"}/>
|
||||
<Toaster position="top-center" />
|
||||
{#if Cookie && $showCookieConsent === true}
|
||||
<Cookie />
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
/>
|
||||
|
||||
<div
|
||||
class="w-full sm:max-w-[1400px] overflow-hidden m-auto min-h-screen bg-default mb-40"
|
||||
class="w-full sm:max-w-[1400px] overflow-hidden m-auto min-h-screen bg-white dark:bg-default text-muted dark:text-white mb-40"
|
||||
>
|
||||
{#if AppInstalled && !$closedPWA}
|
||||
<svelte:component this={AppInstalled} />
|
||||
@ -122,13 +122,13 @@
|
||||
-->
|
||||
|
||||
<h1
|
||||
class="hidden sm:block text-3xl lg:text-4xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
|
||||
class="hidden sm:block text-3xl lg:text-4xl text-muted dark:text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
|
||||
>
|
||||
Clear & <span class="italic text-[#fff]">Simple</span> Market Insight.
|
||||
Clear & <span class="italic">Simple</span> Market Insight.
|
||||
</h1>
|
||||
|
||||
<h2
|
||||
class="text-white text-2xl font-semibold text-start w-full pb-4 sm:pl-4 sm:pb-2"
|
||||
class="text-muted dark:text-white text-2xl font-semibold text-start w-full pb-4 sm:pl-4 sm:pb-2"
|
||||
>
|
||||
Dashboard
|
||||
</h2>
|
||||
@ -144,7 +144,7 @@
|
||||
<Card.Title
|
||||
><a
|
||||
href={`/market-mover/${marketStatus === 0 ? "gainers" : marketStatus === 1 ? "premarket/gainers" : "afterhours/gainers"}`}
|
||||
class="text-xl sm:text-2xl tex-white font-semibold cursor-pointer sm:hover:underline sm:hover:underline-offset-4"
|
||||
class="text-xl sm:text-2xl text-muted dark:text-white font-semibold cursor-pointer sm:hover:underline sm:hover:underline-offset-4"
|
||||
>
|
||||
{marketStatus === 0
|
||||
? "Top"
|
||||
@ -173,21 +173,18 @@
|
||||
<Table.Root class="overflow-x-auto w-full">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="text-white font-semibold"
|
||||
>Symbol</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="hidden sm:table-cell text-white font-semibold"
|
||||
<Table.Head class=" font-semibold">Symbol</Table.Head>
|
||||
<Table.Head class="hidden sm:table-cell font-semibold"
|
||||
>Name</Table.Head
|
||||
>
|
||||
<Table.Head class="text-white text-right font-semibold"
|
||||
<Table.Head class=" text-right font-semibold"
|
||||
>Price</Table.Head
|
||||
>
|
||||
<Table.Head class="text-white text-right font-semibold"
|
||||
<Table.Head class=" text-right font-semibold"
|
||||
>Change</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-right font-semibold whitespace-nowrap"
|
||||
class=" text-right font-semibold whitespace-nowrap"
|
||||
>Market Cap</Table.Head
|
||||
>
|
||||
</Table.Row>
|
||||
@ -198,7 +195,7 @@
|
||||
<Table.Cell class="text-sm sm:text-[1rem]">
|
||||
<a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="text-blue-400 sm:hover:text-white cursor-pointer"
|
||||
class="text-blue-600 dark:text-blue-400 sm:hover:text-muted dark:sm:hover:text-white cursor-pointer"
|
||||
>{item?.symbol}</a
|
||||
>
|
||||
</Table.Cell>
|
||||
@ -218,13 +215,13 @@
|
||||
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
||||
>
|
||||
{#if item?.changesPercentage >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
<span class="text-[#208646] dark:text-[#00FC50]"
|
||||
>+{item?.changesPercentage >= 1000
|
||||
? abbreviateNumber(item?.changesPercentage)
|
||||
: item?.changesPercentage?.toFixed(2)}%</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]"
|
||||
<span class="text-[#DC2626] dark:text-[#FF2F1F]"
|
||||
>{item?.changesPercentage <= -1000
|
||||
? abbreviateNumber(item?.changesPercentage)
|
||||
: item?.changesPercentage?.toFixed(2)}%
|
||||
@ -256,7 +253,7 @@
|
||||
<Card.Title>
|
||||
<a
|
||||
href={`/market-mover/${marketStatus === 0 ? "losers" : marketStatus === 1 ? "premarket/losers" : "afterhours/losers"}`}
|
||||
class="text-xl sm:text-2xl tex-white font-semibold cursor-pointer sm:hover:underline sm:hover:underline-offset-4"
|
||||
class="text-xl sm:text-2xl text-muted dark:text-white font-semibold cursor-pointer sm:hover:underline sm:hover:underline-offset-4"
|
||||
>
|
||||
{marketStatus === 0
|
||||
? "Top"
|
||||
@ -285,21 +282,18 @@
|
||||
<Table.Root class="overflow-x-auto w-full">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="text-white font-semibold"
|
||||
>Symbol</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="hidden sm:table-cell text-white font-semibold"
|
||||
<Table.Head class=" font-semibold">Symbol</Table.Head>
|
||||
<Table.Head class="hidden sm:table-cell font-semibold"
|
||||
>Name</Table.Head
|
||||
>
|
||||
<Table.Head class="text-white text-right font-semibold"
|
||||
<Table.Head class=" text-right font-semibold"
|
||||
>Price</Table.Head
|
||||
>
|
||||
<Table.Head class="text-white text-right font-semibold"
|
||||
<Table.Head class=" text-right font-semibold"
|
||||
>Change</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-right font-semibold whitespace-nowrap"
|
||||
class=" text-right font-semibold whitespace-nowrap"
|
||||
>Market Cap</Table.Head
|
||||
>
|
||||
</Table.Row>
|
||||
@ -310,7 +304,7 @@
|
||||
<Table.Cell class="text-sm sm:text-[1rem]">
|
||||
<a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="text-blue-400 sm:hover:text-white cursor-pointer"
|
||||
class="text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted cursor-pointer"
|
||||
>{item?.symbol}</a
|
||||
>
|
||||
</Table.Cell>
|
||||
@ -330,13 +324,13 @@
|
||||
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
|
||||
>
|
||||
{#if item?.changesPercentage >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
<span class="text-[#208646] dark:text-[#00FC50]"
|
||||
>+{item?.changesPercentage >= 1000
|
||||
? abbreviateNumber(item?.changesPercentage)
|
||||
: item?.changesPercentage?.toFixed(2)}%</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-[#FF2F1F]"
|
||||
<span class="text-[#DC2626] dark:text-[#FF2F1F]"
|
||||
>{item?.changesPercentage <= -1000
|
||||
? abbreviateNumber(item?.changesPercentage)
|
||||
: item?.changesPercentage?.toFixed(2)}%
|
||||
@ -366,8 +360,7 @@
|
||||
<Card.Header class="flex flex-row items-center">
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
<Card.Title
|
||||
class="text-xl sm:text-2xl tex-white font-semibold"
|
||||
<Card.Title class="text-xl sm:text-2xl font-semibold"
|
||||
>Stock & Market News</Card.Title
|
||||
>
|
||||
</div>
|
||||
@ -407,7 +400,7 @@
|
||||
|
||||
<a
|
||||
href={`/stocks/${item?.ticker}`}
|
||||
class="inline-block badge duration-0 rounded-sm ml-1 px-2 m-auto text-blue-400 sm:hover:text-white"
|
||||
class="inline-block badge duration-0 rounded-sm ml-1 px-2 m-auto text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted"
|
||||
>{item?.ticker}</a
|
||||
>
|
||||
</li>
|
||||
@ -420,7 +413,7 @@
|
||||
|
||||
<a
|
||||
href={`/stocks/${item?.ticker}`}
|
||||
class="inline-block badge duration-0 rounded-sm ml-1 px-2 m-auto text-blue-400 sm:hover:text-white"
|
||||
class="inline-block badge duration-0 rounded-sm ml-1 px-2 m-auto text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted"
|
||||
>{item?.ticker}</a
|
||||
>
|
||||
</li>
|
||||
@ -444,18 +437,17 @@
|
||||
class="whitespace-nowrap flex flex-row w-full items-center"
|
||||
>
|
||||
<Card.Title
|
||||
class="text-xl sm:text-2xl tex-white font-semibold"
|
||||
class="text-xl sm:text-2xl text-muted dark:text-white font-semibold"
|
||||
>Analyst Insight Report
|
||||
</Card.Title>
|
||||
{#if analystReport?.date}
|
||||
<label
|
||||
class="hidden sm:inline-block text-white text-sm italic ml-auto"
|
||||
<label class="hidden sm:inline-block text-sm italic ml-auto"
|
||||
>Updated {analystReport?.date}</label
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{#if analystReport?.date}
|
||||
<label class="sm:hidden text-white text-xs italic mt-2"
|
||||
<label class="sm:hidden text-xs italic mt-2"
|
||||
>Updated {analystReport?.date}</label
|
||||
>
|
||||
{/if}
|
||||
@ -465,12 +457,12 @@
|
||||
{#if Object?.keys(analystReport)?.length > 0}
|
||||
{analystReport?.insight}
|
||||
|
||||
<div class="text-white mt-4">
|
||||
<div class="text-muted dark:text-white mt-4">
|
||||
According to {analystReport?.numOfAnalyst} analyst ratings, the
|
||||
average rating for
|
||||
<a
|
||||
href={`/stocks/${analystReport?.symbol}`}
|
||||
class="text-blue-400 sm:hover:text-white cursor-pointer"
|
||||
class="text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted cursor-pointer"
|
||||
>{analystReport?.symbol}</a
|
||||
>
|
||||
stock is "{analystReport?.consensusRating}" The 12-month stock
|
||||
@ -480,9 +472,7 @@
|
||||
: "decrease"} of {analystReport?.highPriceChange}% from the
|
||||
latest price.
|
||||
</div>
|
||||
<table
|
||||
class="w-full text-right text-tiny text-white xs:text-sm sm:text-base mt-5"
|
||||
>
|
||||
<table class="w-full text-right xs:text-sm sm:text-base mt-5">
|
||||
<thead
|
||||
><tr
|
||||
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]"
|
||||
@ -507,26 +497,26 @@
|
||||
><td class="py-[3px] text-left lg:py-0.5">Change</td>
|
||||
<td
|
||||
class={analystReport?.lowPriceChange > 0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
|
||||
: "text-[#DC2626] dark:text-[#FF2F1F]"}
|
||||
>{analystReport?.lowPriceChange}%</td
|
||||
>
|
||||
<td
|
||||
class={analystReport?.avgPriceChange > 0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
|
||||
: "text-[#DC2626] dark:text-[#FF2F1F]"}
|
||||
>{analystReport?.avgPriceChange}%</td
|
||||
>
|
||||
<td
|
||||
class={analystReport?.medianPriceChange > 0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
|
||||
: "text-[#DC2626] dark:text-[#FF2F1F]"}
|
||||
>{analystReport?.medianPriceChange}%</td
|
||||
>
|
||||
<td
|
||||
class={analystReport?.highPriceChange > 0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
|
||||
: "text-[#DC2626] dark:text-[#FF2F1F]"}
|
||||
>{analystReport?.highPriceChange}%</td
|
||||
></tr
|
||||
></tbody
|
||||
@ -547,7 +537,7 @@
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
<Card.Title
|
||||
class="text-xl sm:text-2xl tex-white font-semibold"
|
||||
class="text-xl sm:text-2xl text-muted dark:text-white font-semibold"
|
||||
>Upcoming Earnings</Card.Title
|
||||
>
|
||||
<a
|
||||
@ -573,7 +563,7 @@
|
||||
>
|
||||
<strong>{item?.name}</strong> (<a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="text-blue-400 sm:hover:text-white cursor-pointer"
|
||||
class="text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted cursor-pointer"
|
||||
>{item?.symbol}</a
|
||||
>)
|
||||
{item?.isToday === true
|
||||
@ -629,7 +619,7 @@
|
||||
>
|
||||
<strong>{item?.name}</strong> (<a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="text-blue-400 sm:hover:text-white cursor-pointer"
|
||||
class="text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted cursor-pointer"
|
||||
>{item?.symbol}</a
|
||||
>)
|
||||
{item?.isToday === true
|
||||
@ -685,9 +675,10 @@
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
<Card.Title
|
||||
class="text-xl sm:text-2xl tex-white font-semibold"
|
||||
>Recent Earnings <span class="text-sm text-gray-300"
|
||||
>(NYSE Time)</span
|
||||
class="text-xl sm:text-2xl text-muted dark:text-white font-semibold"
|
||||
>Recent Earnings <span
|
||||
class="text-sm text-gray-700 dark:text-gray-300"
|
||||
>(EST Time)</span
|
||||
></Card.Title
|
||||
>
|
||||
</div>
|
||||
@ -699,7 +690,7 @@
|
||||
{#each data?.getDashboard?.recentEarnings as item}
|
||||
<strong>{item?.name}</strong> (<a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="text-blue-400 sm:hover:text-white cursor-pointer"
|
||||
class="text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted cursor-pointer"
|
||||
>{item?.symbol}</a
|
||||
>) has released its quarterly earnings at {formatTime(
|
||||
item?.time,
|
||||
|
||||
@ -33,14 +33,11 @@ module.exports = {
|
||||
positive: "#00FC50",
|
||||
negative: "#FF2F1F",
|
||||
neutral: "#FFA838",
|
||||
muted: "#111827",
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
|
||||
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
|
||||
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
|
||||
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user