fix(home): drop greeting date; fix touch scroll; tokenize TopBar icons
Some checks failed
Deploy / deploy (push) Has been cancelled
Some checks failed
Deploy / deploy (push) Has been cancelled
- Removes the date label from the greeting row (user request — тoo dense on tablet and redundant with TopBar clock). - Scrolling: drops overflowY: auto on the inner Events/Notes cards and removes flex: 1 / minHeight: 0 from their grid. On iPad-class touch nested scroll containers fought the root scroll; now only the root scrolls, which the browser handles natively. - TopBar: replaces hardcoded rgba(255,255,255,X) on sensor icons, chip background, chip border and header bottom-border with semantic tokens (--text-tertiary, --surface-2, --border-subtle, --hairline) so the thermometer/humidity/wind icons are visible in light theme.
This commit is contained in:
17
app/page.tsx
17
app/page.tsx
@@ -424,22 +424,13 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
|||||||
padding: '18px 22px 24px',
|
padding: '18px 22px 24px',
|
||||||
display: 'flex', flexDirection: 'column', gap: 14,
|
display: 'flex', flexDirection: 'column', gap: 14,
|
||||||
}}>
|
}}>
|
||||||
{/* ───── Greeting row ───── */}
|
{/* ───── Greeting ───── */}
|
||||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
|
|
||||||
<h1 style={{
|
<h1 style={{
|
||||||
fontSize: 28, fontWeight: 800, color: 'var(--text-primary)',
|
fontSize: 28, fontWeight: 800, color: 'var(--text-primary)',
|
||||||
letterSpacing: '-0.6px', margin: 0, lineHeight: 1.1,
|
letterSpacing: '-0.6px', margin: 0, lineHeight: 1.1,
|
||||||
}}>
|
}}>
|
||||||
{greeting} <span style={{ fontSize: 26 }}>👋</span>
|
{greeting} <span style={{ fontSize: 26 }}>👋</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div style={{
|
|
||||||
fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600,
|
|
||||||
textTransform: 'capitalize', textAlign: 'right',
|
|
||||||
letterSpacing: '-0.1px',
|
|
||||||
}}>
|
|
||||||
{new Date().toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ───── Bento row: Hero weather + Tram ───── */}
|
{/* ───── Bento row: Hero weather + Tram ───── */}
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, minHeight: 230 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, minHeight: 230 }}>
|
||||||
@@ -577,10 +568,10 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ───── Events + Notes row ───── */}
|
{/* ───── Events + Notes row ───── */}
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, flex: 1, minHeight: 0 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
|
||||||
|
|
||||||
{/* Events — today + tomorrow in one card */}
|
{/* Events — today + tomorrow in one card */}
|
||||||
<div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 14, overflowY: 'auto' }}>
|
<div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||||
{/* Today */}
|
{/* Today */}
|
||||||
<div>
|
<div>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
|
||||||
@@ -659,7 +650,7 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Notes */}
|
{/* Notes */}
|
||||||
<div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 12, overflowY: 'auto' }}>
|
<div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
<StickyNote size={13} color="var(--text-secondary)" />
|
<StickyNote size={13} color="var(--text-secondary)" />
|
||||||
<span style={{ fontSize: 10, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700 }}>Заметки</span>
|
<span style={{ fontSize: 10, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700 }}>Заметки</span>
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
padding: '0 24px',
|
padding: '0 24px',
|
||||||
borderBottom: '1px solid rgba(255,255,255,0.04)',
|
borderBottom: '1px solid var(--hairline)',
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
@@ -82,17 +82,17 @@ export default function TopBar({ sensors, haConnected }: TopBarProps) {
|
|||||||
<div style={{
|
<div style={{
|
||||||
display: 'flex', alignItems: 'center', gap: 4,
|
display: 'flex', alignItems: 'center', gap: 4,
|
||||||
padding: '8px 14px', borderRadius: 14,
|
padding: '8px 14px', borderRadius: 14,
|
||||||
background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)',
|
background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
|
||||||
}}>
|
}}>
|
||||||
<Thermometer size={14} color="rgba(255,255,255,0.35)" />
|
<Thermometer size={14} color="var(--text-tertiary)" />
|
||||||
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
||||||
{sensors.temperature}°
|
{sensors.temperature}°
|
||||||
</span>
|
</span>
|
||||||
<Droplets size={14} color="rgba(255,255,255,0.35)" />
|
<Droplets size={14} color="var(--text-tertiary)" />
|
||||||
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 8 }}>
|
||||||
{sensors.humidity}%
|
{sensors.humidity}%
|
||||||
</span>
|
</span>
|
||||||
<Wind size={14} color="rgba(255,255,255,0.35)" />
|
<Wind size={14} color="var(--text-tertiary)" />
|
||||||
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
<span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||||
{sensors.pm25}
|
{sensors.pm25}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user