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

fix(welcome): make WelcomeScreen support isCompact prop to prevent full-screen CSS clash when rendering inside saved-ID wrapper card in App.tsx

Browse Source 
Per PLAN item 8. Saved users now get a clean compact welcome prompt without double min-h-screen divs.
This commit is contained in:
Dustin Newkirk
2026-06-04 16:04:14 -04:00
parent eb5952adc6
commit 4641d74536
2 changed files with 61 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+2 -2
View File
@@ -80,7 +80,7 @@ export default function App() {
if (!identified && !loadingPrefs) {
const savedId = localStorage.getItem('kira-user-id');
if (!savedId) {
return <WelcomeScreen onComplete={handleWelcome} />;
return <WelcomeScreen onComplete={handleWelcome} isCompact />;
}
// Has saved ID but not identified yet — show welcome with their name
return (
@@ -92,7 +92,7 @@ export default function App() {
</div>
</div>
<p className="text-kira-plum/60 text-sm">coming back? say your name to pick up where you left off</p>
<WelcomeScreen onComplete={handleWelcome} />
<WelcomeScreen onComplete={handleWelcome} isCompact />
</div>
<style>{`
@keyframes pulse-glow {
frontend/src/components/WelcomeScreen.tsx
+59 -45
View File
@@ -2,9 +2,10 @@ import { useState } from 'react';
interface Props {
onComplete: (name: string) => void;
isCompact?: boolean;
}
export default function WelcomeScreen({ onComplete }: Props) {
export default function WelcomeScreen({ onComplete, isCompact = false }: Props) {
const [name, setName] = useState('');
const handleSubmit = (e: React.FormEvent) => {
@@ -13,56 +14,69 @@ export default function WelcomeScreen({ onComplete }: Props) {
if (trimmed) onComplete(trimmed);
};
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">
{/* Avatar preview */}
<div className="flex justify-center">
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 animate-pulse-glow">
<div className="w-full h-full rounded-full bg-white flex items-center justify-center">
<span className="text-3xl">🌸</span>
</div>
const content = (
<>
{/* Avatar preview */}
<div className="flex justify-center">
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 animate-pulse-glow">
<div className="w-full h-full rounded-full bg-white flex items-center justify-center">
<span className="text-3xl">🌸</span>
</div>
</div>
</div>
<div className="space-y-2">
<h1 className="text-2xl font-extrabold text-kira-plum">Welcome to Kira!</h1>
<p className="text-sm text-kira-violet/60 leading-relaxed">
I'm your focus bestie. I'm here to body-double with you —
keep you company, cheer you on, and help you get things done.
Lo-fi beats, timers, cats, the whole deal.
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-semibold text-kira-plum/70 mb-1.5 text-left">
What should I call you?
</label>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Your name..."
className="w-full bg-white/60 rounded-xl px-4 py-3 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50 transition-all"
autoFocus
maxLength={30}
/>
</div>
<button
type="submit"
disabled={!name.trim()}
className="btn-kira w-full py-3 text-base disabled:opacity-40 disabled:cursor-not-allowed transition-all"
>
Let's Go! ✨
</button>
</form>
<p className="text-[10px] text-kira-plum/30">
everything stays between us — your name, your preferences, your focus vibes
<div className="space-y-2">
<h1 className="text-2xl font-extrabold text-kira-plum">Welcome to Kira!</h1>
<p className="text-sm text-kira-violet/60 leading-relaxed">
I'm your focus bestie. I'm here to body-double with you —
keep you company, cheer you on, and help you get things done.
Lo-fi beats, timers, cats, the whole deal.
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-semibold text-kira-plum/70 mb-1.5 text-left">
What should I call you?
</label>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Your name..."
className="w-full bg-white/60 rounded-xl px-4 py-3 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50 transition-all"
autoFocus
maxLength={30}
/>
</div>
<button
type="submit"
disabled={!name.trim()}
className="btn-kira w-full py-3 text-base disabled:opacity-40 disabled:cursor-not-allowed transition-all"
>
Let's Go! ✨
</button>
</form>
<p className="text-[10px] text-kira-plum/30">
everything stays between us — your name, your preferences, your focus vibes
</p>
</>
);
if (isCompact) {
return (
<div className="glass-card max-w-md w-full p-8 text-center space-y-6">
{content}
</div>
);
}
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">
{content}
</div>
<style>{`
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }