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

38
src/pages/AdminRoles.tsx
View file

@ -56,8 +56,9 @@ export function AdminRoles({ user }: { user: User }) {
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{roles.map(role => ( {roles.map(role => (
<div key={role.id} style={{ <div key={role.id} style={{
background: 'var(--surface)', borderRadius: '10px', background: 'var(--card-bg)', borderRadius: '10px',
padding: '1rem 1.25rem', border: `1px solid ${role.is_default ? 'var(--gold)' : 'var(--surface-2)'}`, padding: '1rem 1.25rem', border: `1px solid ${role.is_default ? 'var(--gold)' : 'var(--card-border)'}`,
boxShadow: 'var(--shadow-sm)',
}}> }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.75rem', flexWrap: 'wrap' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.75rem', flexWrap: 'wrap' }}>
<div style={{ flex: 1, minWidth: '140px' }}> <div style={{ flex: 1, minWidth: '140px' }}>
@ -71,7 +72,7 @@ export function AdminRoles({ user }: { user: User }) {
)} )}
</div> </div>
{role.description && ( {role.description && (
<div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{role.description}</div> <div style={{ fontSize: '0.78rem', color: 'var(--text-mid)' }}>{role.description}</div>
)} )}
</div> </div>
<div style={{ display: 'flex', gap: '0.4rem' }}> <div style={{ display: 'flex', gap: '0.4rem' }}>
@ -90,10 +91,10 @@ export function AdminRoles({ user }: { user: User }) {
const has = role.app_slugs.includes(app.slug) const has = role.app_slugs.includes(app.slug)
return ( return (
<button key={app.slug} onClick={() => toggleApp(role.id, app.slug, has)} style={{ <button key={app.slug} onClick={() => toggleApp(role.id, app.slug, has)} style={{
background: has ? 'var(--navy)' : 'var(--surface-2)', background: has ? 'var(--navy)' : 'var(--body-bg)',
border: `1px solid ${has ? 'var(--gold)' : 'var(--surface-2)'}`, border: `1px solid ${has ? 'var(--navy)' : 'var(--card-border)'}`,
color: has ? 'var(--gold)' : 'var(--text-muted)', color: has ? '#fff' : 'var(--text-mid)',
borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem', borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
}}> }}>
{app.name} {app.name}
</button> </button>
@ -133,11 +134,12 @@ function CreateRoleForm({ onCreated }: { onCreated: () => void }) {
return ( return (
<form onSubmit={submit} style={{ <form onSubmit={submit} style={{
background: 'var(--surface)', borderRadius: '10px', padding: '1.25rem', background: 'var(--card-bg)', borderRadius: '10px', padding: '1.25rem',
border: '1px solid var(--gold)', marginBottom: '1rem', border: '1px solid var(--card-border)', marginBottom: '1rem',
display: 'flex', flexDirection: 'column', gap: '0.75rem', display: 'flex', flexDirection: 'column', gap: '0.75rem',
boxShadow: 'var(--shadow-sm)',
}}> }}>
<h2 style={{ fontSize: '0.9rem', color: 'var(--gold)' }}>New Role</h2> <h2 style={{ fontSize: '0.9rem', color: 'var(--navy)', fontWeight: 700 }}>New Role</h2>
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
<input placeholder="Role name" value={form.name} onChange={e => setName(e.target.value)} <input placeholder="Role name" value={form.name} onChange={e => setName(e.target.value)}
required style={{ ...inp, flex: 1 }} /> required style={{ ...inp, flex: 1 }} />
@ -158,18 +160,18 @@ function CreateRoleForm({ onCreated }: { onCreated: () => void }) {
} }
const inp: React.CSSProperties = { const inp: React.CSSProperties = {
background: 'var(--navy-dark)', border: '1px solid var(--surface-2)', background: 'var(--body-bg)', border: '1px solid var(--card-border)',
borderRadius: '6px', color: 'var(--text)', padding: '0.6rem 0.75rem', fontSize: '0.875rem', borderRadius: '6px', color: 'var(--text-dark)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
} }
const goldBtn: React.CSSProperties = { const goldBtn: React.CSSProperties = {
background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none', background: 'var(--navy)', color: '#fff', border: 'none',
borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600, borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600, cursor: 'pointer',
} }
const mutedBtn: React.CSSProperties = { const mutedBtn: React.CSSProperties = {
background: 'var(--surface-2)', color: 'var(--text-muted)', border: '1px solid var(--surface-2)', background: 'var(--body-bg)', color: 'var(--text-mid)', border: '1px solid var(--card-border)',
borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem', borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
} }
const dangerBtn: React.CSSProperties = { const dangerBtn: React.CSSProperties = {
background: 'none', color: 'var(--danger)', border: '1px solid var(--danger)', background: 'none', color: '#dc2626', border: '1px solid #dc2626',
borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem', borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
} }

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