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

Restyle to light content theme with Lucide icons

Browse source 
- index.css: light body (#f4f5f7), white cards, sidebar stays dark navy
- AppIcon.tsx: Lucide icon lookup component for app tiles and nav
- Sidebar.tsx: Lucide nav icons (LayoutGrid, Users, Activity, LogOut)
- Dashboard.tsx: white cards with shadows, coloured Lucide app icons
- AdminMonitor.tsx: light theme throughout, Lucide tab icons,
  better status colours for light backgrounds

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-01 18:09:51 +00:00
parent ead0313561
commit 092c4fda31
7 changed files with 6487 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/Sidebar.tsx
View file

@ -1,4 +1,6 @@
import { NavLink, useNavigate } from 'react-router-dom'
import { LayoutGrid, Users, Activity, LogOut } from 'lucide-react'
import { AppIcon } from './AppIcon'
import type { User } from '../types'
interface Props { user: User; activeSlug?: string }
@ -19,22 +21,23 @@ export function Sidebar({ user, activeSlug }: Props) {
position: 'sticky', top: 0,
}}>
<div style={{ padding: '1.25rem 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }}>
<div style={{ color: 'var(--gold)', fontWeight: 700, fontSize: '0.9rem', letterSpacing: '0.05em' }}>
<div style={{ color: 'var(--gold)', fontWeight: 700, fontSize: '0.9rem', letterSpacing: '0.06em' }}>
MANAGE
</div>
<div style={{ color: 'var(--text-muted)', fontSize: '0.75rem', marginTop: '0.2rem' }}>
<div style={{ color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }}>
{import.meta.env.VITE_HOTEL_NAME}
</div>
</div>
<nav style={{ flex: 1, overflowY: 'auto', padding: '0.5rem 0' }}>
<NavLink to="/" end style={({ isActive }) => navItem(isActive && !activeSlug)}>
🏠 Dashboard
<LayoutGrid size={15} strokeWidth={1.75} />
Dashboard
</NavLink>
{user.apps.length > 0 && (
<div style={{ padding: '0.5rem 1rem 0.25rem', fontSize: '0.65rem',
color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
<div style={{ padding: '0.6rem 1rem 0.2rem', fontSize: '0.62rem',
color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
Apps
</div>
)}
@ -42,35 +45,39 @@ export function Sidebar({ user, activeSlug }: Props) {
{user.apps.map(app => (
<NavLink key={app.slug} to={`/app/${app.slug}`}
style={({ isActive }) => navItem(isActive)}>
<span style={{ fontSize: '1rem' }}>{app.icon}</span>
<span style={{ marginLeft: '0.5rem' }}>{app.name}</span>
<AppIcon name={app.icon} size={15} strokeWidth={1.75} />
<span>{app.name}</span>
</NavLink>
))}
{user.is_admin && (
<>
<div style={{ padding: '0.5rem 1rem 0.25rem', fontSize: '0.65rem',
color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em',
<div style={{ padding: '0.6rem 1rem 0.2rem', fontSize: '0.62rem',
color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.1em',
marginTop: '0.5rem' }}>
Admin
</div>
<NavLink to="/admin/users" style={({ isActive }) => navItem(isActive)}>
👥 Users
<Users size={15} strokeWidth={1.75} />
Users
</NavLink>
<NavLink to="/admin/monitor" style={({ isActive }) => navItem(isActive)}>
📡 Monitor
<Activity size={15} strokeWidth={1.75} />
Monitor
</NavLink>
</>
)}
</nav>
<div style={{ padding: '0.875rem 1rem', borderTop: '1px solid var(--surface-2)' }}>
<div style={{ fontSize: '0.8rem', fontWeight: 600, marginBottom: '0.1rem' }}>{user.name}</div>
<div style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text)', marginBottom: '0.1rem' }}>{user.name}</div>
<div style={{ fontSize: '0.7rem', color: 'var(--text-muted)', marginBottom: '0.6rem' }}>{user.email}</div>
<button onClick={logout} style={{
background: 'none', border: '1px solid var(--surface-2)', borderRadius: '5px',
color: 'var(--text-muted)', padding: '0.3rem 0.75rem', fontSize: '0.75rem', width: '100%',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.4rem',
}}>
<LogOut size={13} strokeWidth={1.75} />
Sign out
</button>
</div>
@ -80,10 +87,11 @@ export function Sidebar({ user, activeSlug }: Props) {
function navItem(active: boolean): React.CSSProperties {
return {
display: 'flex', alignItems: 'center', padding: '0.55rem 1rem',
fontSize: '0.875rem', color: active ? 'var(--gold)' : 'var(--text-muted)',
display: 'flex', alignItems: 'center', gap: '0.6rem',
padding: '0.5rem 1rem',
fontSize: '0.85rem', color: active ? 'var(--gold)' : 'var(--text-muted)',
background: active ? 'var(--surface)' : 'transparent',
borderLeft: active ? '3px solid var(--gold)' : '3px solid transparent',
borderLeft: active ? '2px solid var(--gold)' : '2px solid transparent',
transition: 'color 0.1s, background 0.1s',
}
}