hotel-manage-stack/portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix dark-theme CSS variables on Roles and Users admin pages

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-02 00:31:45 +00:00
parent fa32ea84ee
commit bababbfc1a
2 changed files with 47 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/pages/AdminUsers.tsx
View file

@ -86,14 +86,14 @@ export function AdminUsers({ user }: { user: User }) {
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{users.map(u => (
<div key={u.id} style={{
background: 'var(--surface)', borderRadius: '10px',
padding: '1rem 1.25rem', border: '1px solid var(--surface-2)',
opacity: u.active ? 1 : 0.5,
background: 'var(--card-bg)', borderRadius: '10px',
padding: '1rem 1.25rem', border: '1px solid var(--card-border)',
boxShadow: 'var(--shadow-sm)', opacity: u.active ? 1 : 0.5,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
<div style={{ flex: 1, minWidth: '140px' }}>
<div style={{ fontWeight: 600, fontSize: '0.9rem' }}>{u.name}</div>
<div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{u.email}</div>
<div style={{ fontSize: '0.78rem', color: 'var(--text-mid)' }}>{u.email}</div>
</div>
<div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
<Toggle label="Active" on={u.active} onClick={() => toggle(u.id, 'active', u.active)} />
@ -107,10 +107,10 @@ export function AdminUsers({ user }: { user: User }) {
const has = u.app_slugs.includes(app.slug)
return (
<button key={app.slug} onClick={() => grantRevoke(u.id, app.slug, has)} style={{
background: has ? 'var(--navy)' : 'var(--surface-2)',
border: `1px solid ${has ? 'var(--gold)' : 'var(--surface-2)'}`,
color: has ? 'var(--gold)' : 'var(--text-muted)',
borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem',
background: has ? 'var(--navy)' : 'var(--body-bg)',
border: `1px solid ${has ? 'var(--navy)' : 'var(--card-border)'}`,
color: has ? '#fff' : 'var(--text-mid)',
borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
}}>
{app.name}
</button>
@ -120,11 +120,11 @@ export function AdminUsers({ user }: { user: User }) {
{/* Roles */}
<div style={{ marginTop: '0.5rem', display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center' }}>
<span style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginRight: '0.15rem' }}>Roles:</span>
<span style={{ fontSize: '0.72rem', color: 'var(--text-mid)', marginRight: '0.15rem' }}>Roles:</span>
{u.roles.map(r => (
<button key={r.id} onClick={() => removeRole(u.id, r.id)} title="Click to remove" style={{
background: 'var(--navy)', border: '1px solid var(--surface-2)',
color: 'var(--text-muted)', borderRadius: '4px',
background: 'var(--navy)', border: '1px solid var(--navy)',
color: '#fff', borderRadius: '4px',
padding: '0.15rem 0.5rem', fontSize: '0.72rem', cursor: 'pointer',
}}>
{r.name} ×
@ -134,8 +134,8 @@ export function AdminUsers({ user }: { user: User }) {
value=""
onChange={e => { if (e.target.value) addRole(u.id, Number(e.target.value)) }}
style={{
background: 'var(--surface-2)', border: '1px solid var(--surface-2)',
borderRadius: '4px', color: 'var(--text-muted)',
background: 'var(--body-bg)', border: '1px solid var(--card-border)',
borderRadius: '4px', color: 'var(--text-mid)',
padding: '0.15rem 0.4rem', fontSize: '0.72rem',
}}
>
@ -146,8 +146,8 @@ export function AdminUsers({ user }: { user: User }) {
</select>
{u.workforce_user_id && (
<button onClick={() => syncWfRoles(u.id)} style={{
background: 'none', border: '1px solid var(--surface-2)',
color: 'var(--text-muted)', borderRadius: '4px',
background: 'var(--body-bg)', border: '1px solid var(--card-border)',
color: 'var(--text-mid)', borderRadius: '4px',
padding: '0.15rem 0.5rem', fontSize: '0.72rem', cursor: 'pointer',
}}>
Sync WF roles
@ -165,10 +165,10 @@ export function AdminUsers({ user }: { user: User }) {
function Toggle({ label, on, onClick }: { label: string; on: boolean; onClick: () => void }) {
return (
<button onClick={onClick} style={{
background: on ? 'var(--navy)' : 'var(--surface-2)',
border: `1px solid ${on ? 'var(--gold)' : 'var(--surface-2)'}`,
color: on ? 'var(--gold)' : 'var(--text-muted)',
borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem',
background: on ? 'var(--navy)' : 'var(--body-bg)',
border: `1px solid ${on ? 'var(--navy)' : 'var(--card-border)'}`,
color: on ? '#fff' : 'var(--text-mid)',
borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
}}>
{label}
</button>
@ -195,11 +195,12 @@ function CreateUserForm({ onCreated }: { onCreated: () => void }) {
return (
<form onSubmit={submit} style={{
background: 'var(--surface)', borderRadius: '10px', padding: '1.25rem',
border: '1px solid var(--gold)', marginBottom: '1rem',
background: 'var(--card-bg)', borderRadius: '10px', padding: '1.25rem',
border: '1px solid var(--card-border)', marginBottom: '1rem',
display: 'flex', flexDirection: 'column', gap: '0.75rem',
boxShadow: 'var(--shadow-sm)',
}}>
<h2 style={{ fontSize: '0.9rem', color: 'var(--gold)' }}>New User</h2>
<h2 style={{ fontSize: '0.9rem', color: 'var(--navy)', fontWeight: 700 }}>New User</h2>
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
<input placeholder="Full name" value={form.name} onChange={f('name')} required style={{ ...inp, flex: 1 }} />
<input type="email" placeholder="Email" value={form.email} onChange={f('email')} required style={{ ...inp, flex: 1 }} />
@ -216,11 +217,11 @@ function CreateUserForm({ onCreated }: { onCreated: () => void }) {
}
const inp: React.CSSProperties = {
background: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
borderRadius: '6px', color: 'var(--text)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
background: 'var(--body-bg)', border: '1px solid var(--card-border)',
borderRadius: '6px', color: 'var(--text-dark)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
}
const chk: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.875rem', cursor: 'pointer' }
const goldBtn: React.CSSProperties = {
background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none',
borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600,
background: 'var(--navy)', color: '#fff', border: 'none',
borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600, cursor: 'pointer',
}