hobokenchicken/kira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: remove bottom bar, make date/time more prominent

Browse Source 
Date/time: text-sm, font-semibold, full opacity plum color.
Removed status bar (kira's here for you, reconnecting, etc).
Grid rows: auto_1fr (no bottom row).
This commit is contained in:
Dustin Newkirk
2026-06-06 11:41:19 -04:00
parent 8da7d0bd90
commit 1eaef8b6ab
1 changed files with 3 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+3 -17
View File
@@ -116,7 +116,7 @@ export default function App() {
<Particles type={currentScene.particles ?? 'none'} />
<div className="relative z-20 h-full p-4">
<div className="h-full grid grid-rows-[auto_1fr_auto] grid-cols-[288px_1fr_256px] rounded-2xl overflow-hidden">
<div className="h-full grid grid-rows-[auto_1fr] grid-cols-[288px_1fr_256px] rounded-2xl overflow-hidden">
{/* ── Top bar: scene selector + clock ── */}
<div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0 bg-white/40 backdrop-blur-xl">
@@ -130,7 +130,7 @@ export default function App() {
))}
</div>
<div className="flex items-center gap-4">
<span className="text-kira-plum/30 text-xs font-medium">
<span className="text-kira-plum text-sm font-semibold tracking-wide">
{new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} &middot; {new Date().toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' })}
</span>
<span className="text-xs text-kira-plum/20">🌸 body double</span>
@@ -170,21 +170,7 @@ export default function App() {
</div>
</div>
{/* ── Bottom status bar ── */}
<div className="col-span-3 shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 bg-white/40 backdrop-blur-xl">
<div className="flex items-center gap-2">
<span className={`w-1.5 h-1.5 rounded-full ${
isRecording ? 'bg-red-400 animate-pulse'
: isKiraSpeaking ? 'bg-kira-pink animate-pulse'
: 'bg-kira-mint'
}`} />
{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking...' : `kira's here for you, ${userName}`}
</div>
<div className="flex items-center gap-2">
<span className={isConnected ? '' : 'text-red-300'}>{isConnected ? '' : 'reconnecting...'}</span>
<span>💖</span>
</div>
</div>
{/* ── Bottom bar (removed) ── */}
</div>
</div>