fix: minor improves

This commit is contained in:
reya 2024-01-31 14:20:03 +07:00
parent 0539c5649d
commit 21989e6fa5
3 changed files with 50 additions and 16 deletions

View File

@ -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>

View File

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

View File

@ -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" />