harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-18 20:03:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

2am UI improvements

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-22 02:08:08 -05:00
parent 2dadddb31d
commit f59a64237d
2 changed files with 82 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/App.tsx
View file

@ -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,6 +160,7 @@ function HabitTrackerContent() {
</form> </form>
</div> </div>
<div className="relative z-10">
<div className="mb-6"> <div className="mb-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div> <div>
@ -228,19 +221,11 @@ function HabitTrackerContent() {
)} )}
</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 />}

16
src/components/Sidebar.tsx
View file

@ -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