Skip to content

Commit 4afeb7c

Browse files
MananTankMananTank
committed
[TOOL-3431] Dashboard: Add toggle theme button on logged out page header and other UI tweaks
1 parent 06d6504 commit 4afeb7c

File tree

8 files changed

+150
-174
lines changed

8 files changed

+150
-174
lines changed

‎apps/dashboard/src/@/components/color-mode-toggle.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,29 @@
22

33
import { Button } from "@/components/ui/button";
44
import { ClientOnly } from "components/ClientOnly/ClientOnly";
5-
import { Moon, Sun } from "lucide-react";
5+
import { MoonIcon, SunIcon } from "lucide-react";
66
import { useTheme } from "next-themes";
77
import { Skeleton } from "./ui/skeleton";
88

99
export function ColorModeToggle() {
1010
const { setTheme, theme } = useTheme();
1111

1212
return (
13-
<ClientOnly ssr={<Skeleton className="size-10 border bg-accent" />}>
13+
<ClientOnly
14+
ssr={<Skeleton className="size-[34px] rounded-full border bg-accent" />}
15+
>
1416
<Button
15-
variant="ghost"
16-
size="icon"
17+
variant="outline"
1718
onClick={() => {
1819
setTheme(theme === "dark" ? "light" : "dark");
1920
}}
2021
aria-label="Toggle theme"
22+
className="h-auto w-auto rounded-full border border-border bg-background p-2"
2123
>
2224
{theme === "light" ? (
23-
<Sun strokeWidth={1} className="size-5" />
25+
<SunIcon className="size-4" />
2426
) : (
25-
<Moon strokeWidth={1} className="size-5" />
27+
<MoonIcon className="size-4" />
2628
)}
2729
</Button>
2830
</ClientOnly>

‎apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,20 +48,22 @@ function Variants(props: {
4848

4949
return (
5050
<ThirdwebProvider>
51-
<div className="flex min-h-dvh flex-col gap-6 bg-gray-700 px-4 py-10">
51+
<div className="flex min-h-dvh flex-col gap-6 bg-background py-10">
5252
<BadgeContainer label="Account Loaded">
53-
<Comp
54-
teamsAndProjects={teamsAndProjectsStub}
55-
logout={() => {}}
56-
accountAddress={accountAddressStub}
57-
connectButton={<ConnectButtonStub />}
58-
createProject={() => {}}
59-
account={{
60-
id: "foo",
61-
email: "[email protected]",
62-
}}
63-
client={client}
64-
/>
53+
<div className="border-y bg-card">
54+
<Comp
55+
teamsAndProjects={teamsAndProjectsStub}
56+
logout={() => {}}
57+
accountAddress={accountAddressStub}
58+
connectButton={<ConnectButtonStub />}
59+
createProject={() => {}}
60+
account={{
61+
id: "foo",
62+
email: "[email protected]",
63+
}}
64+
client={client}
65+
/>
66+
</div>
6567
</BadgeContainer>
6668
</div>
6769
</ThirdwebProvider>

‎apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export function MobileBurgerMenuButton(
7979
<ThirdwebMiniLogo className="h-5" />
8080
</Link>
8181

82-
<div className="h-5" />
82+
<div className="h-6" />
8383

8484
{props.type === "loggedIn" && (
8585
<>
@@ -194,7 +194,7 @@ export function MobileBurgerMenuButton(
194194
<Link
195195
target="_blank"
196196
href="https://feedback.thirdweb.com"
197-
className="text-muted-foreground hover:text-foreground "
197+
className="text-muted-foreground hover:text-foreground"
198198
>
199199
Feedback
200200
</Link>
@@ -206,34 +206,31 @@ export function MobileBurgerMenuButton(
206206
<div className="h-6" />
207207

208208
{/* Theme */}
209-
<div className="flex items-center justify-between gap-2">
210-
<p className="text-base text-muted-foreground">Theme</p>
211-
212-
<div className="ml-auto flex items-center gap-1 rounded-lg border px-2 py-0.5">
213-
<Button
214-
size="icon"
215-
onClick={() => setTheme("light")}
216-
variant="ghost"
209+
<Button
210+
variant="ghost"
211+
className="flex w-full items-center justify-between gap-2 px-0"
212+
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
213+
>
214+
<span className="text-base text-muted-foreground">Theme</span>
215+
<div className="ml-auto flex items-center gap-2 rounded-lg border px-2 py-1">
216+
<Sun
217217
className={cn(
218-
"!p-1 !h-auto !w-auto",
219-
theme === "light" ? "opacity-100" : "opacity-30",
218+
"size-4",
219+
theme === "light"
220+
? "text-foreground"
221+
: "text-muted-foreground",
220222
)}
221-
>
222-
<Sun className="size-4" />
223-
</Button>
224-
<Button
225-
size="icon"
226-
onClick={() => setTheme("dark")}
227-
variant="ghost"
223+
/>
224+
<Moon
228225
className={cn(
229-
"!p-1 !h-auto !w-auto",
230-
theme === "dark" ? "opacity-100" : "opacity-30",
226+
"size-4",
227+
theme === "dark"
228+
? "text-foreground"
229+
: "text-muted-foreground",
231230
)}
232-
>
233-
<Moon className="size-4" />
234-
</Button>
231+
/>
235232
</div>
236-
</div>
233+
</Button>
237234
</div>
238235
</div>
239236
)}

‎apps/dashboard/src/app/login/LoginPage.tsx‎

Lines changed: 27 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -49,37 +49,38 @@ export function LoginAndOnboardingPage(props: {
4949
}) {
5050
return (
5151
<div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
52-
<div className="border-b bg-background">
52+
<div className="border-b bg-card">
5353
<header className="container flex w-full flex-row items-center justify-between px-6 py-4">
5454
<div className="flex shrink-0 items-center gap-3">
5555
<ThirdwebMiniLogo className="size-7 md:size-8" />
5656
</div>
5757

58-
<div className="flex items-center gap-2">
59-
<Link
60-
href="https://portal.thirdweb.com/"
61-
className="px-2 text-muted-foreground text-sm hover:text-foreground"
62-
target="_blank"
63-
>
64-
Docs
65-
</Link>
66-
67-
<Link
68-
href="/support"
69-
target="_blank"
70-
className="px-2 text-muted-foreground text-sm hover:text-foreground"
71-
>
72-
Support
73-
</Link>
74-
75-
<Link
76-
target="_blank"
77-
href="https://feedback.thirdweb.com"
78-
className="px-2 text-muted-foreground text-sm hover:text-foreground"
79-
>
80-
Feedback
81-
</Link>
82-
58+
<div className="flex items-center gap-4">
59+
<div className="flex items-center gap-2">
60+
<Link
61+
href="https://portal.thirdweb.com/"
62+
className="px-2 text-muted-foreground text-sm hover:text-foreground"
63+
target="_blank"
64+
>
65+
Docs
66+
</Link>
67+
68+
<Link
69+
href="/support"
70+
target="_blank"
71+
className="px-2 text-muted-foreground text-sm hover:text-foreground"
72+
>
73+
Support
74+
</Link>
75+
76+
<Link
77+
target="_blank"
78+
href="https://feedback.thirdweb.com"
79+
className="px-2 text-muted-foreground text-sm hover:text-foreground"
80+
>
81+
Feedback
82+
</Link>
83+
</div>
8384
<ColorModeToggle />
8485
</div>
8586
</header>
@@ -121,12 +122,6 @@ export function LoginAndOnboardingPageContent(props: {
121122
src="/assets/login/background.svg"
122123
className="-bottom-12 -right-12 pointer-events-none fixed lg:right-0 lg:bottom-0"
123124
/>
124-
125-
<Aurora
126-
color="hsl(var(--foreground)/7%)"
127-
pos={{ top: "55%", left: "50%" }}
128-
size={{ width: "1400px", height: "1300px" }}
129-
/>
130125
</div>
131126
);
132127
}
@@ -253,25 +248,3 @@ function CustomConnectEmbed(props: {
253248
/>
254249
);
255250
}
256-
257-
type AuroraProps = {
258-
size: { width: string; height: string };
259-
pos: { top: string; left: string };
260-
color: string;
261-
};
262-
263-
const Aurora: React.FC<AuroraProps> = ({ color, pos, size }) => {
264-
return (
265-
<div
266-
className="pointer-events-none absolute"
267-
style={{
268-
top: pos.top,
269-
left: pos.left,
270-
width: size.width,
271-
height: size.height,
272-
transform: "translate(-50%, -50%)",
273-
backgroundImage: `radial-gradient(ellipse at center, ${color}, transparent 60%)`,
274-
}}
275-
/>
276-
);
277-
};

‎apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx‎ renamed to ‎apps/dashboard/src/app/team/components/HeaderLoggedOut/HeaderLoggedOut.stories.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22
import { mobileViewport } from "../../../../stories/utils";
3-
import {
4-
TeamHeaderLoggedOutDesktopUI,
5-
TeamHeaderLoggedOutMobileUI,
6-
} from "./TeamHeaderLoggedOut";
3+
import { HeaderLoggedOut } from "./HeaderLoggedOut";
74

85
const meta = {
9-
title: "Headers/TeamHeader/LoggedOut",
6+
title: "Headers/LoggedOut",
107
component: Variants,
118
parameters: {
129
nextjs: {
@@ -33,18 +30,11 @@ export const Mobile: Story = {
3330
},
3431
};
3532

36-
function Variants(props: {
37-
type: "mobile" | "desktop";
38-
}) {
39-
const Comp =
40-
props.type === "mobile"
41-
? TeamHeaderLoggedOutMobileUI
42-
: TeamHeaderLoggedOutDesktopUI;
43-
33+
function Variants() {
4434
return (
45-
<div className="container min-h-dvh bg-zinc-900 py-10">
46-
<div className="bg-background">
47-
<Comp />
35+
<div className="background flex min-h-dvh flex-col gap-6">
36+
<div className="border-b bg-card">
37+
<HeaderLoggedOut />
4838
</div>
4939
</div>
5040
);

‎apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx‎ renamed to ‎apps/dashboard/src/app/team/components/HeaderLoggedOut/HeaderLoggedOut.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
"use client";
22

3+
import { ColorModeToggle } from "@/components/color-mode-toggle";
34
import { Button } from "@/components/ui/button";
45
import { cn } from "@/lib/utils";
6+
import {} from "lucide-react";
57
import Link from "next/link";
68
import { usePathname } from "next/navigation";
79
import { SecondaryNavLinks } from "../../../components/Header/SecondaryNav/SecondaryNav";
810
import { MobileBurgerMenuButton } from "../../../components/MobileBurgerMenuButton";
911
import { ThirdwebMiniLogo } from "../../../components/ThirdwebMiniLogo";
1012

11-
export function TeamHeaderLoggedOutDesktopUI(props: {
13+
export function HeaderLoggedOutDesktopUI(props: {
1214
className?: string;
1315
}) {
1416
const pathname = usePathname();
@@ -31,19 +33,23 @@ export function TeamHeaderLoggedOutDesktopUI(props: {
3133
<div className="flex items-center gap-6">
3234
<SecondaryNavLinks />
3335

34-
<Button size="sm" variant="primary" className="rounded-lg" asChild>
35-
<Link
36-
href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
37-
>
38-
Connect Wallet
39-
</Link>
40-
</Button>
36+
<div className="flex items-center gap-4">
37+
<Button size="sm" className="rounded-lg" asChild>
38+
<Link
39+
href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
40+
>
41+
Connect Wallet
42+
</Link>
43+
</Button>
44+
45+
<ColorModeToggle />
46+
</div>
4147
</div>
4248
</header>
4349
);
4450
}
4551

46-
export function TeamHeaderLoggedOutMobileUI(props: {
52+
export function HeaderLoggedOutMobileUI(props: {
4753
className?: string;
4854
}) {
4955
const pathname = usePathname();
@@ -60,7 +66,7 @@ export function TeamHeaderLoggedOutMobileUI(props: {
6066
</Link>
6167

6268
<div className="flex items-center gap-3">
63-
<Button size="sm" variant="primary" className="rounded-lg" asChild>
69+
<Button size="sm" className="rounded-lg" asChild>
6470
<Link
6571
href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
6672
>
@@ -73,11 +79,11 @@ export function TeamHeaderLoggedOutMobileUI(props: {
7379
);
7480
}
7581

76-
export function TeamHeaderLoggedOut() {
82+
export function HeaderLoggedOut() {
7783
return (
7884
<div>
79-
<TeamHeaderLoggedOutDesktopUI className="max-lg:hidden" />
80-
<TeamHeaderLoggedOutMobileUI className="lg:hidden" />
85+
<HeaderLoggedOutDesktopUI className="max-lg:hidden" />
86+
<HeaderLoggedOutMobileUI className="lg:hidden" />
8187
</div>
8288
);
8389
}

0 commit comments

Comments
 (0)