fix: some screen too large
This commit is contained in:
reya
@@ -1,4 +1,4 @@
|
|||||||
import { Box, Container } from "@lume/ui";
|
import { Container } from "@lume/ui";
|
||||||
import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
|
import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/auth")({
|
export const Route = createLazyFileRoute("/auth")({
|
||||||
@@ -8,9 +8,9 @@ export const Route = createLazyFileRoute("/auth")({
|
|||||||
function Screen() {
|
function Screen() {
|
||||||
return (
|
return (
|
||||||
<Container withDrag>
|
<Container withDrag>
|
||||||
<Box className="px-3 pt-3">
|
<div className="max-w-sm mx-auto size-full">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</Box>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -55,83 +55,81 @@ function Screen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
|
<div className="flex flex-col items-center justify-center size-full gap-4">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="text-xl font-semibold">Let's set up your profile.</h3>
|
<h3 className="text-xl font-semibold">Let's set up your profile.</h3>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<form onSubmit={handleSubmit(onSubmit)} className="w-full mb-0">
|
||||||
<div className="relative rounded-full size-24 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
|
<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
|
||||||
{picture ? (
|
<div className="self-center relative rounded-full size-20 bg-neutral-200 dark:bg-white/70 my-3">
|
||||||
<img
|
{picture ? (
|
||||||
src={picture}
|
<img
|
||||||
alt="avatar"
|
src={picture}
|
||||||
loading="lazy"
|
alt="avatar"
|
||||||
decoding="async"
|
loading="lazy"
|
||||||
className="absolute inset-0 z-10 object-cover w-full h-full rounded-full"
|
decoding="async"
|
||||||
|
className="absolute inset-0 z-10 object-cover w-full h-full rounded-full"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<AvatarUploader
|
||||||
|
setPicture={setPicture}
|
||||||
|
className="absolute inset-0 z-20 flex items-center justify-center w-full h-full text-white rounded-full dark:text-black bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
||||||
|
>
|
||||||
|
<PlusIcon className="size-8" />
|
||||||
|
</AvatarUploader>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label htmlFor="display_name" className="font-medium">
|
||||||
|
Display Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={"text"}
|
||||||
|
{...register("display_name", { required: true, minLength: 1 })}
|
||||||
|
placeholder="e.g. Alice in Nostrland"
|
||||||
|
spellCheck={false}
|
||||||
|
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
||||||
/>
|
/>
|
||||||
) : null}
|
</div>
|
||||||
<AvatarUploader
|
<div className="flex flex-col gap-1">
|
||||||
setPicture={setPicture}
|
<label htmlFor="name" className="font-medium">
|
||||||
className="absolute inset-0 z-20 flex items-center justify-center w-full h-full text-white rounded-full dark:text-black bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
Name
|
||||||
>
|
</label>
|
||||||
<PlusIcon className="size-8" />
|
<input
|
||||||
</AvatarUploader>
|
type={"text"}
|
||||||
</div>
|
{...register("name")}
|
||||||
</div>
|
placeholder="e.g. alice"
|
||||||
<form
|
spellCheck={false}
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
||||||
className="flex flex-col w-full gap-3"
|
/>
|
||||||
>
|
</div>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label htmlFor="display_name" className="font-medium">
|
<label htmlFor="about" className="font-medium">
|
||||||
Display Name *
|
Bio
|
||||||
</label>
|
</label>
|
||||||
<input
|
<textarea
|
||||||
type={"text"}
|
{...register("about")}
|
||||||
{...register("display_name", { required: true, minLength: 1 })}
|
placeholder="e.g. Artist, anime-lover, and k-pop fan"
|
||||||
placeholder="e.g. Alice in Nostrland"
|
spellCheck={false}
|
||||||
spellCheck={false}
|
className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
||||||
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<div className="flex flex-col gap-1">
|
||||||
<div className="flex flex-col gap-1">
|
<label htmlFor="website" className="font-medium">
|
||||||
<label htmlFor="name" className="font-medium">
|
Website
|
||||||
Name
|
</label>
|
||||||
</label>
|
<input
|
||||||
<input
|
type="url"
|
||||||
type={"text"}
|
{...register("website")}
|
||||||
{...register("name")}
|
placeholder="e.g. https://alice.me"
|
||||||
placeholder="e.g. alice"
|
spellCheck={false}
|
||||||
spellCheck={false}
|
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
||||||
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label htmlFor="about" className="font-medium">
|
|
||||||
Bio
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
{...register("about")}
|
|
||||||
placeholder="e.g. Artist, anime-lover, and k-pop fan"
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label htmlFor="website" className="font-medium">
|
|
||||||
Website
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
{...register("website")}
|
|
||||||
placeholder="e.g. https://alice.me"
|
|
||||||
spellCheck={false}
|
|
||||||
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
disabled={loading}
|
||||||
|
className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? <Spinner /> : "Continue"}
|
{loading ? <Spinner /> : "Continue"}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -38,47 +38,49 @@ function Screen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
|
<div className="flex flex-col items-center justify-center size-full gap-4">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="text-xl font-semibold">Continue with Private Key</h3>
|
<h3 className="text-xl font-semibold">Continue with Private Key</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col w-full gap-3">
|
<div className="flex flex-col w-full">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
|
||||||
<label
|
<div className="flex flex-col gap-1">
|
||||||
htmlFor="key"
|
<label
|
||||||
className="font-medium text-neutral-900 dark:text-neutral-100"
|
htmlFor="key"
|
||||||
>
|
className="font-medium text-neutral-900 dark:text-neutral-100"
|
||||||
Private Key
|
>
|
||||||
</label>
|
Private Key
|
||||||
<input
|
</label>
|
||||||
name="key"
|
<input
|
||||||
type="text"
|
name="key"
|
||||||
placeholder="nsec or ncryptsec..."
|
type="text"
|
||||||
value={key}
|
placeholder="nsec or ncryptsec..."
|
||||||
onChange={(e) => setKey(e.target.value)}
|
value={key}
|
||||||
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
onChange={(e) => setKey(e.target.value)}
|
||||||
/>
|
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
||||||
</div>
|
/>
|
||||||
<div className="flex flex-col gap-1">
|
</div>
|
||||||
<label
|
<div className="flex flex-col gap-1">
|
||||||
htmlFor="password"
|
<label
|
||||||
className="font-medium text-neutral-900 dark:text-neutral-100"
|
htmlFor="password"
|
||||||
>
|
className="font-medium text-neutral-900 dark:text-neutral-100"
|
||||||
Password (Optional)
|
>
|
||||||
</label>
|
Password (Optional)
|
||||||
<input
|
</label>
|
||||||
name="password"
|
<input
|
||||||
type="password"
|
name="password"
|
||||||
value={password}
|
type="password"
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
value={password}
|
||||||
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
/>
|
className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? <Spinner /> : "Login"}
|
{loading ? <Spinner /> : "Login"}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -37,12 +37,12 @@ function Screen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
|
<div className="flex flex-col items-center justify-center size-full gap-4">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="text-xl font-semibold">Continue with Nostr Connect</h3>
|
<h3 className="text-xl font-semibold">Continue with Nostr Connect</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col w-full gap-3">
|
<div className="flex flex-col w-full">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
|
||||||
<label
|
<label
|
||||||
htmlFor="uri"
|
htmlFor="uri"
|
||||||
className="font-medium text-neutral-900 dark:text-neutral-100"
|
className="font-medium text-neutral-900 dark:text-neutral-100"
|
||||||
@@ -63,7 +63,7 @@ function Screen() {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? <Spinner /> : "Login"}
|
{loading ? <Spinner /> : "Login"}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -65,9 +65,9 @@ function Screen() {
|
|||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
className="absolute top-0 left-0 h-14 w-full"
|
className="absolute top-0 left-0 h-14 w-full"
|
||||||
/>
|
/>
|
||||||
<div className="flex items-end justify-center flex-1 w-full px-4 pb-10">
|
<div className="flex items-end justify-center flex-1 w-full px-4 pb-4">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h2 className="text-2xl font-semibold">Customize Bootstrap Relays</h2>
|
<h2 className="text-xl font-semibold">Customize Bootstrap Relays</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center flex-1 w-full">
|
<div className="flex flex-col items-center flex-1 w-full">
|
||||||
|
|||||||
Reference in New Issue
Block a user