From db23034e36ec6cac2e6f52aed55e97ea40238af2 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Fri, 5 Jun 2026 09:26:51 -0400
Subject: [PATCH] =?UTF-8?q?feat(ui):=20ditch=20all=20glass-card=20containe?=
 =?UTF-8?q?rs=20=E2=80=94=20flat,=20modern,=20card-free=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All 15+ glass-card instances removed across every component (Timer, Music,
Notes, WhiteNoise, PetZone, Clock, ChatBubble, Wardrobe, Toolbar, KiraAvatar,
BackgroundScene, WelcomeScreen, App text input + bottom bar).

New design: widgets sit directly on the gradient background with only padding,
no frosted-glass backgrounds, borders, or shadows. Cleaner, more modern look.
---
 frontend/src/App.tsx                        | 6 +++---
 frontend/src/components/BackgroundScene.tsx | 2 +-
 frontend/src/components/ChatBubble.tsx      | 2 +-
 frontend/src/components/Clock.tsx           | 2 +-
 frontend/src/components/KiraAvatar.tsx      | 2 +-
 frontend/src/components/MusicPlayer.tsx     | 2 +-
 frontend/src/components/Notes.tsx           | 2 +-
 frontend/src/components/PetZone.tsx         | 2 +-
 frontend/src/components/Timer.tsx           | 2 +-
 frontend/src/components/Toolbar.tsx         | 2 +-
 frontend/src/components/Wardrobe.tsx        | 2 +-
 frontend/src/components/WelcomeScreen.tsx   | 4 ++--
 frontend/src/components/WhiteNoise.tsx      | 2 +-
 13 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 05651a8..ea02857 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -85,7 +85,7 @@ export default function App() {
     // Has saved ID but not identified yet — show welcome with their name
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
-        <div className="glass-card max-w-sm w-full p-6 text-center space-y-4">
+        <div className="max-w-sm w-full p-6 text-center space-y-4">
           <div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto animate-pulse-glow">
             <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
               <span className="text-2xl">🌸</span>
@@ -143,7 +143,7 @@ export default function App() {
               <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />
 
               {/* Text input fallback */}
-              <div className="glass-card p-3">
+              <div className="p-3">
                 <div className="text-[10px] text-kira-plum/30 mb-2">
                   hey {userName} ✨
                 </div>
@@ -190,7 +190,7 @@ export default function App() {
 
         {/* Bottom bar */}
         <div className="px-4 pb-4">
-          <div className="glass-card px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
+          <div className="px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
             <div className="flex items-center gap-3">
               <span className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-400 animate-pulse' : isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'} inline-block`} />
               <span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : `kira's here for you, ${userName}`}</span>
diff --git a/frontend/src/components/BackgroundScene.tsx b/frontend/src/components/BackgroundScene.tsx
index 60ba02a..f97f552 100644
--- a/frontend/src/components/BackgroundScene.tsx
+++ b/frontend/src/components/BackgroundScene.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export default function BackgroundScene({ currentScene, onSelect }: Props) {
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>🎨</span> Scene
       </h3>
diff --git a/frontend/src/components/ChatBubble.tsx b/frontend/src/components/ChatBubble.tsx
index f768a8e..b08337c 100644
--- a/frontend/src/components/ChatBubble.tsx
+++ b/frontend/src/components/ChatBubble.tsx
@@ -22,7 +22,7 @@ export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Pr
   }, [messages]);
 
   return (
-    <div className="glass-card p-4 flex flex-col" style={{ minHeight: 200, maxHeight: 320 }}>
+    <div className="p-4 flex flex-col" style={{ minHeight: 200, maxHeight: 320 }}>
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>💬</span> Conversation
         <span className={`w-2 h-2 rounded-full ${isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'}`} />
diff --git a/frontend/src/components/Clock.tsx b/frontend/src/components/Clock.tsx
index 329c180..923ed26 100644
--- a/frontend/src/components/Clock.tsx
+++ b/frontend/src/components/Clock.tsx
@@ -9,7 +9,7 @@ export default function Clock() {
   }, []);
 
   return (
-    <div className="glass-card px-5 py-3 text-center">
+    <div className="px-5 py-3 text-center">
       <div className="text-3xl font-bold tracking-tight text-kira-plum">
         {time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
       </div>
diff --git a/frontend/src/components/KiraAvatar.tsx b/frontend/src/components/KiraAvatar.tsx
index f773b9d..74c6c87 100644
--- a/frontend/src/components/KiraAvatar.tsx
+++ b/frontend/src/components/KiraAvatar.tsx
@@ -197,7 +197,7 @@ export default function KiraAvatar(props: Props) {
   `;
 
   return (
-    <div className="glass-card flex flex-col items-center w-full overflow-hidden" style={{ minHeight: '33vh' }}>
+    <div className="flex flex-col items-center w-full overflow-hidden" style={{ minHeight: '33vh' }}>
       <div className="relative w-full flex-1" style={{ minHeight: 250 }}>
         <div
           ref={canvasRef}
diff --git a/frontend/src/components/MusicPlayer.tsx b/frontend/src/components/MusicPlayer.tsx
index 7f04a0a..716ab9a 100644
--- a/frontend/src/components/MusicPlayer.tsx
+++ b/frontend/src/components/MusicPlayer.tsx
@@ -87,7 +87,7 @@ export default function MusicPlayer() {
   }, [volume]);
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <div className="flex items-center justify-between mb-3">
         <h3 className="text-sm font-bold text-kira-plum flex items-center gap-2">
           <span>🎶</span> Lo-Fi
diff --git a/frontend/src/components/Notes.tsx b/frontend/src/components/Notes.tsx
index 20c17b8..c7187a2 100644
--- a/frontend/src/components/Notes.tsx
+++ b/frontend/src/components/Notes.tsx
@@ -25,7 +25,7 @@ export default function Notes() {
   };
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>📝</span> Notes
       </h3>
diff --git a/frontend/src/components/PetZone.tsx b/frontend/src/components/PetZone.tsx
index ac99341..7c241c5 100644
--- a/frontend/src/components/PetZone.tsx
+++ b/frontend/src/components/PetZone.tsx
@@ -1,6 +1,6 @@
 export default function PetZone() {
   return (
-    <div className="glass-card p-4 relative overflow-hidden" style={{ minHeight: 120 }}>
+    <div className="p-4 relative overflow-hidden" style={{ minHeight: 120 }}>
       <h3 className="text-sm font-bold text-kira-plum mb-2 flex items-center gap-2">
         <span>🐱</span> Pet Zone
       </h3>
diff --git a/frontend/src/components/Timer.tsx b/frontend/src/components/Timer.tsx
index ff68348..721bc90 100644
--- a/frontend/src/components/Timer.tsx
+++ b/frontend/src/components/Timer.tsx
@@ -85,7 +85,7 @@ export default function Timer() {
   const progress = mode === 'stopwatch' ? 0 : (presetMinutes > 0 ? 1 - remaining / (presetMinutes * 60) : 0);
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       {/* Mode tabs */}
       <div className="flex gap-1 mb-3 bg-kira-glow rounded-xl p-1">
         {(['pomodoro', 'countdown', 'stopwatch'] as TimerMode[]).map((m) => (
diff --git a/frontend/src/components/Toolbar.tsx b/frontend/src/components/Toolbar.tsx
index 1626866..3cef03e 100644
--- a/frontend/src/components/Toolbar.tsx
+++ b/frontend/src/components/Toolbar.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export default function Toolbar({ currentScene, onSceneChange }: Props) {
   return (
-    <div className="glass-card px-4 py-3 flex items-center justify-between gap-2">
+    <div className="px-4 py-3 flex items-center justify-between gap-2">
       <div className="flex items-center gap-3">
         <span className="text-lg font-bold text-kira-plum">Kira</span>
         <span className="text-kira-plum/20">|</span>
diff --git a/frontend/src/components/Wardrobe.tsx b/frontend/src/components/Wardrobe.tsx
index b5d75a5..15a168e 100644
--- a/frontend/src/components/Wardrobe.tsx
+++ b/frontend/src/components/Wardrobe.tsx
@@ -45,7 +45,7 @@ export default function Wardrobe({ onOutfitChange, onAccessoryChange }: Props) {
   };
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>👘</span> Wardrobe
       </h3>
diff --git a/frontend/src/components/WelcomeScreen.tsx b/frontend/src/components/WelcomeScreen.tsx
index c0d6a6b..2fe3556 100644
--- a/frontend/src/components/WelcomeScreen.tsx
+++ b/frontend/src/components/WelcomeScreen.tsx
@@ -66,7 +66,7 @@ export default function WelcomeScreen({ onComplete, isCompact = false }: Props)
 
   if (isCompact) {
     return (
-      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
+      <div className="max-w-md w-full p-8 text-center space-y-6">
         {content}
       </div>
     );
@@ -74,7 +74,7 @@ export default function WelcomeScreen({ onComplete, isCompact = false }: Props)
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
-      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
+      <div className="max-w-md w-full p-8 text-center space-y-6">
         {content}
       </div>
       <style>{`
diff --git a/frontend/src/components/WhiteNoise.tsx b/frontend/src/components/WhiteNoise.tsx
index 947ee48..337113b 100644
--- a/frontend/src/components/WhiteNoise.tsx
+++ b/frontend/src/components/WhiteNoise.tsx
@@ -103,7 +103,7 @@ export default function WhiteNoise() {
   };
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>🌬️</span> White Noise
       </h3>