devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases 1 Wiki Activity

fix: JoinPage design polish — broken divider token, width/padding/label/hover consistency

Browse Source
This commit is contained in:
Jannis Braun
2026-03-13 04:10:18 +01:00
parent fed2a64d3f
commit 759f4c11ab
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/JoinPage.tsx
+14 -14
View File
@@ -214,7 +214,7 @@ export function JoinPage() {
return ( return (
<div className="min-h-screen flex items-center justify-center bg-surface-base relative"> <div className="min-h-screen flex items-center justify-center bg-surface-base relative">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(124,108,246,0.06)_0%,transparent_50%)]" /> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(124,108,246,0.06)_0%,transparent_50%)]" />
<div className="w-full max-w-[420px] bg-surface-elevated rounded-md p-8 shadow-elevation-high relative z-10 text-center"> <div className="w-full max-w-[480px] bg-surface-elevated rounded-md p-8 shadow-elevation-high relative z-10 text-center">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-accent-rose/10 flex items-center justify-center"> <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-accent-rose/10 flex items-center justify-center">
<svg className="w-8 h-8 text-accent-rose" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}> <svg className="w-8 h-8 text-accent-rose" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
@@ -248,7 +248,7 @@ export function JoinPage() {
return ( return (
<div className="min-h-screen flex items-center justify-center bg-surface-base relative"> <div className="min-h-screen flex items-center justify-center bg-surface-base relative">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(124,108,246,0.06)_0%,transparent_50%)]" /> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(124,108,246,0.06)_0%,transparent_50%)]" />
<div className="w-full max-w-[420px] bg-surface-elevated rounded-md p-8 shadow-elevation-high relative z-10"> <div className="w-full max-w-[480px] bg-surface-elevated rounded-md p-8 shadow-elevation-high relative z-10">
{/* Space preview */} {/* Space preview */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
@@ -342,22 +342,22 @@ export function JoinPage() {
</Link> </Link>
<Link <Link
to={`/register${redirectParam}`} to={`/register${redirectParam}`}
className="block w-full py-2.5 bg-surface-input hover:bg-surface-input/80 text-txt-primary font-medium rounded transition-colors text-center" className="block w-full py-2.5 bg-surface-input hover:bg-surface-elevated text-txt-primary font-medium rounded transition-colors text-center"
> >
Create an account Create an account
</Link> </Link>
{/* Divider */} {/* Divider */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex-1 h-px bg-border-subtle" /> <div className="flex-1 h-px bg-border-soft" />
<span className="text-xs text-txt-tertiary">or</span> <span className="text-xs text-txt-tertiary">or</span>
<div className="flex-1 h-px bg-border-subtle" /> <div className="flex-1 h-px bg-border-soft" />
</div> </div>
<button <button
type="button" type="button"
onClick={() => { setPhase('other-instance'); setError(''); }} onClick={() => { setPhase('other-instance'); setError(''); }}
className="block w-full py-2.5 bg-surface-input hover:bg-surface-input/80 text-txt-primary font-medium rounded transition-colors text-center" className="block w-full py-2.5 bg-surface-input hover:bg-surface-elevated text-txt-primary font-medium rounded transition-colors text-center"
> >
I use another instance I use another instance
</button> </button>
@@ -378,7 +378,7 @@ export function JoinPage() {
value={otherDomain} value={otherDomain}
onChange={(e) => setOtherDomain(e.target.value)} onChange={(e) => setOtherDomain(e.target.value)}
placeholder="e.g. my-instance.com" placeholder="e.g. my-instance.com"
className="flex-1 px-3 py-2 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary" className="flex-1 px-3 py-2.5 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary"
autoFocus autoFocus
/> />
<button <button
@@ -422,15 +422,15 @@ export function JoinPage() {
Connecting to <span className="text-txt-secondary font-medium">{hostDisplay}</span> Connecting to <span className="text-txt-secondary font-medium">{hostDisplay}</span>
</p> </p>
<div className="mb-4"> <div className="mb-4">
<label className="block text-xs text-txt-tertiary mb-1"> <label className="block text-xs font-bold text-txt-secondary uppercase mb-1.5">
Enter your password to connect Password
</label> </label>
<input <input
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Your account password" placeholder="Your account password"
className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary" className="w-full px-3 py-2.5 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary"
disabled={isJoining} disabled={isJoining}
autoFocus autoFocus
/> />
@@ -470,24 +470,24 @@ export function JoinPage() {
</div> </div>
<div className="mb-4 space-y-3"> <div className="mb-4 space-y-3">
<div> <div>
<label className="block text-xs text-txt-tertiary mb-1">Username</label> <label className="block text-xs font-bold text-txt-secondary uppercase mb-1.5">Username</label>
<input <input
type="text" type="text"
value={fallbackUsername} value={fallbackUsername}
onChange={(e) => setFallbackUsername(e.target.value)} onChange={(e) => setFallbackUsername(e.target.value)}
placeholder="Your username on this instance" placeholder="Your username on this instance"
className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary" className="w-full px-3 py-2.5 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary"
disabled={isJoining} disabled={isJoining}
/> />
</div> </div>
<div> <div>
<label className="block text-xs text-txt-tertiary mb-1">Password for this instance</label> <label className="block text-xs font-bold text-txt-secondary uppercase mb-1.5">Password for this instance</label>
<input <input
type="password" type="password"
value={fallbackPassword} value={fallbackPassword}
onChange={(e) => setFallbackPassword(e.target.value)} onChange={(e) => setFallbackPassword(e.target.value)}
placeholder="Password on the remote instance" placeholder="Password on the remote instance"
className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary" className="w-full px-3 py-2.5 bg-surface-input rounded text-txt-primary text-sm outline-none focus:ring-2 focus:ring-accent-primary"
disabled={isJoining} disabled={isJoining}
autoFocus autoFocus
/> />