Skip to content

[WIP] update the visuals to be consistent with midnfulness while maintaining a playful energy #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[WIP] update the visuals to be consistent with midnfulness while maintaining a playful energy #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
acf4677
Initial plan
Copilot Sep 17, 2025
d856e3a
Changes before error encountered
Copilot Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 35 additions & 29 deletions reactSetup/src/components/CooldownTimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ export const CooldownTimer: React.FC<CooldownTimerProps> = ({
const seconds = Math.floor((timeRemaining - minutes) * 60);

return (
<div className="bg-gradient-to-r from-orange-500 to-red-500 text-white p-6 rounded-lg mb-8 shadow-lg">
<div className="bg-gradient-to-br from-mindful-sky-400 via-mindful-sage-400 to-mindful-earth-400 text-white p-6 rounded-xl mb-8 shadow-xl border border-white/20">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-3">
<div className="bg-white bg-opacity-20 p-2 rounded-full">
<div className="bg-white bg-opacity-20 p-3 rounded-full backdrop-blur-sm">
{isComplete ? (
<CheckCircle className="h-6 w-6" />
) : (
Expand All @@ -57,16 +57,16 @@ export const CooldownTimer: React.FC<CooldownTimerProps> = ({
</div>
<div>
<h3 className="text-xl font-bold">
{isComplete ? 'Cool-down Complete!' : 'Cool-down Active'}
{isComplete ? '🌟 Cool-down Complete!' : '🧘‍♀️ Mindful Pause Active'}
</h3>
<p className="text-orange-100 text-sm">{cooldown.reason}</p>
<p className="text-white/80 text-sm">{cooldown.reason}</p>
</div>
</div>

{onCancel && !isComplete && (
<button
onClick={onCancel}
className="bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-full transition-colors"
className="bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-full transition-all duration-200 backdrop-blur-sm"
>
<X className="h-5 w-5" />
</button>
Expand All @@ -75,50 +75,56 @@ export const CooldownTimer: React.FC<CooldownTimerProps> = ({

{!isComplete ? (
<>
<div className="mb-4">
<div className="flex justify-between text-sm mb-2">
<span>Time remaining</span>
<span>{minutes}:{seconds.toString().padStart(2, '0')}</span>
<div className="mb-6">
<div className="flex justify-between text-sm mb-3">
<span className="text-white/90">Time remaining</span>
<span className="font-mono text-white">{minutes}:{seconds.toString().padStart(2, '0')}</span>
</div>
<div className="bg-white bg-opacity-20 rounded-full h-3">
<div className="bg-white/20 rounded-full h-4 backdrop-blur-sm">
<div
className="bg-white h-3 rounded-full transition-all duration-1000 ease-linear"
className="bg-gradient-to-r from-white via-mindful-sage-100 to-white h-4 rounded-full transition-all duration-1000 ease-linear shadow-inner"
style={{ width: `${progress}%` }}
/>
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div className="bg-white bg-opacity-10 p-3 rounded-lg">
<h4 className="font-semibold mb-1">Take Deep Breaths</h4>
<p>Focus on slow, controlled breathing to reduce impulse intensity.</p>
<div className="bg-white/15 p-4 rounded-xl backdrop-blur-sm border border-white/10">
<h4 className="font-semibold mb-2 text-white flex items-center">
🫁 <span className="ml-2">Take Deep Breaths</span>
</h4>
<p className="text-white/90">Focus on slow, mindful breathing to create space between impulse and action.</p>
</div>

<div className="bg-white bg-opacity-10 p-3 rounded-lg">
<h4 className="font-semibold mb-1">Ask Yourself</h4>
<p>"Do I really need this? How will I feel about it tomorrow?"</p>
<div className="bg-white/15 p-4 rounded-xl backdrop-blur-sm border border-white/10">
<h4 className="font-semibold mb-2 text-white flex items-center">
💭 <span className="ml-2">Gentle Reflection</span>
</h4>
<p className="text-white/90">"What am I really seeking? How might my future self feel about this choice?"</p>
</div>

<div className="bg-white bg-opacity-10 p-3 rounded-lg">
<h4 className="font-semibold mb-1">Alternative Activity</h4>
<p>Go for a walk, call a friend, or engage in a hobby instead.</p>
<div className="bg-white/15 p-4 rounded-xl backdrop-blur-sm border border-white/10">
<h4 className="font-semibold mb-2 text-white flex items-center">
🌱 <span className="ml-2">Nurturing Alternative</span>
</h4>
<p className="text-white/90">Connect with nature, reach out to loved ones, or engage in a creative activity.</p>
</div>
</div>
</>
) : (
<div className="text-center">
<p className="text-lg mb-4">
Great job taking time to pause and reflect! How are you feeling now?
<p className="text-lg mb-6 text-white/95">
🌟 Wonderful! You've created space for mindful reflection. How are you feeling in this moment?
</p>
<div className="flex justify-center space-x-4">
<button className="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg transition-colors">
Still want to buy
<div className="flex flex-wrap justify-center gap-3">
<button className="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl transition-all duration-200 backdrop-blur-sm border border-white/20">
Still interested
</button>
<button className="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg transition-colors">
Changed my mind
<button className="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl transition-all duration-200 backdrop-blur-sm border border-white/20">
Feeling grateful I waited
</button>
<button className="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg transition-colors">
Need more time
<button className="bg-white/20 hover:bg-white/30 px-6 py-3 rounded-xl transition-all duration-200 backdrop-blur-sm border border-white/20">
Need more reflection time
</button>
</div>
</div>
Expand Down
58 changes: 29 additions & 29 deletions reactSetup/src/components/HabitTracker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,53 +30,53 @@ export const HabitTracker: React.FC<HabitTrackerProps> = ({
const isCooldownActive = cooldownPeriod ? isCoolDownActive(cooldownPeriod) : false;

return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
<div className="min-h-screen bg-gradient-to-br from-mindful-sage-50 via-mindful-sky-50 to-mindful-earth-50 p-6">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="text-center mb-8">
<h1 className="text-4xl font-bold text-gray-800 mb-2">Mischief Manager</h1>
<p className="text-lg text-gray-600">Understanding your impulse spending patterns</p>
<h1 className="text-4xl font-bold text-mindful-earth-800 mb-2">Mischief Manager</h1>
<p className="text-lg text-mindful-earth-600">Your mindful companion for understanding spending patterns</p>
</div>

{/* Stats Overview */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-lg shadow-md p-6">
<div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-sage-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Total Tracked</p>
<p className="text-2xl font-bold text-gray-900">{formatCurrency(totalSpent)}</p>
<p className="text-sm font-medium text-mindful-earth-600">Total Tracked</p>
<p className="text-2xl font-bold text-mindful-earth-800">{formatCurrency(totalSpent)}</p>
</div>
<TrendingUp className="h-8 w-8 text-blue-600" />
<TrendingUp className="h-8 w-8 text-mindful-sky-500" />
</div>
</div>

<div className="bg-white rounded-lg shadow-md p-6">
<div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-coral-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Impulse Spending</p>
<p className="text-2xl font-bold text-red-600">{formatCurrency(impulsiveSpent)}</p>
<p className="text-sm font-medium text-mindful-earth-600">Impulse Spending</p>
<p className="text-2xl font-bold text-mindful-coral-600">{formatCurrency(impulsiveSpent)}</p>
</div>
<AlertCircle className="h-8 w-8 text-red-600" />
<AlertCircle className="h-8 w-8 text-mindful-coral-500" />
</div>
</div>

<div className="bg-white rounded-lg shadow-md p-6">
<div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-sage-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Entries This Week</p>
<p className="text-2xl font-bold text-gray-900">{entries.length}</p>
<p className="text-sm font-medium text-mindful-earth-600">Entries This Week</p>
<p className="text-2xl font-bold text-mindful-earth-800">{entries.length}</p>
</div>
<Brain className="h-8 w-8 text-green-600" />
<Brain className="h-8 w-8 text-mindful-sage-500" />
</div>
</div>

<div className="bg-white rounded-lg shadow-md p-6">
<div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 border border-mindful-lavender-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Active Insights</p>
<p className="text-2xl font-bold text-purple-600">{insights.length}</p>
<p className="text-sm font-medium text-mindful-earth-600">Active Insights</p>
<p className="text-2xl font-bold text-mindful-lavender-600">{insights.length}</p>
</div>
<Clock className="h-8 w-8 text-purple-600" />
<Clock className="h-8 w-8 text-mindful-lavender-500" />
</div>
</div>
</div>
Expand All @@ -87,33 +87,33 @@ export const HabitTracker: React.FC<HabitTrackerProps> = ({
)}

{/* Navigation Tabs */}
<div className="flex space-x-1 bg-gray-200 p-1 rounded-lg mb-8">
<div className="flex space-x-1 bg-mindful-sage-100/50 p-1 rounded-xl mb-8 backdrop-blur-sm">
<button
onClick={() => setActiveView('tracker')}
className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
className={`flex-1 py-3 px-4 rounded-lg font-medium transition-all duration-200 ${
activeView === 'tracker'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-600 hover:text-gray-800'
? 'bg-white/90 text-mindful-sage-700 shadow-lg backdrop-blur-sm'
: 'text-mindful-earth-600 hover:text-mindful-earth-800 hover:bg-white/30'
}`}
>
Track Spending
</button>
<button
onClick={() => setActiveView('triggers')}
className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
className={`flex-1 py-3 px-4 rounded-lg font-medium transition-all duration-200 ${
activeView === 'triggers'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-600 hover:text-gray-800'
? 'bg-white/90 text-mindful-sage-700 shadow-lg backdrop-blur-sm'
: 'text-mindful-earth-600 hover:text-mindful-earth-800 hover:bg-white/30'
}`}
>
Identify Triggers
</button>
<button
onClick={() => setActiveView('insights')}
className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
className={`flex-1 py-3 px-4 rounded-lg font-medium transition-all duration-200 ${
activeView === 'insights'
? 'bg-white text-blue-600 shadow-sm'
: 'text-gray-600 hover:text-gray-800'
? 'bg-white/90 text-mindful-sage-700 shadow-lg backdrop-blur-sm'
: 'text-mindful-earth-600 hover:text-mindful-earth-800 hover:bg-white/30'
}`}
>
Your Insights
Expand Down
Loading