fix: minor improves

lumehq · Jan 31, 2024 · 21989e6 · 21989e6
1 parent 0539c56
commit 21989e6
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 16 deletions.
diff --git a/apps/desktop/src/routes/auth/create.tsx b/apps/desktop/src/routes/auth/create.tsx
@@ -36,7 +36,9 @@ export function CreateAccountScreen() {
 						onClick={() => setMethod("self")}
 						className={cn(
 							"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
-							method === "self" ? "ring-1 ring-teal-500" : "",
+							method === "self"
+								? "ring-1 ring-offset-4 ring-offset-black ring-blue-500"
+								: "",
 						)}
 					>
 						<p className="font-semibold">{t("signup.selfManageMethod")}</p>
@@ -49,25 +51,57 @@ export function CreateAccountScreen() {
 						onClick={() => setMethod("managed")}
 						className={cn(
 							"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
-							method === "managed" ? "ring-1 ring-teal-500" : "",
+							method === "managed"
+								? "ring-1 ring-offset-4 ring-offset-black ring-blue-500"
+								: "",
 						)}
 					>
-						<p className="font-semibold">{t("signup.providerMethod")}</p>
+						<div className="inline-flex items-center gap-2">
+							<p className="font-semibold">{t("signup.providerMethod")}</p>
+							<span className="text-xs font-medium px-2.5 py-0.5 rounded-full bg-gradient-to-tr from-blue-300 via-sky-500 to-teal-200">
+								Beta
+							</span>
+						</div>
 						<p className="text-sm font-medium text-neutral-500">
 							{t("signup.providerMethodDescription")}
 						</p>
 					</button>
-					<button
-						type="button"
-						onClick={next}
-						className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
-					>
-						{loading ? (
-							<LoaderIcon className="size-5 animate-spin" />
-						) : (
-							t("global.continue")
-						)}
-					</button>
+					<div className="flex flex-col gap-3">
+						<button
+							type="button"
+							onClick={next}
+							className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
+						>
+							{loading ? (
+								<LoaderIcon className="size-5 animate-spin" />
+							) : (
+								t("global.continue")
+							)}
+						</button>
+						{method === "managed" ? (
+							<div className="flex flex-col gap-1 text-sm text-neutral-500">
+								<p className="text-sm font-semibold text-neutral-300">
+									Attention:
+								</p>
+								<p>
+									You're chosing Managed by Provider, this feature still in
+									"Beta".
+								</p>
+								<p>
+									Some functions still missing or not work as expected, you
+									shouldn't create your main account with this method
+								</p>
+								<a
+									href="https://github.com/kind-0/nsecbunkerd/blob/master/OAUTH-LIKE-FLOW.md"
+									target="_blank"
+									rel="noreferrer"
+									className="text-blue-500"
+								>
+									Learn more
+								</a>
+							</div>
+						) : null}
+					</div>
 				</div>
 			</div>
 		</div>

diff --git a/packages/ark/src/components/user/name.tsx b/packages/ark/src/components/user/name.tsx
@@ -16,7 +16,7 @@ export function UserName({ className }: { className?: string }) {
 	}
 
 	return (
-		<div className={cn("truncate", className)}>
+		<div className={cn("max-w-[12rem] truncate", className)}>
 			{user.displayName || user.name || "Anon"}
 		</div>
 	);

diff --git a/packages/ui/src/search/dialog.tsx b/packages/ui/src/search/dialog.tsx
@@ -159,7 +159,7 @@ export function SearchDialog() {
 						</Command.Group>
 					</>
 				)}
-				{!loading ? (
+				{!loading && !events.length ? (
 					<div className="h-full flex items-center justify-center flex-col gap-3">
 						<div className="size-16 bg-blue-100 dark:bg-blue-900 rounded-full inline-flex items-center justify-center text-blue-500">
 							<SearchIcon className="size-6" />