Skip to content

Commit aab3da0

Browse files
MananTankMananTank
committed
[TOOL-3431] Dashboard: Add toggle theme button on logged out page header and other UI tweaks (#6263)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR primarily focuses on refactoring components related to the `TeamHeader` and `HeaderLoggedOut`, improving code organization and consistency, and updating UI elements for better styling. ### Detailed summary - Renamed `TeamHeaderLoggedOut` to `HeaderLoggedOut` and updated its import paths. - Consolidated the header components for logged-out states. - Changed class names for styling consistency. - Refactored color mode toggle component to `ToggleThemeButton`. - Updated button variants and styles in several components. - Adjusted layout and spacing in various UI elements for improved design. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 78c9d2f commit aab3da0

File tree

9 files changed

+160
-181
lines changed

9 files changed

+160
-181
lines changed

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

Lines changed: 9 additions & 7 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

9-
export function ColorModeToggle() {
9+
export function ToggleThemeButton() {
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: 29 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { redirectToCheckout } from "@/actions/billing";
44
import { getRawAccountAction } from "@/actions/getAccount";
5-
import { ColorModeToggle } from "@/components/color-mode-toggle";
5+
import { ToggleThemeButton } from "@/components/color-mode-toggle";
66
import { Spinner } from "@/components/ui/Spinner/Spinner";
77
import { useThirdwebClient } from "@/constants/thirdweb.client";
88
import { useDashboardRouter } from "@/lib/DashboardRouter";
@@ -49,38 +49,39 @@ 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-
83-
<ColorModeToggle />
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>
84+
<ToggleThemeButton />
8485
</div>
8586
</header>
8687
</div>
@@ -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/nebula-app/login/NebulaLoginPage.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
"use client";
22

3+
import { ToggleThemeButton } from "@/components/color-mode-toggle";
4+
import { Button } from "@/components/ui/button";
5+
import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
36
import Link from "next/link";
47
import { useState } from "react";
58
import { EmptyStateChatPageContent } from "../(app)/components/EmptyStateChatPageContent";
69
import { NebulaIcon } from "../(app)/icons/NebulaIcon";
7-
import { Button } from "../../../@/components/ui/button";
8-
import type { Account } from "../../../@3rdweb-sdk/react/hooks/useApi";
910
import { LoginAndOnboardingPageContent } from "../../login/LoginPage";
1011

1112
export function NebulaLoginPage(props: {
@@ -18,11 +19,13 @@ export function NebulaLoginPage(props: {
1819
return (
1920
<div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
2021
{/* nav */}
21-
<header className="border-b">
22+
<header className="border-b bg-card">
2223
<div className="container flex items-center justify-between p-4">
2324
<NebulaIcon className="size-8 shrink-0 text-foreground" />
2425

25-
<div className="flex items-center gap-7">
26+
<div className="flex items-center gap-6">
27+
<ToggleThemeButton />
28+
2629
<Link
2730
href="https://thirdweb.com/support"
2831
className="text-muted-foreground text-sm hover:text-foreground"

‎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
);

0 commit comments

Comments
 (0)