Hide sign up button on mobile top bar when signed out; add "Join" label to FAB

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy
2026-02-17 03:25:36 -06:00
parent edea0eb013
commit 7c1914eab4
2 changed files with 4 additions and 7 deletions
+2 -2
View File
@@ -29,10 +29,10 @@ export function FloatingComposeButton() {
<>
<Button
onClick={() => setSignupOpen(true)}
className="fixed bottom-20 right-4 z-30 sidebar:hidden size-14 rounded-full shadow-lg bg-primary hover:bg-primary/90 text-primary-foreground"
size="icon"
className="fixed bottom-20 right-4 z-30 sidebar:hidden h-14 px-5 rounded-full shadow-lg bg-primary hover:bg-primary/90 text-primary-foreground flex items-center gap-2"
>
<UserPlus className="size-6" />
<span className="text-base font-bold">Join</span>
</Button>
<SignupDialog isOpen={signupOpen} onClose={() => setSignupOpen(false)} />
</>
+2 -5
View File
@@ -1,7 +1,6 @@
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { MewLogo } from '@/components/MewLogo';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { LoginArea } from '@/components/auth/LoginArea';
interface MobileTopBarProps {
onAvatarClick: () => void;
@@ -12,9 +11,9 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
return (
<header className="sticky top-0 z-20 flex items-center px-3 h-10 bg-background/80 backdrop-blur-md border-b border-border sidebar:hidden">
{/* Left: user avatar or login */}
{/* Left: user avatar (empty when signed out) */}
<div className="flex items-center justify-center w-7 shrink-0">
{user ? (
{user && (
<button onClick={onAvatarClick} className="rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-background">
<Avatar className="size-7">
<AvatarImage src={metadata?.picture} alt={metadata?.name} />
@@ -23,8 +22,6 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
</AvatarFallback>
</Avatar>
</button>
) : (
<LoginArea className="scale-75 origin-left" />
)}
</div>