Skip to content

Commit 37b1e4f

Browse files
author
divya sharma
committed
updated ui of coding owl
1 parent 4dc2554 commit 37b1e4f

1 file changed

Lines changed: 56 additions & 61 deletions

File tree

‎src/pages/CodingOwl.jsx‎

Lines changed: 56 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const CodingOwl = () => {
1010
const userName = userData?.name || "Developer";
1111
const userStreak = userData?.streak || 0;
1212
const [habits, setHabits] = useState(habitCards);
13-
const [timeLeft, setTimeLeft] = useState(1500); // 25:00 in seconds
13+
const [timeLeft, setTimeLeft] = useState(1500);
1414
const [timerActive, setTimerActive] = useState(false);
1515
const [isResetting, setIsResetting] = useState(false);
1616
const timerRef = useRef(null);
@@ -40,20 +40,15 @@ export const CodingOwl = () => {
4040
};
4141

4242
const resetTimer = () => {
43-
// Add reset animation
4443
setIsResetting(true);
4544

46-
// Clear the active interval if it exists
4745
if (timerRef.current) {
4846
clearInterval(timerRef.current);
4947
timerRef.current = null;
5048
}
51-
// Set timer to inactive state
5249
setTimerActive(false);
53-
// Reset time to 25:00 (1500 seconds)
5450
setTimeLeft(1500);
5551

56-
// Remove animation class after animation completes
5752
setTimeout(() => {
5853
setIsResetting(false);
5954
}, 500);
@@ -77,7 +72,7 @@ export const CodingOwl = () => {
7772
return { ...habit, progress: newProgress, streak: newStreak };
7873
}
7974
return habit;
80-
}),
75+
})
8176
);
8277
};
8378

@@ -93,71 +88,71 @@ export const CodingOwl = () => {
9388

9489
{/* Mascot & Streak Highlight */}
9590
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
96-
{/* Mascot bubble */}
97-
<Card className="lg:col-span-2 p-8 flex flex-col sm:flex-row items-center gap-6 bg-gradient-to-br from-orange-500/10 via-slate-50/0 to-slate-50/0 dark:from-orange-500/5 dark:via-slate-900/0 dark:to-slate-900/0 border-orange-500/15">
98-
{/* Mascot Mascot representation */}
99-
<div className="w-28 h-28 rounded-full bg-gradient-to-tr from-orange-400 to-red-500 flex items-center justify-center text-4xl shadow-lg border border-orange-400/25 flex-shrink-0 animate-bounce">
91+
{/* Mascot bubble - Enhanced visibility */}
92+
<div className="lg:col-span-2 p-8 flex flex-col sm:flex-row items-center gap-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg border-2 border-orange-200 dark:border-orange-800/50">
93+
{/* Mascot representation */}
94+
<div className="w-28 h-28 rounded-full bg-gradient-to-tr from-orange-400 to-red-500 flex items-center justify-center text-4xl shadow-lg border-2 border-orange-300 dark:border-orange-600 flex-shrink-0 animate-bounce">
10095
🦉
10196
</div>
10297

10398
<div className="space-y-3 flex-1 text-center sm:text-left">
104-
<h3 className="text-xl font-extrabold text-slate-950 dark:text-white my-0">
99+
<h3 className="text-xl font-extrabold text-slate-800 dark:text-white my-0">
105100
Mascot: Oliver the Owl
106101
</h3>
107102

108-
<div className="bg-white/80 dark:bg-slate-950/60 p-4 rounded-xl border border-slate-200/40 dark:border-slate-800/45 text-sm text-slate-600 dark:text-slate-300 leading-relaxed font-semibold italic relative">
103+
<div className="bg-orange-50 dark:bg-slate-700/50 p-4 rounded-xl border-2 border-orange-200 dark:border-orange-800/50 text-sm text-slate-700 dark:text-slate-200 leading-relaxed font-semibold italic relative">
109104
"Whoo-whoo! You've logged code for {userStreak} consecutive days,{" "}
110105
{userName}. Oliver is proud! Maintain your streak today to earn a
111106
1.5x points multiplier."
112107
</div>
113108

114-
<div className="flex justify-center sm:justify-start items-center gap-4 text-xs font-bold text-slate-400">
109+
<div className="flex justify-center sm:justify-start items-center gap-4 text-xs font-bold text-slate-500 dark:text-slate-400">
115110
<span>
116111
Mood: <span className="text-orange-500">Ecstatic! 🔥</span>
117112
</span>
118113
<span>•</span>
119114
<span>Next Check-in: 8 hours remaining</span>
120115
</div>
121116
</div>
122-
</Card>
117+
</div>
123118

124-
{/* Focus Timer Session Card */}
125-
<Card className="p-6 flex flex-col justify-between">
119+
{/* Focus Timer Session Card - Enhanced visibility */}
120+
<div className="p-6 flex flex-col justify-between bg-white dark:bg-slate-800 rounded-2xl shadow-lg border-2 border-orange-200 dark:border-orange-800/50">
126121
<div className="space-y-2">
127-
<span className="text-xs font-bold text-slate-400 uppercase">
122+
<span className="text-xs font-bold text-orange-500 dark:text-orange-400 uppercase">
128123
Focus Arena
129124
</span>
130-
<h3 className="text-lg font-extrabold text-slate-950 dark:text-white my-0">
125+
<h3 className="text-lg font-extrabold text-slate-800 dark:text-white my-0">
131126
Focus Mode Session
132127
</h3>
133-
<p className="text-xs text-slate-500 dark:text-slate-400">
128+
<p className="text-xs text-slate-600 dark:text-slate-400">
134129
Lock out distractions and log heads-down coding time.
135130
</p>
136131
</div>
137132

138-
{/* Timer visualization with reset animation effect */}
133+
{/* Timer visualization */}
139134
<div className="my-6 text-center flex flex-col items-center justify-center">
140135
<span
141-
className={`text-4xl font-black text-slate-900 dark:text-white tracking-widest block font-mono transition-all duration-300 ${
136+
className={`text-4xl font-black text-slate-800 dark:text-white tracking-widest block font-mono transition-all duration-300 ${
142137
isResetting
143138
? "scale-110 text-orange-500 rotate-12"
144139
: "scale-100"
145140
}`}
146141
>
147142
{formatTime(timeLeft)}
148143
</span>
149-
<span className="text-[10px] text-slate-400 uppercase font-bold mt-1.5 block">
144+
<span className="text-[10px] text-slate-500 dark:text-slate-400 uppercase font-bold mt-1.5 block">
150145
Pomodoro Interval
151146
</span>
152147
</div>
153148

154149
<div className="flex items-center gap-2">
155150
<button
156151
onClick={toggleTimer}
157-
className={`flex-1 py-2.5 rounded-xl font-bold border text-sm transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer ${
152+
className={`flex-1 py-2.5 rounded-xl font-bold border-2 text-sm transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer ${
158153
timerActive
159-
? "bg-amber-500 hover:bg-amber-600 text-white border-amber-500"
160-
: "bg-gradient-to-r from-orange-500 to-red-500 hover:opacity-90 text-white border-orange-500"
154+
? "bg-amber-500 hover:bg-amber-600 text-white border-amber-600"
155+
: "bg-gradient-to-r from-orange-500 to-red-500 hover:opacity-90 text-white border-orange-600"
161156
}`}
162157
>
163158
<Timer className="w-4 h-4" />{" "}
@@ -168,34 +163,34 @@ export const CodingOwl = () => {
168163
disabled={isResetting}
169164
className={`px-4 py-2.5 rounded-xl font-bold transition-all duration-300 text-sm cursor-pointer flex items-center justify-center gap-2 ${
170165
isResetting
171-
? "bg-slate-300 dark:bg-slate-700 cursor-not-allowed opacity-60"
172-
: "bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 hover:scale-105 active:scale-95"
173-
} border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-350`}
166+
? "bg-slate-200 dark:bg-slate-600 cursor-not-allowed opacity-60"
167+
: "bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 hover:scale-105 active:scale-95"
168+
} border-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200`}
174169
>
175170
<RotateCcw
176171
className={`w-4 h-4 transition-transform duration-300 ${isResetting ? "animate-spin" : "group-hover:rotate-180"}`}
177172
/>
178173
Reset
179174
</button>
180175
</div>
181-
</Card>
176+
</div>
182177
</div>
183178

184179
{/* Habits Checklist Grid */}
185180
<div className="space-y-4">
186-
<h3 className="font-extrabold text-lg text-slate-900 dark:text-white my-0">
181+
<h3 className="font-extrabold text-lg text-slate-800 dark:text-white my-0">
187182
Your Habit Dashboard
188183
</h3>
189184

190185
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
191186
{habits.map((habit) => (
192-
<Card
187+
<div
193188
key={habit.id}
194-
className="p-5 flex flex-col justify-between border-slate-200/50 dark:border-slate-800/50 hover:border-orange-500/25 transition-all"
189+
className="p-5 flex flex-col justify-between bg-white dark:bg-slate-800 rounded-2xl shadow-lg border-2 border-slate-200 dark:border-slate-700 hover:border-orange-300 dark:hover:border-orange-700 transition-all"
195190
>
196191
<div className="space-y-3">
197192
<div className="flex items-center justify-between">
198-
<span className="px-2 py-0.5 rounded-full text-[9px] font-bold bg-orange-500/10 text-orange-500 dark:text-orange-400 border border-orange-500/20">
193+
<span className="px-2 py-0.5 rounded-full text-[9px] font-bold bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 border border-orange-200 dark:border-orange-800">
199194
{habit.frequency}
200195
</span>
201196

@@ -204,24 +199,24 @@ export const CodingOwl = () => {
204199
</span>
205200
</div>
206201

207-
<h4 className="font-extrabold text-slate-900 dark:text-white leading-tight my-0">
202+
<h4 className="font-extrabold text-slate-800 dark:text-white leading-tight my-0">
208203
{habit.title}
209204
</h4>
210205

211-
<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
206+
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-medium">
212207
{habit.description}
213208
</p>
214209
</div>
215210

216-
{/* Progress Slider */}
217-
<div className="mt-6 pt-3 border-t border-slate-100 dark:border-slate-800/80 space-y-2">
218-
<div className="flex justify-between items-center text-[10px] font-bold text-slate-400">
211+
{/* Progress Section */}
212+
<div className="mt-6 pt-3 border-t-2 border-slate-100 dark:border-slate-700 space-y-2">
213+
<div className="flex justify-between items-center text-[10px] font-bold text-slate-500 dark:text-slate-400">
219214
<span>Today's status</span>
220215
<span
221216
className={
222217
habit.progress === 100
223218
? "text-emerald-500"
224-
: "text-slate-400"
219+
: "text-slate-500 dark:text-slate-400"
225220
}
226221
>
227222
{habit.progress === 100 ? "Completed" : "In Progress"}
@@ -230,10 +225,10 @@ export const CodingOwl = () => {
230225

231226
<button
232227
onClick={() => toggleHabitComplete(habit.id)}
233-
className={`w-full py-1.5 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1 cursor-pointer ${
228+
className={`w-full py-1.5 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1 cursor-pointer border-2 ${
234229
habit.progress === 100
235-
? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20"
236-
: "bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-350 border border-slate-200/50 dark:border-slate-750"
230+
? "bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800"
231+
: "bg-slate-50 dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 border-slate-200 dark:border-slate-600"
237232
}`}
238233
>
239234
{habit.progress === 100 ? (
@@ -248,44 +243,44 @@ export const CodingOwl = () => {
248243
)}
249244
</button>
250245
</div>
251-
</Card>
246+
</div>
252247
))}
253248
</div>
254249
</div>
255250

256-
{/* 4 Weeks Consistency heatmap representation */}
257-
<Card className="p-6">
258-
<div className="pb-4 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
251+
{/* Weekly Consistency heatmap - Enhanced visibility */}
252+
<div className="p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg border-2 border-slate-200 dark:border-slate-700">
253+
<div className="pb-4 border-b-2 border-slate-100 dark:border-slate-700 flex items-center justify-between">
259254
<div>
260-
<h3 className="font-extrabold text-lg text-slate-900 dark:text-white my-0">
255+
<h3 className="font-extrabold text-lg text-slate-800 dark:text-white my-0">
261256
Weekly Consistency Grid
262257
</h3>
263-
<p className="text-xs text-slate-400 dark:text-slate-500">
258+
<p className="text-xs text-slate-500 dark:text-slate-400">
264259
A historical log of your daily check-in marks.
265260
</p>
266261
</div>
267-
<span className="text-xs font-bold text-orange-500">
262+
<span className="text-xs font-bold text-orange-500 dark:text-orange-400">
268263
Last 4 Weeks
269264
</span>
270265
</div>
271266

272267
<div className="mt-6 grid grid-cols-4 gap-6">
273268
{weeklyHeatmap.map((week, idx) => (
274269
<div key={idx} className="space-y-3">
275-
<span className="text-xs font-bold text-slate-400 block text-center">
270+
<span className="text-xs font-bold text-slate-500 dark:text-slate-400 block text-center">
276271
Week {week.week}
277272
</span>
278273

279-
<div className="flex justify-between items-center gap-1.5 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-950/30 border border-slate-200/40 dark:border-slate-800/40">
274+
<div className="flex justify-between items-center gap-1.5 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-700/50 border-2 border-slate-200 dark:border-slate-700">
280275
{week.days.map((day, dayIdx) => (
281276
<div
282277
key={dayIdx}
283278
className={`w-3 h-3 rounded-full ${
284279
day === 2
285-
? "bg-gradient-to-r from-orange-500 to-red-500 shadow-md shadow-orange-500/20"
280+
? "bg-gradient-to-r from-orange-500 to-red-500 shadow-lg shadow-orange-500/30 ring-2 ring-orange-300 dark:ring-orange-700"
286281
: day === 1
287-
? "bg-orange-500/40 dark:bg-orange-500/20"
288-
: "bg-slate-200 dark:bg-slate-800/50"
282+
? "bg-orange-400 dark:bg-orange-500/40 ring-2 ring-orange-200 dark:ring-orange-800"
283+
: "bg-slate-300 dark:bg-slate-600 ring-2 ring-slate-200 dark:ring-slate-700"
289284
}`}
290285
title={`Day status: ${day}`}
291286
/>
@@ -295,23 +290,23 @@ export const CodingOwl = () => {
295290
))}
296291
</div>
297292

298-
<div className="flex justify-center gap-6 mt-6 text-xs text-slate-400 font-bold">
293+
<div className="flex justify-center gap-6 mt-6 text-xs text-slate-600 dark:text-slate-400 font-bold">
299294
<div className="flex items-center gap-1.5">
300-
<div className="w-2.5 h-2.5 rounded-full bg-slate-200 dark:bg-slate-800" />
295+
<div className="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-600 ring-2 ring-slate-200 dark:ring-slate-700" />
301296
<span>Missed</span>
302297
</div>
303298
<div className="flex items-center gap-1.5">
304-
<div className="w-2.5 h-2.5 rounded-full bg-orange-500/20" />
299+
<div className="w-2.5 h-2.5 rounded-full bg-orange-400 dark:bg-orange-500/40 ring-2 ring-orange-200 dark:ring-orange-800" />
305300
<span>Logged</span>
306301
</div>
307302
<div className="flex items-center gap-1.5">
308-
<div className="w-2.5 h-2.5 rounded-full bg-gradient-to-r from-orange-500 to-red-500" />
303+
<div className="w-2.5 h-2.5 rounded-full bg-gradient-to-r from-orange-500 to-red-500 ring-2 ring-orange-300 dark:ring-orange-700" />
309304
<span>Bonus Multiplier Achieved</span>
310305
</div>
311306
</div>
312-
</Card>
307+
</div>
313308
</div>
314309
);
315310
};
316311

317-
export default CodingOwl;
312+
export default CodingOwl;

0 commit comments

Comments
 (0)