mirror of
https://github.com/harivansh-afk/Habit-Tracker.git
synced 2026-04-15 05:02:10 +00:00
updated UI of the app
This commit is contained in:
parent
b438e75c87
commit
749abb418f
2 changed files with 65 additions and 45 deletions
50
src/App.tsx
50
src/App.tsx
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { ChevronLeft, ChevronRight, Sun, Moon, Plus } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, Sun, Moon, Plus, Circle } from 'lucide-react';
|
||||
import { HabitList } from './components/HabitList';
|
||||
import { Calendar } from './components/Calendar';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
|
|
@ -87,8 +87,17 @@ function HabitTrackerContent() {
|
|||
};
|
||||
|
||||
const renderHabitsView = () => (
|
||||
<div className="flex-1">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<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={`
|
||||
mb-8 p-4 md:p-6
|
||||
rounded-lg shadow-md
|
||||
|
|
@ -200,17 +209,28 @@ function HabitTrackerContent() {
|
|||
);
|
||||
|
||||
const renderCalendarView = () => (
|
||||
<Calendar
|
||||
currentMonth={currentMonth}
|
||||
habits={habits}
|
||||
onChangeMonth={changeMonth}
|
||||
getDaysInMonth={(year, month) => new Date(year, month + 1, 0).getDate()}
|
||||
getCompletedHabitsForDate={getCompletedHabitsForDate}
|
||||
onToggleHabit={async (habitId, date) => {
|
||||
await toggleHabit(habitId, date);
|
||||
await fetchHabits();
|
||||
}}
|
||||
/>
|
||||
<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
|
||||
currentMonth={currentMonth}
|
||||
habits={habits}
|
||||
onChangeMonth={changeMonth}
|
||||
getDaysInMonth={(year, month) => new Date(year, month + 1, 0).getDate()}
|
||||
getCompletedHabitsForDate={getCompletedHabitsForDate}
|
||||
onToggleHabit={async (habitId, date) => {
|
||||
await toggleHabit(habitId, date);
|
||||
await fetchHabits();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
|
|
@ -234,7 +254,7 @@ function HabitTrackerContent() {
|
|||
<div className="hidden md:block">
|
||||
<Sidebar activeView={activeView} setActiveView={setActiveView} />
|
||||
</div>
|
||||
<main className="flex-1 p-4 md:p-8 overflow-y-auto pb-24 md:pb-8">
|
||||
<main className="flex-1 p-4 md:p-8 overflow-y-auto pb-24 md:pb-8 relative">
|
||||
{activeView === 'habits' && renderHabitsView()}
|
||||
{activeView === 'calendar' && renderCalendarView()}
|
||||
{activeView === 'settings' && <SettingsView />}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export const lightTheme = {
|
||||
// Background colors
|
||||
background: 'bg-[#ffffff]',
|
||||
cardBackground: 'bg-[#ffffff]',
|
||||
sidebarBackground: 'bg-[#fbfbfa]',
|
||||
background: 'bg-[#fafafa]',
|
||||
cardBackground: 'bg-white/80 backdrop-blur-[2px]',
|
||||
sidebarBackground: 'bg-white/90 backdrop-blur-[2px]',
|
||||
|
||||
// Text colors
|
||||
text: 'text-[#37352f]',
|
||||
|
|
@ -31,11 +31,11 @@ export const lightTheme = {
|
|||
|
||||
// Calendar specific (expanded)
|
||||
calendar: {
|
||||
background: 'bg-[#ffffff]',
|
||||
background: 'bg-white/80 backdrop-blur-[2px]',
|
||||
header: 'text-[#37352f]',
|
||||
weekDay: 'text-[#787774]',
|
||||
day: {
|
||||
default: 'bg-[#ffffff] hover:bg-[#f1f1ef] text-[#37352f] shadow-sm',
|
||||
default: 'bg-white/90 hover:bg-[#f1f1ef] text-[#37352f] shadow-sm',
|
||||
selected: 'bg-[#37352f] text-white',
|
||||
today: 'ring-1 ring-inset ring-black/5 dark:ring-white/5',
|
||||
otherMonth: 'text-[#787774] bg-[#fafafa]'
|
||||
|
|
@ -45,7 +45,7 @@ export const lightTheme = {
|
|||
icon: 'h-5 w-5 text-[#37352f]'
|
||||
},
|
||||
tooltip: {
|
||||
background: 'bg-[#ffffff]',
|
||||
background: 'bg-white/95 backdrop-blur-[4px]',
|
||||
border: 'border-[#e9e9e8]',
|
||||
shadow: 'shadow-lg shadow-[#00000008]'
|
||||
}
|
||||
|
|
@ -61,60 +61,60 @@ export const lightTheme = {
|
|||
export const darkTheme = {
|
||||
// Background colors
|
||||
background: 'bg-[#191919]',
|
||||
cardBackground: 'bg-[#2f2f2f]',
|
||||
sidebarBackground: 'bg-[#191919]',
|
||||
cardBackground: 'bg-[#232323]/80 backdrop-blur-[2px]',
|
||||
sidebarBackground: 'bg-[#1d1d1d]/90 backdrop-blur-[2px]',
|
||||
|
||||
// Text colors
|
||||
text: 'text-[#ffffff]',
|
||||
text: 'text-[#e6e6e6]',
|
||||
mutedText: 'text-[#999999]',
|
||||
|
||||
// Border colors
|
||||
border: 'border-[#393939]',
|
||||
border: 'border-[#2a2a2a]',
|
||||
|
||||
// Interactive elements
|
||||
button: {
|
||||
primary: 'bg-[#ffffff] text-[#191919] hover:bg-[#e6e6e6]',
|
||||
secondary: 'bg-[#363636] text-[#ffffff] hover:bg-[#424242]',
|
||||
icon: 'hover:bg-[#363636] text-[#ffffff]'
|
||||
primary: 'bg-[#e6e6e6] text-[#191919] hover:bg-[#d1d1d1]',
|
||||
secondary: 'bg-[#2a2a2a] text-[#e6e6e6] hover:bg-[#333333]',
|
||||
icon: 'hover:bg-[#2a2a2a] text-[#e6e6e6]'
|
||||
},
|
||||
|
||||
// Input elements
|
||||
input: 'bg-[#2f2f2f] border-[#393939] focus:border-[#525252] text-[#ffffff]',
|
||||
input: 'bg-[#232323] border-[#2a2a2a] focus:border-[#404040] text-[#e6e6e6]',
|
||||
|
||||
// Calendar specific
|
||||
calendarDay: 'bg-[#2f2f2f] hover:bg-[#363636]',
|
||||
calendarDaySelected: 'bg-[#ffffff] text-[#191919]',
|
||||
calendarDay: 'bg-[#232323] hover:bg-[#2a2a2a]',
|
||||
calendarDaySelected: 'bg-[#e6e6e6] text-[#191919]',
|
||||
|
||||
// Habit list specific
|
||||
habitItem: 'hover:bg-[#363636]',
|
||||
habitCheckbox: 'border-[#393939] text-[#ffffff]',
|
||||
habitItem: 'hover:bg-[#2a2a2a]',
|
||||
habitCheckbox: 'border-[#2a2a2a] text-[#e6e6e6]',
|
||||
|
||||
// Calendar specific (expanded)
|
||||
calendar: {
|
||||
background: 'bg-[#191919]',
|
||||
header: 'text-[#ffffff]',
|
||||
background: 'bg-[#232323]/90 backdrop-blur-[2px]',
|
||||
header: 'text-[#e6e6e6]',
|
||||
weekDay: 'text-[#999999]',
|
||||
day: {
|
||||
default: 'bg-[#2f2f2f] hover:bg-[#363636] text-[#ffffff] shadow-md shadow-[#00000030]',
|
||||
selected: 'bg-[#ffffff] text-[#191919]',
|
||||
default: 'bg-[#232323]/90 hover:bg-[#2a2a2a] text-[#e6e6e6] shadow-sm shadow-[#00000015]',
|
||||
selected: 'bg-[#e6e6e6] text-[#191919]',
|
||||
today: 'ring-1 ring-inset ring-white/10',
|
||||
otherMonth: 'text-[#666666] bg-[#242424]'
|
||||
otherMonth: 'text-[#666666] bg-[#1f1f1f]'
|
||||
},
|
||||
navigation: {
|
||||
button: 'hover:bg-[#363636] text-[#ffffff]',
|
||||
icon: 'h-5 w-5 text-[#ffffff]'
|
||||
button: 'hover:bg-[#2a2a2a] text-[#e6e6e6]',
|
||||
icon: 'h-5 w-5 text-[#e6e6e6]'
|
||||
},
|
||||
tooltip: {
|
||||
background: 'bg-[#2f2f2f]',
|
||||
border: 'border-[#393939]',
|
||||
shadow: 'shadow-lg shadow-[#00000050]'
|
||||
background: 'bg-[#232323]/95 backdrop-blur-[4px]',
|
||||
border: 'border-[#2a2a2a]',
|
||||
shadow: 'shadow-lg shadow-[#00000030]'
|
||||
}
|
||||
},
|
||||
|
||||
// Navigation
|
||||
nav: {
|
||||
active: 'bg-[#363636]/80 text-white shadow-inner',
|
||||
inactive: 'text-white/70 hover:bg-[#363636]/50'
|
||||
active: 'bg-[#2a2a2a]/80 text-[#e6e6e6] shadow-inner',
|
||||
inactive: 'text-[#e6e6e6]/80 hover:bg-[#2a2a2a]/50'
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue