fix(web): hide login button when logged out to fix header icon alignment
未登录时 UserChip 的登录按钮使用了深色背景配色(cream-50 色系), 在首页浅色背景上不可见但仍占据约 60px 宽度,导致齿轮/GitHub/X 图标被推离右边缘。改为未登录时不渲染 UserChip,登录入口保留在 开始游戏等需要认证的操作流程中。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -1666,7 +1666,7 @@ export default function HomePage() {
|
|||||||
>
|
>
|
||||||
<i className="fa-brands fa-x-twitter" />
|
<i className="fa-brands fa-x-twitter" />
|
||||||
</a>
|
</a>
|
||||||
<UserChip onLoginClick={() => setAuthModalOpen(true)} />
|
<UserChip />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -2574,7 +2574,7 @@ function PlayInner() {
|
|||||||
<span className="text-clay-300">·</span>
|
<span className="text-clay-300">·</span>
|
||||||
<span>{String(beatCount).padStart(3, "0")} · 拍</span>
|
<span>{String(beatCount).padStart(3, "0")} · 拍</span>
|
||||||
</div>
|
</div>
|
||||||
<UserChip onLoginClick={() => setAuthModalOpen(true)} />
|
<UserChip />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
+2
-19
@@ -5,11 +5,7 @@ import { AUTH_ENABLED } from "@/lib/supabase/config";
|
|||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
import type { AuthChangeEvent, Session, User } from "@supabase/supabase-js";
|
import type { AuthChangeEvent, Session, User } from "@supabase/supabase-js";
|
||||||
|
|
||||||
export function UserChip({
|
export function UserChip() {
|
||||||
onLoginClick,
|
|
||||||
}: {
|
|
||||||
onLoginClick: () => void;
|
|
||||||
}) {
|
|
||||||
const [user, setUser] = useState<User | null>(null);
|
const [user, setUser] = useState<User | null>(null);
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
|
|
||||||
@@ -32,20 +28,7 @@ export function UserChip({
|
|||||||
setMenuOpen(false);
|
setMenuOpen(false);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (!AUTH_ENABLED) return null;
|
if (!AUTH_ENABLED || !user) return null;
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onLoginClick}
|
|
||||||
className="flex items-center gap-1.5 rounded-full border border-cream-50/15 bg-cream-50/[0.06] px-3 py-1.5 text-[11px] text-cream-50/70 transition-colors hover:bg-cream-50/[0.12] hover:text-cream-50/90"
|
|
||||||
>
|
|
||||||
<i className="fa-solid fa-right-to-bracket text-[10px]" />
|
|
||||||
登录
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const label =
|
const label =
|
||||||
user.user_metadata?.full_name ??
|
user.user_metadata?.full_name ??
|
||||||
|
|||||||
Reference in New Issue
Block a user