From 03e20b34819659855567c1c3edee5e21ab121ec8 Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Sat, 4 Jul 2026 22:14:23 +0330
Subject: [PATCH] fix(habit): adjust UI details and fix refresh animation
 condition

---
 .../widgets/habit/components/habit-form.modal.tsx    |  6 +++---
 .../widgets/habit/components/item/habit.item.tsx     | 12 ++++++------
 src/layouts/widgets/habit/habits.layout.tsx          |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/layouts/widgets/habit/components/habit-form.modal.tsx b/src/layouts/widgets/habit/components/habit-form.modal.tsx
index 0bcf9ad4..8605215b 100644
--- a/src/layouts/widgets/habit/components/habit-form.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-form.modal.tsx
@@ -147,13 +147,13 @@ export function HabitFormModal({
 				<div className="grid grid-cols-2 gap-4">
 					<div>
 						<label className="block mb-1 text-xs text-muted">شکلک</label>
-						<div className="grid grid-cols-5 gap-1.5 py-1 h-20 max-h-20 overflow-y-auto pl-1">
+						<div className="grid grid-cols-5 gap-1.5 py-1 h-24 max-h-24 overflow-y-auto pl-1">
 							{icons.map((emoji) => (
 								<button
 									key={emoji.content}
 									type="button"
 									onClick={() => updateField('emoji', emoji.content)}
-									className={`flex items-center justify-center cursor-pointer w-8 h-8 text-base rounded-lg border transition-all ${
+									className={`flex items-center justify-center cursor-pointer w-8 h-8 text-base rounded-xl border transition-all ${
 										form.emoji === emoji.content
 											? 'border-primary bg-primary/10'
 											: 'border-content bg-base-300/40'
@@ -166,7 +166,7 @@ export function HabitFormModal({
 					</div>
 					<div>
 						<label className="block mb-1 text-xs text-muted">رنگ</label>
-						<div className="grid h-20 grid-cols-5 gap-1 py-1 overflow-y-auto max-h-20">
+						<div className="grid h-24 grid-cols-5 gap-1 py-1 overflow-y-auto max-h-24">
 							{colors.map((color) => (
 								<button
 									key={color}
diff --git a/src/layouts/widgets/habit/components/item/habit.item.tsx b/src/layouts/widgets/habit/components/item/habit.item.tsx
index b9a7f88c..ac573247 100644
--- a/src/layouts/widgets/habit/components/item/habit.item.tsx
+++ b/src/layouts/widgets/habit/components/item/habit.item.tsx
@@ -66,10 +66,10 @@ export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemP
 				</div>
 
 				<div className="flex-1 min-w-0">
-					<p className="text-xs font-semibold truncate text-content">
+					<p className="text-xs font-bold truncate text-content">
 						{habit.title}
 					</p>
-					<p className="mt-0.5 text-[10px] truncate text-muted">
+					<p className="mt-0.5 text-[9px] truncate text-muted">
 						{formatHabitGoal(habit)}
 					</p>
 				</div>
@@ -92,7 +92,7 @@ export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemP
 									target={target}
 									color={color}
 									size={28}
-									strokeWidth={3.5}
+									strokeWidth={3}
 								/>
 							) : (
 								<SegmentedProgressRing
@@ -100,7 +100,7 @@ export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemP
 									target={target}
 									color={color}
 									size={28}
-									strokeWidth={3.5}
+									strokeWidth={3}
 									gap={6}
 								/>
 							)}
@@ -109,9 +109,9 @@ export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemP
 
 					<div className="relative z-10 flex items-center justify-center w-8 h-8 rounded-full">
 						{habit.today.isDone ? (
-							<Icon name="check" size={12} strokeWidth={3} />
+							<Icon name="check" size={12} strokeWidth={2.5} />
 						) : isSimpleHabit ? (
-							<Icon name="check" size={12} strokeWidth={3} />
+							<Icon name="check" size={12} strokeWidth={2.5} />
 						) : (
 							<Icon name="plus" size={12} strokeWidth={3} />
 						)}
diff --git a/src/layouts/widgets/habit/habits.layout.tsx b/src/layouts/widgets/habit/habits.layout.tsx
index a6c14b96..6229d72e 100644
--- a/src/layouts/widgets/habit/habits.layout.tsx
+++ b/src/layouts/widgets/habit/habits.layout.tsx
@@ -112,7 +112,7 @@ export function HabitsContent() {
 								<Icon
 									name="refresh"
 									className={`text-content opacity-50 hover:opacity-100 ${
-										isLoading ? 'animate-spin' : ''
+										isWaiting ? 'animate-spin' : ''
 									}`}
 								/>
 							</Button>