Skip to content

Commit 0530acd

Browse files
ianthirdwebianthirdweb
committed
Fit for mobile
1 parent 90ac1d0 commit 0530acd

File tree

2 files changed

+54
-22
lines changed

2 files changed

+54
-22
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import { useTheme } from "next-themes";
99
import { useSearchParams } from "next/navigation";
1010
import { Suspense, useEffect, useState } from "react";
1111
import { ConnectEmbed } from "thirdweb/react";
12+
import { getProfiles } from "thirdweb/wallets";
1213
import { getCookie } from "../../stores/SyncStoreToCookies";
1314
import { ThirdwebMiniLogo } from "../components/ThirdwebMiniLogo";
1415
import { getSDKTheme } from "../components/sdk-component-theme";
1516
import { doLogin, doLogout, getLoginPayload, isLoggedIn } from "./auth-actions";
16-
import { getProfiles } from "thirdweb/wallets";
1717

1818
export default function LoginPage() {
1919
return (

‎apps/dashboard/src/app/onboarding/page.tsx‎

Lines changed: 53 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import { Button } from "@/components/ui/button";
33
import { Card, CardContent } from "@/components/ui/card";
4+
import { Checkbox } from "@/components/ui/checkbox";
45
import {
56
Form,
67
FormControl,
@@ -21,7 +22,6 @@ import {
2122
} from "@/components/ui/select";
2223
import { cn } from "@/lib/utils";
2324
import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
24-
import { Checkbox } from "@/components/ui/checkbox";
2525
import { zodResolver } from "@hookform/resolvers/zod";
2626
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
2727
import { RadioGroup } from "@radix-ui/react-radio-group";
@@ -220,14 +220,34 @@ export default function OnboardingPage({
220220
<div className="absolute right-0 bottom-0 left-0 box-border flex w-full items-center justify-between overflow-auto p-12">
221221
{/* Stepper */}
222222
<div className="flex space-x-4">
223+
{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
223224
<div
225+
key={"step-2"}
226+
onClick={() => {
227+
if (step > 2) {
228+
setDirection(-1);
229+
} else {
230+
setDirection(1);
231+
}
232+
setStep(2);
233+
}}
224234
className={
225235
step === 2
226236
? "h-3 w-12 rounded-md bg-white transition ease-in-out"
227237
: "h-3 w-12 rounded-md bg-secondary transition ease-in-out"
228238
}
229239
/>
240+
{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
230241
<div
242+
key={"step-3"}
243+
onClick={() => {
244+
if (step > 3) {
245+
setDirection(-1);
246+
} else {
247+
setDirection(1);
248+
}
249+
setStep(3);
250+
}}
231251
className={
232252
step === 3
233253
? "h-3 w-12 rounded-md bg-white transition ease-in-out"
@@ -236,23 +256,35 @@ export default function OnboardingPage({
236256
/>
237257
</div>
238258
<div className="flex space-x-4">
239-
{step > 1 && (
259+
{step < 3 && (
240260
<Button
241261
type="button"
242262
variant="secondary"
243263
onClick={() => {
244-
setDirection(-1);
245-
setStep(step - 1);
264+
setDirection(1);
265+
setStep(step + 1);
246266
}}
247267
>
248-
Back
268+
Skip
249269
</Button>
250270
)}
251271
{step < 3 && (
252272
<Button type="button" variant="primary" onClick={nextStep}>
253273
Next
254274
</Button>
255275
)}
276+
{step === 3 && (
277+
<Button
278+
type="button"
279+
variant="secondary"
280+
onClick={() => {
281+
setDirection(-1);
282+
setStep(step - 1);
283+
}}
284+
>
285+
Back
286+
</Button>
287+
)}
256288
{step === 3 && (
257289
<Button
258290
type="submit"
@@ -293,7 +325,7 @@ export default function OnboardingPage({
293325
<FormLabel>What's your email?</FormLabel>
294326
<FormControl>
295327
<Input
296-
className="w-1/2"
328+
className="w-1/2 min-w-[250px]"
297329
{...field}
298330
id="email"
299331
type="email"
@@ -307,7 +339,7 @@ export default function OnboardingPage({
307339
);
308340

309341
const Step2: React.FC<StepProps> = ({ register }) => (
310-
<div className="flex flex-col space-y-8">
342+
<div className="flex max-h-[450px] flex-col space-y-8 overflow-y-scroll sm:max-h-full">
311343
{/* User Type */}
312344
<FormField
313345
name="userType"
@@ -317,12 +349,12 @@ export default function OnboardingPage({
317349
<FormControl>
318350
<RadioGroup
319351
defaultValue={form.getValues("userType")}
320-
className="flex space-x-4"
352+
className="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0"
321353
onValueChange={(value) => form.setValue("userType", value)}
322354
>
323355
<RadioGroupItemButton
324356
value="Developer"
325-
className="aspect-square max-w-[180px] rounded-xl border border-foreground/25 p-4 hover:border-foreground"
357+
className="w-full items-center justify-center rounded-xl border border-foreground/25 p-4 hover:border-foreground sm:aspect-square sm:max-w-[180px]"
326358
>
327359
<div className="flex flex-col items-center justify-center space-y-2">
328360
<Users2 className="size-8" />
@@ -336,7 +368,7 @@ export default function OnboardingPage({
336368
</RadioGroupItemButton>
337369
<RadioGroupItemButton
338370
value="Studio"
339-
className="aspect-square max-w-[180px] rounded-xl border border-foreground/25 p-4 hover:border-foreground"
371+
className="w-full items-center justify-center rounded-xl border border-foreground/25 p-4 hover:border-foreground sm:aspect-square sm:max-w-[180px]"
340372
>
341373
<div className="flex flex-col items-center justify-center space-y-2">
342374
<Building className="size-8" />
@@ -360,7 +392,7 @@ export default function OnboardingPage({
360392
<FormLabel>What's the name of your company?</FormLabel>
361393
<FormControl className="flex flex-col space-y-2">
362394
<Input
363-
className="w-1/2"
395+
className="w-1/2 min-w-[250px]"
364396
id="name"
365397
type="text"
366398
placeholder="Hooli, Inc."
@@ -386,7 +418,7 @@ export default function OnboardingPage({
386418
form.setValue("role", value);
387419
}}
388420
>
389-
<SelectTrigger id="role" className="w-1/2">
421+
<SelectTrigger id="role" className="w-1/2 min-w-[250px]">
390422
<SelectValue placeholder={"Select Role"} />
391423
</SelectTrigger>
392424
<SelectContent>
@@ -429,7 +461,7 @@ export default function OnboardingPage({
429461
form.setValue("industry", value);
430462
}}
431463
>
432-
<SelectTrigger className="w-1/2">
464+
<SelectTrigger className="w-1/2 min-w-[250px]">
433465
<SelectValue placeholder={"Select Industry"} />
434466
</SelectTrigger>
435467
<SelectContent>
@@ -474,15 +506,15 @@ export default function OnboardingPage({
474506
<Card
475507
key={interest.key}
476508
className={cn(
477-
"flex aspect-[4/3] cursor-pointer flex-col items-start justify-start space-y-1 p-4 transition-colors hover:bg-muted md:aspect-[16/9]",
509+
"no-scrollbar flex aspect-[4/3] cursor-pointer flex-col items-start justify-start space-y-1 p-4 transition-colors hover:bg-muted md:aspect-[16/9]",
478510
isChecked && "border-primary bg-muted",
479511
)}
480512
onClick={(event) => {
481513
event.preventDefault(); // Prevent default behavior
482514
const newInterests = isChecked
483515
? checkedInterests.filter(
484-
(key) => key !== interest.key,
485-
)
516+
(key) => key !== interest.key,
517+
)
486518
: [...checkedInterests, interest.key];
487519
form.setValue("interests", newInterests);
488520
}}
@@ -523,10 +555,10 @@ export default function OnboardingPage({
523555
};
524556

525557
return (
526-
<div className="relative flex flex-col place-items-center bg-muted/30 md:flex-row">
527-
<main className="z-10 flex w-full gap-6">
558+
<div className="relative flex place-items-center bg-muted/30">
559+
<main className="z-10 flex w-full flex-col-reverse gap-6 md:flex-row">
528560
{/* Left Panel */}
529-
<div className="items-between relative box-border flex h-screen w-full flex-col overflow-hidden p-12 lg:w-1/2">
561+
<div className="items-between relative box-border flex h-[75vh] w-full flex-col overflow-hidden p-4 md:h-screen md:w-1/2 md:p-12">
530562
<div className="flex flex-col space-y-2">
531563
<h1 className="font-semibold text-xl tracking-tight">
532564
{step === 3 ? "Tell us what you need." : "Tell us about you."}
@@ -556,7 +588,7 @@ export default function OnboardingPage({
556588
<Footer />
557589
</div>
558590
{/* Right Panel */}
559-
<div className="flex h-screen w-1/2 animate-gradient-x flex-col items-center justify-center bg-gradient-to-r from-[#25369F] via-[#290259] to-[#3E0D45]">
591+
<div className="flex h-[25vh] w-full animate-gradient-x flex-col items-center justify-center bg-gradient-to-r from-[#25369F] via-[#290259] to-[#3E0D45] md:h-screen md:w-1/2">
560592
<Card className="flex w-[300px] items-center rounded-xl border-muted transition-all ">
561593
<CardContent className="flex items-center space-x-4 p-4">
562594
{form.getValues("userType") ? (
@@ -574,7 +606,7 @@ export default function OnboardingPage({
574606
</div>
575607
)}
576608
<div className="flex flex-col">
577-
<h5 className="font-regular font-sm text-white">
609+
<h5 className="max-w-[200px] truncate font-regular font-sm text-white">
578610
{form.getValues("email")
579611
? form.getValues("email")
580612
: accountQuery.data?.creatorWalletAddress

0 commit comments

Comments
 (0)