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

adding light mode

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-08 19:38:42 +01:00
parent b92f8e067d
commit 0c4130bd98
13 changed files with 195 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -50,6 +50,7 @@
"lucide-svelte": "^0.438.0", "lucide-svelte": "^0.438.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"memoize-one": "^6.0.0", "memoize-one": "^6.0.0",
"mode-watcher": "^0.5.1",
"object-to-formdata": "^4.5.1", "object-to-formdata": "^4.5.1",
"parse5": "^7.1.2", "parse5": "^7.1.2",
"pocketbase": "^0.25.2", "pocketbase": "^0.25.2",
@ -6919,6 +6920,16 @@
"ufo": "^1.5.3" "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": { "node_modules/mouse-change": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/mouse-change/-/mouse-change-1.4.0.tgz", "resolved": "https://registry.npmjs.org/mouse-change/-/mouse-change-1.4.0.tgz",

1
package.json
View File

@ -50,6 +50,7 @@
"lucide-svelte": "^0.438.0", "lucide-svelte": "^0.438.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"memoize-one": "^6.0.0", "memoize-one": "^6.0.0",
"mode-watcher": "^0.5.1",
"object-to-formdata": "^4.5.1", "object-to-formdata": "^4.5.1",
"parse5": "^7.1.2", "parse5": "^7.1.2",
"pocketbase": "^0.25.2", "pocketbase": "^0.25.2",

4
src/app.html
View File

@ -1,6 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en" class="bg-default"> <html lang="en" class="bg-white dark:bg-default">
<head> <head>
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="manifest" href="%sveltekit.assets%/manifest.json" /> <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
@ -12,7 +12,7 @@
<!-- Global background color --> <!-- Global background color -->
<body <body
data-sveltekit-preload-data="hover" data-sveltekit-preload-data="hover"
class="bg-default overflow-x-hidden" class="bg-white dark:bg-default overflow-x-hidden"
> >
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
</body> </body>

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

@ -98,7 +98,7 @@
<div class="fixed z-100 bottom-8 sm:bottom-10 right-8 sm:right-16"> <div class="fixed z-100 bottom-8 sm:bottom-10 right-8 sm:right-16">
<label <label
for="feedbackInfo" 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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

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

@ -15,9 +15,9 @@
<a <a
href="/notifications" href="/notifications"
on:click={toggle} 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]" /> <Bell class="h-[20px] w-[20px] " />
{#if hasUnreadElement} {#if hasUnreadElement}
<div class="absolute top-2 -right-2 flex"> <div class="absolute top-2 -right-2 flex">

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

@ -323,7 +323,7 @@
<Combobox.Input <Combobox.Input
id="combobox-input" id="combobox-input"
on:click={() => (inputValue = "")} 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..." placeholder="Company or stock symbol..."
aria-label="Company or stock symbol..." aria-label="Company or stock symbol..."
/> />
@ -348,58 +348,77 @@
<div <div
class="pointer-events-none absolute end-6 top-2.5 gap-1 opacity-80 rtl:flex-row-reverse hidden lg:flex" 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
<kbd class="kbd kbd-sm bg-[#1C2128] text-gray-400">K</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> </div>
{/if} {/if}
</div> </div>
</div> </div>
<Combobox.Content <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} sideOffset={8}
> >
{#if inputValue?.length > 0 && searchBarData?.length > 0} {#if inputValue?.length > 0 && searchBarData?.length > 0}
<div <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 Suggestions
</div> </div>
{#each searchBarData as item} {#each searchBarData as item}
<Combobox.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} value={item?.symbol}
label={item?.name} label={item?.name}
on:click={() => handleSearch(item?.symbol, item?.type)} on:click={() => handleSearch(item?.symbol, item?.type)}
> >
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<span class="text-sm text-blue-400">{item?.symbol}</span> <span class="text-sm text-blue-500 dark:text-blue-400"
<span class="ml-3 text-sm text-white">{item?.name}</span> >{item?.symbol}</span
<span class="ml-auto text-sm text-white">{item?.type}</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> </div>
</Combobox.Item> </Combobox.Item>
{/each} {/each}
{:else if inputValue?.length === 0 || !showSuggestions} {:else if inputValue?.length === 0 || !showSuggestions}
<div <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"} {searchHistory?.length > 0 ? "Recent" : "Popular"}
</div> </div>
{#each searchHistory?.length > 0 ? searchHistory : popularList as item} {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
<Combobox.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} value={item?.symbol}
label={item?.name} label={item?.name}
on:click={() => handleSearch(item?.symbol, item?.type)} on:click={() => handleSearch(item?.symbol, item?.type)}
> >
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<span class="text-sm text-blue-400">{item?.symbol}</span> <span
<span class="ml-3 text-sm text-white">{item?.name}</span> class="text-sm text-muted font-semibold dark:font-normal dark:text-blue-400"
<span class="ml-auto text-sm text-white">{item?.type}</span> >{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> </div>
</Combobox.Item> </Combobox.Item>
{/each} {/each}
{:else} {: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 No results found
</span> </span>
{/if} {/if}
@ -411,7 +430,7 @@
<label <label
for="searchBarModal" 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]" /> <Search class="h-[20px] w-[20px]" />
</label> </label>
@ -427,7 +446,7 @@
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label> <label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
<div <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 <label
for="searchBarModal" for="searchBarModal"
@ -473,7 +492,7 @@
<input <input
id="modal-search" 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" type="search"
placeholder="Company or stock symbol..." placeholder="Company or stock symbol..."
bind:value={inputValue} bind:value={inputValue}
@ -514,17 +533,19 @@
<ul class="text-sm"> <ul class="text-sm">
{#if !showSuggestions} {#if !showSuggestions}
{#each searchHistory?.length > 0 ? searchHistory : popularList as item} {#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 <a
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Index" ? "index" : "stocks"}/${item?.symbol}`} href={`/${item?.type === "ETF" ? "etf" : item?.type === "Index" ? "index" : "stocks"}/${item?.symbol}`}
on:click={() => popularTicker(item?.symbol)} on:click={() => popularTicker(item?.symbol)}
class="mb-2 {item?.symbol === focusedSuggestion class="mb-2 {item?.symbol === focusedSuggestion
? 'cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group' ? '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-row items-center w-full">
<div class="flex flex-col"> <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" <span class="text-white"
>{item?.name.length > 150 >{item?.name.length > 150
? item?.name?.slice(0, 150) + "..." ? item?.name?.slice(0, 150) + "..."
@ -544,7 +565,7 @@
Suggestions Suggestions
</div> </div>
{#each searchBarData as item} {#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-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<a <a
@ -556,7 +577,9 @@
> >
<div class="flex flex-row items-center w-full"> <div class="flex flex-row items-center w-full">
<div class="flex flex-col"> <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" <span class="text-white"
>{item?.name?.length > 150 >{item?.name?.length > 150
? item?.name?.slice(0, 150) + "..." ? item?.name?.slice(0, 150) + "..."

2
src/lib/components/shadcn/card/card.svelte
View File

@ -10,7 +10,7 @@
<div <div
class={cn( 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, className,
)} )}
{...$$restProps} {...$$restProps}

46
src/lib/components/shadcn/dropdown-menu/dropdown-menu-item.svelte
View File

@ -1,31 +1,31 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn } from "$lib/utils"; import { cn } from "$lib/utils";
type $$Props = DropdownMenuPrimitive.ItemProps & { type $$Props = DropdownMenuPrimitive.ItemProps & {
inset?: boolean; inset?: boolean;
}; };
type $$Events = DropdownMenuPrimitive.ItemEvents; type $$Events = DropdownMenuPrimitive.ItemEvents;
let className: $$Props["class"] = undefined; let className: $$Props["class"] = undefined;
export let inset: $$Props["inset"] = undefined; export let inset: $$Props["inset"] = undefined;
export { className as class }; export { className as class };
</script> </script>
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
class={cn( 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", inset && "pl-8",
className className,
)} )}
{...$$restProps} {...$$restProps}
on:click on:click
on:keydown on:keydown
on:focusin on:focusin
on:focusout on:focusout
on:pointerdown on:pointerdown
on:pointerleave on:pointerleave
on:pointermove on:pointermove
> >
<slot /> <slot />
</DropdownMenuPrimitive.Item> </DropdownMenuPrimitive.Item>

30
src/lib/components/shadcn/table/table-row.svelte
View File

@ -1,23 +1,23 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils"; import { cn } from "$lib/utils";
type $$Props = HTMLAttributes<HTMLTableRowElement> & { type $$Props = HTMLAttributes<HTMLTableRowElement> & {
"data-state"?: unknown; "data-state"?: unknown;
}; };
let className: $$Props["class"] = undefined; let className: $$Props["class"] = undefined;
export { className as class }; export { className as class };
</script> </script>
<tr <tr
class={cn( class={cn(
"border-b border-gray-800 transition-colors data-[state=selected]:bg-muted", "border-b border-gray-300 dark:border-gray-800 transition-colors data-[state=selected]:bg-muted",
className className,
)} )}
{...$$restProps} {...$$restProps}
on:click on:click
on:keydown on:keydown
> >
<slot /> <slot />
</tr> </tr>

22
src/lib/components/shadcn/table/table.svelte
View File

@ -1,15 +1,21 @@
<script lang="ts"> <script lang="ts">
import type { HTMLTableAttributes } from "svelte/elements"; import type { HTMLTableAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js"; import { cn } from "$lib/utils.js";
type $$Props = HTMLTableAttributes; type $$Props = HTMLTableAttributes;
let className: $$Props["class"] = undefined; let className: $$Props["class"] = undefined;
export { className as class }; export { className as class };
</script> </script>
<div class="relative w-full overflow-auto"> <div class="relative w-full overflow-auto">
<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}> <table
<slot /> class={cn(
</table> "w-full caption-bottom text-sm text-muted dark:text-white",
className,
)}
{...$$restProps}
>
<slot />
</table>
</div> </div>

35
src/routes/+layout.svelte
View File

@ -6,7 +6,9 @@
import { Toaster } from "svelte-sonner"; import { Toaster } from "svelte-sonner";
import "@bprogress/core/css"; import "@bprogress/core/css";
import { BProgress } from "@bprogress/core"; import { BProgress } from "@bprogress/core";
import { ModeWatcher } from "mode-watcher";
import { setMode, mode } from "mode-watcher";
import { page } from "$app/stores"; import { page } from "$app/stores";
import Footer from "$lib/components/Footer.svelte"; import Footer from "$lib/components/Footer.svelte";
@ -238,6 +240,14 @@
isBeforeMarketOpen.set(isBeforeMarketOpenValue); isBeforeMarketOpen.set(isBeforeMarketOpenValue);
isAfterMarketClose.set(isAfterMarketCloseValue); isAfterMarketClose.set(isAfterMarketCloseValue);
}; };
function handleModeChange() {
if ($mode === "light") {
setMode("dark");
} else {
setMode("light");
}
}
</script> </script>
<svelte:window bind:innerWidth={$screenWidth} /> <svelte:window bind:innerWidth={$screenWidth} />
@ -267,21 +277,21 @@
</svelte:head> </svelte:head>
<div class="app {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}"> <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">
<div <div
class="w-full navbar sticky {$screenWidth && class="w-full navbar sticky {$screenWidth &&
$screenWidth < 640 && $screenWidth < 640 &&
hideHeader hideHeader
? 'invisible -mt-20' ? '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.Root>
<Sheet.Trigger asChild let:builder> <Sheet.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
size="icon" 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" /> <Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
<span class="sr-only">Toggle Menu</span> <span class="sr-only">Toggle Menu</span>
@ -289,7 +299,7 @@
</Sheet.Trigger> </Sheet.Trigger>
<Sheet.Content <Sheet.Content
side="left" 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]"> <nav class=" grid gap-6 text-lg bg-[#18181B]">
<Sheet.Close asChild let:builder> <Sheet.Close asChild let:builder>
@ -299,7 +309,7 @@
> >
<a <a
href="/" 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 <img
class="avatar w-9 sm:w-10 rounded-full" class="avatar w-9 sm:w-10 rounded-full"
@ -808,7 +818,7 @@
src={stocknear_logo} src={stocknear_logo}
alt="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> </a>
<div <div
@ -826,11 +836,11 @@
<Button <Button
size="icon" size="icon"
aria-label="Settings" 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]} builders={[builder]}
> >
<svg <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" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -865,6 +875,13 @@
</DropdownMenu.Item> </DropdownMenu.Item>
</a> </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 /> <DropdownMenu.Separator />
<form class="cursor-pointer" action="/logout" method="POST"> <form class="cursor-pointer" action="/logout" method="POST">
<button <button
@ -875,6 +892,7 @@
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-[#18181B] cursor-pointer" 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> <span class="text-start">Logout</span>
</DropdownMenu.Item> </DropdownMenu.Item>
</button> </button>
@ -1217,6 +1235,7 @@
--> -->
<slot /> <slot />
<ModeWatcher defaultMode={"dark"}/>
<Toaster position="top-center" /> <Toaster position="top-center" />
{#if Cookie && $showCookieConsent === true} {#if Cookie && $showCookieConsent === true}
<Cookie /> <Cookie />

105
src/routes/+page.svelte
View File

@ -64,7 +64,7 @@
/> />
<div <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} {#if AppInstalled && !$closedPWA}
<svelte:component this={AppInstalled} /> <svelte:component this={AppInstalled} />
@ -122,13 +122,13 @@
--> -->
<h1 <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> </h1>
<h2 <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 Dashboard
</h2> </h2>
@ -136,7 +136,7 @@
<main class="flex flex-1 flex-col gap-4 sm:p-4 md:gap-8"> <main class="flex flex-1 flex-col gap-4 sm:p-4 md:gap-8">
<div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start"> <div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
<Card.Root <Card.Root
class="order-1 sm:order-2 overflow-x-auto overflow-hidden overflow-y-auto no-scrollbar max-h-[450px]" class=" order-1 sm:order-2 overflow-x-auto overflow-hidden overflow-y-auto no-scrollbar max-h-[450px]"
> >
<Card.Header class="flex flex-row items-center"> <Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full"> <div class="flex flex-col items-start w-full">
@ -144,7 +144,7 @@
<Card.Title <Card.Title
><a ><a
href={`/market-mover/${marketStatus === 0 ? "gainers" : marketStatus === 1 ? "premarket/gainers" : "afterhours/gainers"}`} 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 {marketStatus === 0
? "Top" ? "Top"
@ -173,21 +173,18 @@
<Table.Root class="overflow-x-auto w-full"> <Table.Root class="overflow-x-auto w-full">
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.Head class="text-white font-semibold" <Table.Head class=" font-semibold">Symbol</Table.Head>
>Symbol</Table.Head <Table.Head class="hidden sm:table-cell font-semibold"
>
<Table.Head
class="hidden sm:table-cell text-white font-semibold"
>Name</Table.Head >Name</Table.Head
> >
<Table.Head class="text-white text-right font-semibold" <Table.Head class=" text-right font-semibold"
>Price</Table.Head >Price</Table.Head
> >
<Table.Head class="text-white text-right font-semibold" <Table.Head class=" text-right font-semibold"
>Change</Table.Head >Change</Table.Head
> >
<Table.Head <Table.Head
class="text-white text-right font-semibold whitespace-nowrap" class=" text-right font-semibold whitespace-nowrap"
>Market Cap</Table.Head >Market Cap</Table.Head
> >
</Table.Row> </Table.Row>
@ -198,7 +195,7 @@
<Table.Cell class="text-sm sm:text-[1rem]"> <Table.Cell class="text-sm sm:text-[1rem]">
<a <a
href={`/stocks/${item?.symbol}`} 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 >{item?.symbol}</a
> >
</Table.Cell> </Table.Cell>
@ -218,13 +215,13 @@
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white" class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
> >
{#if item?.changesPercentage >= 0} {#if item?.changesPercentage >= 0}
<span class="text-[#00FC50]" <span class="text-[#208646] dark:text-[#00FC50]"
>+{item?.changesPercentage >= 1000 >+{item?.changesPercentage >= 1000
? abbreviateNumber(item?.changesPercentage) ? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}%</span : item?.changesPercentage?.toFixed(2)}%</span
> >
{:else} {:else}
<span class="text-[#FF2F1F]" <span class="text-[#DC2626] dark:text-[#FF2F1F]"
>{item?.changesPercentage <= -1000 >{item?.changesPercentage <= -1000
? abbreviateNumber(item?.changesPercentage) ? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}% : item?.changesPercentage?.toFixed(2)}%
@ -256,7 +253,7 @@
<Card.Title> <Card.Title>
<a <a
href={`/market-mover/${marketStatus === 0 ? "losers" : marketStatus === 1 ? "premarket/losers" : "afterhours/losers"}`} 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 {marketStatus === 0
? "Top" ? "Top"
@ -285,21 +282,18 @@
<Table.Root class="overflow-x-auto w-full"> <Table.Root class="overflow-x-auto w-full">
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.Head class="text-white font-semibold" <Table.Head class=" font-semibold">Symbol</Table.Head>
>Symbol</Table.Head <Table.Head class="hidden sm:table-cell font-semibold"
>
<Table.Head
class="hidden sm:table-cell text-white font-semibold"
>Name</Table.Head >Name</Table.Head
> >
<Table.Head class="text-white text-right font-semibold" <Table.Head class=" text-right font-semibold"
>Price</Table.Head >Price</Table.Head
> >
<Table.Head class="text-white text-right font-semibold" <Table.Head class=" text-right font-semibold"
>Change</Table.Head >Change</Table.Head
> >
<Table.Head <Table.Head
class="text-white text-right font-semibold whitespace-nowrap" class=" text-right font-semibold whitespace-nowrap"
>Market Cap</Table.Head >Market Cap</Table.Head
> >
</Table.Row> </Table.Row>
@ -310,7 +304,7 @@
<Table.Cell class="text-sm sm:text-[1rem]"> <Table.Cell class="text-sm sm:text-[1rem]">
<a <a
href={`/stocks/${item?.symbol}`} 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?.symbol}</a
> >
</Table.Cell> </Table.Cell>
@ -330,13 +324,13 @@
class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white" class="text-right md:table.-cell xl:table.-column text-sm sm:text-[1rem] text-white"
> >
{#if item?.changesPercentage >= 0} {#if item?.changesPercentage >= 0}
<span class="text-[#00FC50]" <span class="text-[#208646] dark:text-[#00FC50]"
>+{item?.changesPercentage >= 1000 >+{item?.changesPercentage >= 1000
? abbreviateNumber(item?.changesPercentage) ? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}%</span : item?.changesPercentage?.toFixed(2)}%</span
> >
{:else} {:else}
<span class="text-[#FF2F1F]" <span class="text-[#DC2626] dark:text-[#FF2F1F]"
>{item?.changesPercentage <= -1000 >{item?.changesPercentage <= -1000
? abbreviateNumber(item?.changesPercentage) ? abbreviateNumber(item?.changesPercentage)
: item?.changesPercentage?.toFixed(2)}% : item?.changesPercentage?.toFixed(2)}%
@ -366,8 +360,7 @@
<Card.Header class="flex flex-row items-center"> <Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full"> <div class="flex flex-col items-start w-full">
<div class="flex flex-row w-full items-center"> <div class="flex flex-row w-full items-center">
<Card.Title <Card.Title class="text-xl sm:text-2xl font-semibold"
class="text-xl sm:text-2xl tex-white font-semibold"
>Stock & Market News</Card.Title >Stock & Market News</Card.Title
> >
</div> </div>
@ -407,7 +400,7 @@
<a <a
href={`/stocks/${item?.ticker}`} 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 >{item?.ticker}</a
> >
</li> </li>
@ -420,7 +413,7 @@
<a <a
href={`/stocks/${item?.ticker}`} 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 >{item?.ticker}</a
> >
</li> </li>
@ -444,18 +437,17 @@
class="whitespace-nowrap flex flex-row w-full items-center" class="whitespace-nowrap flex flex-row w-full items-center"
> >
<Card.Title <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 >Analyst Insight Report
</Card.Title> </Card.Title>
{#if analystReport?.date} {#if analystReport?.date}
<label <label class="hidden sm:inline-block text-sm italic ml-auto"
class="hidden sm:inline-block text-white text-sm italic ml-auto"
>Updated {analystReport?.date}</label >Updated {analystReport?.date}</label
> >
{/if} {/if}
</div> </div>
{#if analystReport?.date} {#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 >Updated {analystReport?.date}</label
> >
{/if} {/if}
@ -465,12 +457,12 @@
{#if Object?.keys(analystReport)?.length > 0} {#if Object?.keys(analystReport)?.length > 0}
{analystReport?.insight} {analystReport?.insight}
<div class="text-white mt-4"> <div class="text-muted dark:text-white mt-4">
According to {analystReport?.numOfAnalyst} analyst ratings, the According to {analystReport?.numOfAnalyst} analyst ratings, the
average rating for average rating for
<a <a
href={`/stocks/${analystReport?.symbol}`} 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 >{analystReport?.symbol}</a
> >
stock is "{analystReport?.consensusRating}" The 12-month stock stock is "{analystReport?.consensusRating}" The 12-month stock
@ -480,9 +472,7 @@
: "decrease"} of {analystReport?.highPriceChange}% from the : "decrease"} of {analystReport?.highPriceChange}% from the
latest price. latest price.
</div> </div>
<table <table class="w-full text-right xs:text-sm sm:text-base mt-5">
class="w-full text-right text-tiny text-white xs:text-sm sm:text-base mt-5"
>
<thead <thead
><tr ><tr
class="border-b border-gray-600 font-normal text-sm sm:text-[1rem]" 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="py-[3px] text-left lg:py-0.5">Change</td>
<td <td
class={analystReport?.lowPriceChange > 0 class={analystReport?.lowPriceChange > 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-[#DC2626] dark:text-[#FF2F1F]"}
>{analystReport?.lowPriceChange}%</td >{analystReport?.lowPriceChange}%</td
> >
<td <td
class={analystReport?.avgPriceChange > 0 class={analystReport?.avgPriceChange > 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-[#DC2626] dark:text-[#FF2F1F]"}
>{analystReport?.avgPriceChange}%</td >{analystReport?.avgPriceChange}%</td
> >
<td <td
class={analystReport?.medianPriceChange > 0 class={analystReport?.medianPriceChange > 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-[#DC2626] dark:text-[#FF2F1F]"}
>{analystReport?.medianPriceChange}%</td >{analystReport?.medianPriceChange}%</td
> >
<td <td
class={analystReport?.highPriceChange > 0 class={analystReport?.highPriceChange > 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-[#208646] dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-[#DC2626] dark:text-[#FF2F1F]"}
>{analystReport?.highPriceChange}%</td >{analystReport?.highPriceChange}%</td
></tr ></tr
></tbody ></tbody
@ -547,7 +537,7 @@
<div class="flex flex-col items-start w-full"> <div class="flex flex-col items-start w-full">
<div class="flex flex-row w-full items-center"> <div class="flex flex-row w-full items-center">
<Card.Title <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 >Upcoming Earnings</Card.Title
> >
<a <a
@ -573,7 +563,7 @@
> >
<strong>{item?.name}</strong> (<a <strong>{item?.name}</strong> (<a
href={`/stocks/${item?.symbol}`} 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?.symbol}</a
>) >)
{item?.isToday === true {item?.isToday === true
@ -629,7 +619,7 @@
> >
<strong>{item?.name}</strong> (<a <strong>{item?.name}</strong> (<a
href={`/stocks/${item?.symbol}`} 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?.symbol}</a
>) >)
{item?.isToday === true {item?.isToday === true
@ -685,9 +675,10 @@
<div class="flex flex-col items-start w-full"> <div class="flex flex-col items-start w-full">
<div class="flex flex-row w-full items-center"> <div class="flex flex-row w-full items-center">
<Card.Title <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"
>Recent Earnings <span class="text-sm text-gray-300" >Recent Earnings <span
>(NYSE Time)</span class="text-sm text-gray-700 dark:text-gray-300"
>(EST Time)</span
></Card.Title ></Card.Title
> >
</div> </div>
@ -699,7 +690,7 @@
{#each data?.getDashboard?.recentEarnings as item} {#each data?.getDashboard?.recentEarnings as item}
<strong>{item?.name}</strong> (<a <strong>{item?.name}</strong> (<a
href={`/stocks/${item?.symbol}`} 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?.symbol}</a
>) has released its quarterly earnings at {formatTime( >) has released its quarterly earnings at {formatTime(
item?.time, item?.time,

5
tailwind.config.cjs
View File

@ -33,14 +33,11 @@ module.exports = {
positive: "#00FC50", positive: "#00FC50",
negative: "#FF2F1F", negative: "#FF2F1F",
neutral: "#FFA838", neutral: "#FFA838",
muted: "#111827",
destructive: { destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)", DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)", foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
}, },
muted: {
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
},
accent: { accent: {
DEFAULT: "hsl(var(--accent) / <alpha-value>)", DEFAULT: "hsl(var(--accent) / <alpha-value>)",
foreground: "hsl(var(--accent-foreground) / <alpha-value>)", foreground: "hsl(var(--accent-foreground) / <alpha-value>)",