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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-15 00:00:49 +02:00
parent 1a7403876f
commit ab58cb1718
7 changed files with 140 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/shadcn/accordion/accordion-trigger.svelte
View File

@ -21,6 +21,6 @@
on:click on:click
> >
<slot /> <slot />
<ChevronDown class="h-4 w-4 absolute right-16 transition-transform duration-200 " /> <ChevronDown class="h-4 w-4 absolute right-40 sm:right-16 transition-transform duration-200 " />
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header> </AccordionPrimitive.Header>

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
View File

@ -17,7 +17,7 @@
{transitionConfig} {transitionConfig}
{sideOffset} {sideOffset}
class={cn( class={cn(
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none", "z-50 min-w-[8rem] rounded-md border border-gray-800 bg-[#09090B] p-1 text-white shadow-md focus:outline-none",
className className
)} )}
{...$$restProps} {...$$restProps}

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
View File

@ -9,6 +9,6 @@
</script> </script>
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
class={cn("-mx-1 my-1 h-px bg-muted", className)} class={cn("-mx-1 my-1 h-px bg-gray-800", className)}
{...$$restProps} {...$$restProps}
/> />

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
View File

@ -18,7 +18,7 @@
{transition} {transition}
{transitionConfig} {transitionConfig}
class={cn( class={cn(
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none", "z-50 min-w-[8rem] rounded-md border bg-[#09090B] p-1 text-white shadow-lg focus:outline-none",
className className
)} )}
{...$$restProps} {...$$restProps}

18
src/lib/components/shadcn/sheet/index.ts
View File

@ -43,7 +43,7 @@ export const sheetVariants = tv({
side: { side: {
top: "inset-x-0 top-0 border-b", top: "inset-x-0 top-0 border-b",
bottom: "inset-x-0 bottom-0 border-t", bottom: "inset-x-0 bottom-0 border-t",
left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
}, },
}, },
@ -56,48 +56,48 @@ export const sheetTransitions = {
top: { top: {
in: { in: {
y: "-100%", y: "-100%",
duration: 500, duration: 100,
opacity: 1, opacity: 1,
}, },
out: { out: {
y: "-100%", y: "-100%",
duration: 300, duration: 100,
opacity: 1, opacity: 1,
}, },
}, },
bottom: { bottom: {
in: { in: {
y: "100%", y: "100%",
duration: 500, duration: 100,
opacity: 1, opacity: 1,
}, },
out: { out: {
y: "100%", y: "100%",
duration: 300, duration: 100,
opacity: 1, opacity: 1,
}, },
}, },
left: { left: {
in: { in: {
x: "-100%", x: "-100%",
duration: 500, duration: 100,
opacity: 1, opacity: 1,
}, },
out: { out: {
x: "-100%", x: "-100%",
duration: 300, duration: 100,
opacity: 1, opacity: 1,
}, },
}, },
right: { right: {
in: { in: {
x: "100%", x: "100%",
duration: 500, duration: 100,
opacity: 1, opacity: 1,
}, },
out: { out: {
x: "100%", x: "100%",
duration: 300, duration: 100,
opacity: 1, opacity: 1,
}, },
}, },

3
src/lib/components/shadcn/sheet/sheet-content.svelte
View File

@ -37,8 +37,7 @@
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />
<SheetPrimitive.Close <SheetPrimitive.Close id="close-sheet" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
> >
<X class="h-4 w-4" /> <X class="h-4 w-4" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>

170
src/routes/+layout.svelte
View File

@ -53,6 +53,7 @@
import Box from "lucide-svelte/icons/box"; import Box from "lucide-svelte/icons/box";
import Boxes from "lucide-svelte/icons/boxes"; import Boxes from "lucide-svelte/icons/boxes";
import Newspaper from "lucide-svelte/icons/newspaper"; import Newspaper from "lucide-svelte/icons/newspaper";
import MessageCircle from "lucide-svelte/icons/message-circle";
export let data; export let data;
@ -398,13 +399,13 @@ $: {
<nav class="flex flex-col items-center mr-auto gap-y-4 sm:py-5 w-full"> <nav class="flex flex-col items-center mr-auto gap-y-4 sm:py-5 w-full">
<a <a
href="/" href="/"
class="mr-14 mb-5 group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base" class="mr-12 mb-5 group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
> >
<img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} /> <img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
<span class="text-white text-xl">Stocknear</span> <span class="text-white text-xl">Stocknear</span>
</a> </a>
<a href="/" class="flex flex-row items-center ml-4 mr-auto"> <a href="/" class="flex flex-row items-center ml-5 mr-auto">
<div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"> <div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
<Home class="h-5.5 w-5.5" /> <Home class="h-5.5 w-5.5" />
</div> </div>
@ -412,7 +413,7 @@ $: {
</a> </a>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4"> <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit"> <Accordion.Root class="w-fit">
@ -437,7 +438,7 @@ $: {
</div> </div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4"> <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit"> <Accordion.Root class="w-fit">
@ -462,7 +463,7 @@ $: {
</div> </div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4"> <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit"> <Accordion.Root class="w-fit">
@ -487,7 +488,7 @@ $: {
</div> </div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4"> <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit"> <Accordion.Root class="w-fit">
@ -511,7 +512,7 @@ $: {
</div> </div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4"> <div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit"> <Accordion.Root class="w-fit">
@ -536,7 +537,7 @@ $: {
</div> </div>
<a href="/dark-pool-flow" class="flex flex-row items-center ml-4 mt-2 mr-auto"> <a href="/dark-pool-flow" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div <div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8" class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
> >
@ -546,7 +547,7 @@ $: {
<span class="ml-3 text-white">Dark Pool</span> <span class="ml-3 text-white">Dark Pool</span>
</a> </a>
<a href="/hedge-funds" class="flex flex-row items-center ml-4 mt-2 mr-auto"> <a href="/hedge-funds" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div <div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8" class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
> >
@ -556,7 +557,7 @@ $: {
<span class="ml-3 text-white">Hedge Funds</span> <span class="ml-3 text-white">Hedge Funds</span>
</a> </a>
<a href="/market-news" class="flex flex-row items-center ml-4 mt-2 mr-auto"> <a href="/market-news" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div <div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8" class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
> >
@ -566,13 +567,21 @@ $: {
<span class="ml-3 text-white">Newspaper</span> <span class="ml-3 text-white">Newspaper</span>
</a> </a>
<a href="/community" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<MessageCircle class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Community</span>
</a>
</nav> </nav>
</aside> </aside>
<div class="flex flex-col sm:pl-14"> <div class="flex flex-col sm:pl-14">
<header <header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 sm:border-b sm:border-gray-800 px-4 sm:h-auto sm:px-6"
>
<Sheet.Root> <Sheet.Root>
<Sheet.Trigger asChild let:builder> <Sheet.Trigger asChild let:builder>
<Button builders={[builder]} size="icon" class="sm:hidden bg-[#141417] border-none"> <Button builders={[builder]} size="icon" class="sm:hidden bg-[#141417] border-none">
@ -583,37 +592,92 @@ $: {
<Sheet.Content side="left" class="sm:max-w-xs bg-[#141417]"> <Sheet.Content side="left" class="sm:max-w-xs bg-[#141417]">
<nav class="grid gap-6 text-lg font-medium bg-[#141417]"> <nav class="grid gap-6 text-lg font-medium bg-[#141417]">
<a <a
href="##" href="/"
class="flex items-center gap-4 px-2.5 text-white" class="flex items-center gap-4 px-0.5 text-white"
> >
<img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} /> <img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
Stocknear Stocknear
</a> </a>
<a
href="##" <Sheet.Close asChild let:builder>
class="flex items-center gap-4 px-2.5 text-white" <Button builders={[builder]} type="submit" class="bg-[#141417] -ml-4 mr-auto">
> <a href="/" class="flex flex-row items-center mr-auto mt-5">
<Home class="h-5.5 w-5.5" /> <div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
Dashboard <Home class="h-5.5 w-5.5" />
</a> </div>
<a <span class="ml-1.5 text-white text-[1rem]">Home</span>
href="##" </a>
class="flex items-center gap-4 px-2.5 text-white" </Button>
> </Sheet.Close>
<ShoppingCart class="h-5.5 w-5.5" />
Orders
</a> <div class="flex flex-row items-center mr-auto">
<a href="##" class="flex items-center gap-4 px-2.5 text-white">
<Package class="h-5.5 w-5.5" /> <Accordion.Root class="w-fit">
Products
</a> <Accordion.Item value="item-1">
<a
href="##" <Accordion.Trigger class="w-fit">
class="flex items-center gap-4 px-2.5 text-white" <Stock class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
> <span class="text-white mr-auto">Stocks</span>
<UsersRound class="h-5.5 w-5.5" /> </Accordion.Trigger>
Customers <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
</a> <Sheet.Close asChild let:builder>
<div class="flex flex-col items-start">
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">Top Analyst</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Shorted Stocks</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
</Button>
</div>
</Sheet.Close>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center mr-auto w-3/4">
<Accordion.Root class="w-fit">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Layers class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white mr-auto">ETFs</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<Sheet.Close asChild let:builder>
<div class="flex flex-col items-start">
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">New Launches</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">ETF Providers</a>
</Button>
</div>
</Sheet.Close>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
</nav> </nav>
@ -647,12 +711,30 @@ $: {
</Button> </Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content align="end"> <DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label> <DropdownMenu.Item>
<a href="/community/profile">
My Account
</a>
</DropdownMenu.Item>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item> <DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item> <a href="/watchlist">
Watchlist
</a>
</DropdownMenu.Item>
<DropdownMenu.Item>
<a href="/price-alert">
Price Alert
</a>
</DropdownMenu.Item>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item> <DropdownMenu.Item>
<form class="cursor-pointer" action="/logout" method="POST">
<button type="submit" class="w-full text-start">
<span class="text-start">Logout</span>
</button>
</form>
</DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
</header> </header>