mirror of
https://github.com/harivansh-afk/Habit-Tracker.git
synced 2026-04-17 04:02:24 +00:00
2am UI improvements
This commit is contained in:
parent
2dadddb31d
commit
f59a64237d
2 changed files with 82 additions and 80 deletions
146
src/App.tsx
146
src/App.tsx
|
|
@ -88,15 +88,6 @@ function HabitTrackerContent() {
|
||||||
|
|
||||||
const renderHabitsView = () => (
|
const renderHabitsView = () => (
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div className="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] opacity-[0.02] dark:opacity-[0.04]">
|
|
||||||
<Circle className="w-full h-full" />
|
|
||||||
</div>
|
|
||||||
<div className="absolute bottom-[-20%] left-[-10%] w-[50%] h-[50%] opacity-[0.015] dark:opacity-[0.03]">
|
|
||||||
<Circle className="w-full h-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="max-w-5xl mx-auto relative">
|
<div className="max-w-5xl mx-auto relative">
|
||||||
<div className="md:hidden mb-4">
|
<div className="md:hidden mb-4">
|
||||||
<div className={`
|
<div className={`
|
||||||
|
|
@ -126,6 +117,7 @@ function HabitTrackerContent() {
|
||||||
${theme.cardBackground}
|
${theme.cardBackground}
|
||||||
${theme.border}
|
${theme.border}
|
||||||
border
|
border
|
||||||
|
relative z-10
|
||||||
`}>
|
`}>
|
||||||
<form onSubmit={handleAddHabit} className="space-y-4 md:space-y-0 md:flex md:items-center md:gap-4">
|
<form onSubmit={handleAddHabit} className="space-y-4 md:space-y-0 md:flex md:items-center md:gap-4">
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
|
|
@ -168,79 +160,72 @@ function HabitTrackerContent() {
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-6">
|
<div className="relative z-10">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="mb-6">
|
||||||
<div>
|
<div className="flex items-center justify-between mb-4">
|
||||||
<h2 className={`text-xl font-bold ${theme.text}`}>Your Habits</h2>
|
<div>
|
||||||
<p className={`text-sm ${theme.mutedText}`}>Track your weekly progress</p>
|
<h2 className={`text-xl font-bold ${theme.text}`}>Your Habits</h2>
|
||||||
</div>
|
<p className={`text-sm ${theme.mutedText}`}>Track your weekly progress</p>
|
||||||
<div className="flex gap-2">
|
</div>
|
||||||
<button
|
<div className="flex gap-2">
|
||||||
onClick={() => changeWeek('prev')}
|
<button
|
||||||
className={`p-2 rounded-lg ${theme.button.icon}`}
|
onClick={() => changeWeek('prev')}
|
||||||
>
|
className={`p-2 rounded-lg ${theme.button.icon}`}
|
||||||
<ChevronLeft className="h-5 w-5" />
|
>
|
||||||
</button>
|
<ChevronLeft className="h-5 w-5" />
|
||||||
<button
|
</button>
|
||||||
onClick={goToCurrentWeek}
|
<button
|
||||||
className={`px-4 py-2 rounded-lg ${theme.button.secondary}`}
|
onClick={goToCurrentWeek}
|
||||||
>
|
className={`px-4 py-2 rounded-lg ${theme.button.secondary}`}
|
||||||
Today
|
>
|
||||||
</button>
|
Today
|
||||||
<button
|
</button>
|
||||||
onClick={() => changeWeek('next')}
|
<button
|
||||||
className={`p-2 rounded-lg ${theme.button.icon}`}
|
onClick={() => changeWeek('next')}
|
||||||
>
|
className={`p-2 rounded-lg ${theme.button.icon}`}
|
||||||
<ChevronRight className="h-5 w-5" />
|
>
|
||||||
</button>
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="flex justify-center items-center py-8">
|
<div className="flex justify-center items-center py-8">
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
|
||||||
</div>
|
</div>
|
||||||
) : error ? (
|
) : error ? (
|
||||||
<div className="text-red-500 text-center py-4">
|
<div className="text-red-500 text-center py-4">
|
||||||
{error}
|
{error}
|
||||||
<button
|
<button
|
||||||
onClick={fetchHabits}
|
onClick={fetchHabits}
|
||||||
className="ml-2 text-blue-500 hover:underline"
|
className="ml-2 text-blue-500 hover:underline"
|
||||||
>
|
>
|
||||||
Retry
|
Retry
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<HabitList
|
<HabitList
|
||||||
habits={getSortedHabits()}
|
habits={getSortedHabits()}
|
||||||
currentWeek={currentWeek}
|
currentWeek={currentWeek}
|
||||||
daysOfWeek={DAYS_OF_WEEK}
|
daysOfWeek={DAYS_OF_WEEK}
|
||||||
onToggleHabit={toggleHabit}
|
onToggleHabit={toggleHabit}
|
||||||
onUpdateHabit={updateHabit}
|
onUpdateHabit={updateHabit}
|
||||||
onDeleteHabit={deleteHabit}
|
onDeleteHabit={deleteHabit}
|
||||||
/>
|
/>
|
||||||
<p className={`text-sm ${theme.mutedText} mt-4`}>
|
<p className={`text-sm ${theme.mutedText} mt-4`}>
|
||||||
Keep up the good work! Consistency is key.
|
Keep up the good work! Consistency is key.
|
||||||
</p>
|
</p>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderCalendarView = () => (
|
const renderCalendarView = () => (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div className="absolute top-[-15%] right-[-10%] w-[45%] h-[45%] opacity-[0.02] dark:opacity-[0.04]">
|
|
||||||
<Circle className="w-full h-full" />
|
|
||||||
</div>
|
|
||||||
<div className="absolute bottom-[-25%] left-[-15%] w-[55%] h-[55%] opacity-[0.015] dark:opacity-[0.03]">
|
|
||||||
<Circle className="w-full h-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Calendar
|
<Calendar
|
||||||
currentMonth={currentMonth}
|
currentMonth={currentMonth}
|
||||||
habits={habits}
|
habits={habits}
|
||||||
|
|
@ -268,15 +253,24 @@ function HabitTrackerContent() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`min-h-screen ${theme.background}`}>
|
<div className={`min-h-screen ${theme.background} relative overflow-hidden`}>
|
||||||
<div className="flex flex-col md:flex-row h-screen">
|
<div className="fixed inset-0 overflow-hidden pointer-events-none" style={{ zIndex: 0 }}>
|
||||||
|
<div className="absolute top-[10%] right-[-5%] w-[60%] h-[60%] opacity-[0.02] dark:opacity-[0.04]">
|
||||||
|
<Circle className="w-full h-full" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-[-10%] left-[-10%] w-[70%] h-[70%] opacity-[0.015] dark:opacity-[0.03]">
|
||||||
|
<Circle className="w-full h-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row h-screen relative" style={{ zIndex: 1 }}>
|
||||||
<div className="md:hidden">
|
<div className="md:hidden">
|
||||||
<MobileNav activeView={activeView} setActiveView={setActiveView} />
|
<MobileNav activeView={activeView} setActiveView={setActiveView} />
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:block">
|
<div className="hidden md:block">
|
||||||
<Sidebar activeView={activeView} setActiveView={setActiveView} />
|
<Sidebar activeView={activeView} setActiveView={setActiveView} />
|
||||||
</div>
|
</div>
|
||||||
<main className="flex-1 p-4 md:p-8 overflow-y-auto pb-24 md:pb-8 relative">
|
<main className="flex-1 p-4 md:p-8 overflow-y-auto pb-24 md:pb-8">
|
||||||
{activeView === 'habits' && renderHabitsView()}
|
{activeView === 'habits' && renderHabitsView()}
|
||||||
{activeView === 'calendar' && renderCalendarView()}
|
{activeView === 'calendar' && renderCalendarView()}
|
||||||
{activeView === 'settings' && <SettingsView />}
|
{activeView === 'settings' && <SettingsView />}
|
||||||
|
|
|
||||||
|
|
@ -63,10 +63,18 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) =
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
|
<div className="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
|
||||||
<div className={`w-full px-6 py-3 rounded-lg ${theme.text} ${theme.habitItem} flex items-center`}>
|
<div className={`
|
||||||
<User className="h-5 w-5 mr-3" />
|
w-full px-4 py-2
|
||||||
<div className="flex-1 truncate">
|
rounded-lg
|
||||||
<span className="font-medium block truncate">{user?.email}</span>
|
bg-gray-100 dark:bg-gray-800
|
||||||
|
flex items-center
|
||||||
|
border border-gray-200 dark:border-gray-700
|
||||||
|
`}>
|
||||||
|
<User className="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400" />
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<span className="font-medium block truncate text-gray-700 dark:text-gray-300 text-sm">
|
||||||
|
{user?.email}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue