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

Replace hotel emoji on login screen with Lucide Hotel icon; add sidebar scrollbar styles

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-14 08:17:51 +00:00
parent 567e5bf73e
commit f36fd83196
3 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Sidebar.tsx
View file

@ -75,7 +75,7 @@ export function Sidebar({ user, activeSlug, onCollapse }: Props) {
)} )}
</div> </div>
<nav style={{ flex: 1, overflowY: 'auto', padding: '0.5rem 0' }}> <nav className="nav-scroll" style={{ flex: 1, overflowY: 'auto', padding: '0.5rem 0' }}>
{/* Dashboard */} {/* Dashboard */}
<NavLink to="/" end style={({ isActive }) => navItem(isActive && !activeSlug)}> <NavLink to="/" end style={({ isActive }) => navItem(isActive && !activeSlug)}>

15
src/index.css
View file

@ -37,3 +37,18 @@ body {
button { cursor: pointer; font-family: inherit; } button { cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; } a { color: inherit; text-decoration: none; }
/* Sidebar scrollbar */
.nav-scroll::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.nav-scroll::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.nav-scroll::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
.nav-scroll::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }

5
src/pages/Login.tsx
View file

@ -1,5 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom' import { useNavigate, useLocation } from 'react-router-dom'
import { Hotel } from 'lucide-react'
export function Login() { export function Login() {
const [email, setEmail] = useState('') const [email, setEmail] = useState('')
@ -34,7 +35,9 @@ export function Login() {
justifyContent: 'center', padding: '1.5rem', background: 'var(--navy-dark)' }}> justifyContent: 'center', padding: '1.5rem', background: 'var(--navy-dark)' }}>
<div style={{ width: '100%', maxWidth: '360px' }}> <div style={{ width: '100%', maxWidth: '360px' }}>
<div style={{ textAlign: 'center', marginBottom: '2rem' }}> <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
<div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🏨</div> <div style={{ marginBottom: '0.5rem', color: 'var(--gold)' }}>
<Hotel size={40} strokeWidth={1.75} />
</div>
<h1 style={{ fontSize: '1.5rem', color: 'var(--gold)', letterSpacing: '0.05em' }}>MANAGE</h1> <h1 style={{ fontSize: '1.5rem', color: 'var(--gold)', letterSpacing: '0.05em' }}>MANAGE</h1>
<p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '0.25rem' }}> <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '0.25rem' }}>
{import.meta.env.VITE_HOTEL_NAME} {import.meta.env.VITE_HOTEL_NAME}