dnoulet/go-tell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change layout of login

Browse source
This commit is contained in:
Daniel Noulet 2026-09-19 18:43:40 +02:00
parent 911beb6720
commit 6063b18052
5 changed files with 17 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
ui/app/assets/background.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 254 KiB

17
ui/app/src/components/Shell.tsx
View file

@ -6,7 +6,7 @@ import {type DemoUser} from '../models'
import {SudoTerminal} from './SudoTerminal'
export function Shell({children}: {children: ReactNode}) {
const {authenticated, loading, canSignIn, signIn, username, sudo, signOut} = useAuth()
const {authenticated, loading, canSignIn, signIn, username, sudo} = useAuth()
const [sudoOpen, setSudoOpen] = useState(false)
const [helpOpen, setHelpOpen] = useState(false)
const [users, setUsers] = useState<DemoUser[]>([])
@ -23,16 +23,15 @@ export function Shell({children}: {children: ReactNode}) {
<Link className="brand" to="/content"><span className="brand-prompt">~/</span> Urpi's backlog
<span className="brand-cursor">_</span><small>linux · go · java · ideas</small></Link>
<div className="header-actions">
{!loading && <span className="mode-badge">{authenticated ? `${username ?? 'Owner'} · sudo` : 'Anonymous · read-only'}</span>}
{!loading && <button className="mode-badge" type="button" onClick={() => {
if (authenticated) return
if (users.length > 0) setSudoOpen(true)
else if (canSignIn) signIn()
}}>
{authenticated ? `${username ?? 'Owner'} · sudo` : 'Anonymous · read-only'}
</button>}
<button className="theme-button" type="button" aria-label="Demo users"
onClick={() => setHelpOpen(value => !value)}>?</button>
{!loading && !authenticated && users.length > 0 &&
<button className="theme-button" type="button" onClick={() => setSudoOpen(true)}>sudo</button>}
{!loading && authenticated && users.length > 0 &&
<button className="theme-button" type="button" onClick={signOut}>logout</button>}
{!loading && !authenticated && canSignIn &&
<button className="google-button session-button" type="button" onClick={signIn}>
<span aria-hidden="true">G</span> Sign in with Google</button>}
<button className="theme-button" type="button" aria-label={`Switch to ${dark ? 'light' : 'dark'} theme`}
onClick={() => setDark(value => !value)}>{dark ? '☀ Light' : '☾ Dark'}</button>
</div>

1
ui/app/src/styles.css
View file

@ -26,6 +26,7 @@ button, select { cursor: pointer; }
.theme-button { border: 1px solid #45475a; border-radius: 8px; background: #313244; color: #bac2de; padding: 8px 12px; }
.theme-button:hover { border-color: #cba6f7; color: #f5e0e8; }
.mode-badge { border: 1px solid #45475a; border-radius: 999px; padding: 6px 11px; color: #a6adc8; background: #242438; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mode-badge:hover { border-color: #cba6f7; color: #f5e0e8; }
.google-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #585b70; border-radius: 8px; background: #313244; color: #cdd6f4; cursor: pointer; padding: 8px 12px; font-weight: 650; }
.google-button:hover { background: #45475a; border-color: #89b4fa; }
.google-button span { color: #89b4fa; font-weight: 800; }