style(lovart-home): refine login modal size + darker overlay
This commit is contained in:
parent
ac6eeb14c7
commit
18e6e49627
@ -1235,27 +1235,27 @@ export function LovartHome({
|
||||
|
||||
{loginDialogOpen ? (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4 backdrop-blur-[1px]"
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-[1px]"
|
||||
onClick={() => setLoginDialogOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-[580px] rounded-[28px] bg-white p-8 shadow-2xl sm:p-10"
|
||||
className="w-full max-w-[460px] rounded-[24px] bg-white p-6 shadow-2xl sm:p-7"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{siteLogo ? (
|
||||
<img
|
||||
src={siteLogo}
|
||||
alt={siteName}
|
||||
className="h-8 w-8 rounded-full object-cover"
|
||||
className="h-7 w-7 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-black text-white">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
)}
|
||||
<span className="text-[20px] font-semibold leading-none tracking-tight text-black">
|
||||
<span className="text-[18px] font-semibold leading-none tracking-tight text-black">
|
||||
{siteName}
|
||||
</span>
|
||||
</div>
|
||||
@ -1264,13 +1264,13 @@ export function LovartHome({
|
||||
className="rounded-full p-1 text-black/45 hover:bg-black/5 hover:text-black/70"
|
||||
onClick={() => setLoginDialogOpen(false)}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-7 text-center">
|
||||
<h3 className="text-[22px] font-semibold text-black">欢迎来到 {siteName}</h3>
|
||||
<p className="mt-2 text-sm text-black/45">登录或注册以继续</p>
|
||||
<div className="mb-5 text-center">
|
||||
<h3 className="text-[18px] font-semibold text-black">欢迎来到 {siteName}</h3>
|
||||
<p className="mt-2 text-[13px] text-black/45">登录或注册以继续</p>
|
||||
</div>
|
||||
|
||||
{hasThirdPartyLoginOptions ? (
|
||||
@ -1278,7 +1278,7 @@ export function LovartHome({
|
||||
{canUseGoogleLogin ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-14 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[18px] font-medium text-black hover:bg-black/[0.03]"
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[15px] font-medium text-black hover:bg-black/[0.03]"
|
||||
onClick={handleGoogleLogin}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
|
||||
@ -1293,7 +1293,7 @@ export function LovartHome({
|
||||
{canUseDingTalkLogin ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-14 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[18px] font-medium text-black hover:bg-black/[0.03]"
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-black/10 text-[15px] font-medium text-black hover:bg-black/[0.03]"
|
||||
onClick={handleDingTalkLogin}
|
||||
>
|
||||
使用钉钉
|
||||
@ -1315,18 +1315,18 @@ export function LovartHome({
|
||||
onChange={(event) => setLoginEmail(event.target.value)}
|
||||
placeholder="电子邮箱"
|
||||
type="email"
|
||||
className="h-14 rounded-xl border-black/20 px-4 text-base"
|
||||
className="h-12 rounded-xl border-black/20 px-3.5 text-[14px]"
|
||||
/>
|
||||
<Input
|
||||
value={loginPassword}
|
||||
onChange={(event) => setLoginPassword(event.target.value)}
|
||||
placeholder="密码"
|
||||
type="password"
|
||||
className="h-14 rounded-xl border-black/20 px-4 text-base"
|
||||
className="h-12 rounded-xl border-black/20 px-3.5 text-[14px]"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="mt-1 h-14 w-full rounded-xl bg-black text-[17px] text-white hover:bg-black/90"
|
||||
className="mt-1 h-12 w-full rounded-xl bg-black text-[15px] text-white hover:bg-black/90"
|
||||
disabled={isLoggingIn}
|
||||
>
|
||||
{isLoggingIn ? (
|
||||
@ -1340,7 +1340,7 @@ export function LovartHome({
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="mt-5 text-center text-xs text-black/40">
|
||||
<p className="mt-4 text-center text-xs text-black/40">
|
||||
继续即表示您同意使用条款和隐私政策
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user