From 5d12ba7216d7ce814f90af67de22333882019dca Mon Sep 17 00:00:00 2001
From: reya <123083837+reyamir@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:36:54 +0700
Subject: [PATCH] fix: some screen too large

---
 apps/desktop2/src/routes/auth.lazy.tsx        |   6 +-
 .../src/routes/auth/create-profile.tsx        | 138 +++++++++---------
 apps/desktop2/src/routes/auth/import.lazy.tsx |  68 ++++-----
 apps/desktop2/src/routes/auth/remote.lazy.tsx |   8 +-
 apps/desktop2/src/routes/bootstrap-relays.tsx |   4 +-
 5 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/apps/desktop2/src/routes/auth.lazy.tsx b/apps/desktop2/src/routes/auth.lazy.tsx
index 0b2c36c6..a708e347 100644
--- a/apps/desktop2/src/routes/auth.lazy.tsx
+++ b/apps/desktop2/src/routes/auth.lazy.tsx
@@ -1,4 +1,4 @@
-import { Box, Container } from "@lume/ui";
+import { Container } from "@lume/ui";
 import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
 
 export const Route = createLazyFileRoute("/auth")({
@@ -8,9 +8,9 @@ export const Route = createLazyFileRoute("/auth")({
 function Screen() {
 	return (
 		<Container withDrag>
-			<Box className="px-3 pt-3">
+			<div className="max-w-sm mx-auto size-full">
 				<Outlet />
-			</Box>
+			</div>
 		</Container>
 	);
 }
diff --git a/apps/desktop2/src/routes/auth/create-profile.tsx b/apps/desktop2/src/routes/auth/create-profile.tsx
index 03dea685..ddb9b658 100644
--- a/apps/desktop2/src/routes/auth/create-profile.tsx
+++ b/apps/desktop2/src/routes/auth/create-profile.tsx
@@ -55,83 +55,81 @@ function Screen() {
 	};
 
 	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">
 				<h3 className="text-xl font-semibold">Let's set up your profile.</h3>
 			</div>
-			<div>
-				<div className="relative rounded-full size-24 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
-					{picture ? (
-						<img
-							src={picture}
-							alt="avatar"
-							loading="lazy"
-							decoding="async"
-							className="absolute inset-0 z-10 object-cover w-full h-full rounded-full"
+			<form onSubmit={handleSubmit(onSubmit)} className="w-full mb-0">
+				<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">
+					<div className="self-center relative rounded-full size-20 bg-neutral-200 dark:bg-white/70 my-3">
+						{picture ? (
+							<img
+								src={picture}
+								alt="avatar"
+								loading="lazy"
+								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}
-					<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>
-			<form
-				onSubmit={handleSubmit(onSubmit)}
-				className="flex flex-col w-full gap-3"
-			>
-				<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"
-					/>
-				</div>
-				<div className="flex flex-col gap-1">
-					<label htmlFor="name" className="font-medium">
-						Name
-					</label>
-					<input
-						type={"text"}
-						{...register("name")}
-						placeholder="e.g. alice"
-						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"
-					/>
-				</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 className="flex flex-col gap-1">
+						<label htmlFor="name" className="font-medium">
+							Name
+						</label>
+						<input
+							type={"text"}
+							{...register("name")}
+							placeholder="e.g. alice"
+							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"
+						/>
+					</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
 					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"}
 				</button>
diff --git a/apps/desktop2/src/routes/auth/import.lazy.tsx b/apps/desktop2/src/routes/auth/import.lazy.tsx
index e53f7efa..1bcadfb3 100644
--- a/apps/desktop2/src/routes/auth/import.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/import.lazy.tsx
@@ -38,47 +38,49 @@ function Screen() {
 	};
 
 	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">
 				<h3 className="text-xl font-semibold">Continue with Private Key</h3>
 			</div>
-			<div className="flex flex-col w-full gap-3">
-				<div className="flex flex-col gap-1">
-					<label
-						htmlFor="key"
-						className="font-medium text-neutral-900 dark:text-neutral-100"
-					>
-						Private Key
-					</label>
-					<input
-						name="key"
-						type="text"
-						placeholder="nsec or ncryptsec..."
-						value={key}
-						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">
-					<label
-						htmlFor="password"
-						className="font-medium text-neutral-900 dark:text-neutral-100"
-					>
-						Password (Optional)
-					</label>
-					<input
-						name="password"
-						type="password"
-						value={password}
-						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 className="flex flex-col w-full">
+				<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">
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="key"
+							className="font-medium text-neutral-900 dark:text-neutral-100"
+						>
+							Private Key
+						</label>
+						<input
+							name="key"
+							type="text"
+							placeholder="nsec or ncryptsec..."
+							value={key}
+							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">
+						<label
+							htmlFor="password"
+							className="font-medium text-neutral-900 dark:text-neutral-100"
+						>
+							Password (Optional)
+						</label>
+						<input
+							name="password"
+							type="password"
+							value={password}
+							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>
 				<button
 					type="button"
 					onClick={() => submit()}
 					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"}
 				</button>
diff --git a/apps/desktop2/src/routes/auth/remote.lazy.tsx b/apps/desktop2/src/routes/auth/remote.lazy.tsx
index 4d3f9e82..51779493 100644
--- a/apps/desktop2/src/routes/auth/remote.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/remote.lazy.tsx
@@ -37,12 +37,12 @@ function Screen() {
 	};
 
 	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">
 				<h3 className="text-xl font-semibold">Continue with Nostr Connect</h3>
 			</div>
-			<div className="flex flex-col w-full gap-3">
-				<div className="flex flex-col gap-1">
+			<div className="flex flex-col w-full">
+				<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
 						htmlFor="uri"
 						className="font-medium text-neutral-900 dark:text-neutral-100"
@@ -63,7 +63,7 @@ function Screen() {
 						type="button"
 						onClick={() => submit()}
 						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"}
 					</button>
diff --git a/apps/desktop2/src/routes/bootstrap-relays.tsx b/apps/desktop2/src/routes/bootstrap-relays.tsx
index 021551f6..2a6d7a21 100644
--- a/apps/desktop2/src/routes/bootstrap-relays.tsx
+++ b/apps/desktop2/src/routes/bootstrap-relays.tsx
@@ -65,9 +65,9 @@ function Screen() {
 				data-tauri-drag-region
 				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">
-					<h2 className="text-2xl font-semibold">Customize Bootstrap Relays</h2>
+					<h2 className="text-xl font-semibold">Customize Bootstrap Relays</h2>
 				</div>
 			</div>
 			<div className="flex flex-col items-center flex-1 w-full">