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

updated UI of the app

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-22 01:31:27 -05:00
parent b438e75c87
commit 749abb418f
2 changed files with 65 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/App.tsx
View file

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; 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 { HabitList } from './components/HabitList';
import { Calendar } from './components/Calendar'; import { Calendar } from './components/Calendar';
import { Sidebar } from './components/Sidebar'; import { Sidebar } from './components/Sidebar';
@ -87,8 +87,17 @@ function HabitTrackerContent() {
}; };
const renderHabitsView = () => ( const renderHabitsView = () => (
<div className="flex-1"> <div className="flex-1 relative">
<div className="max-w-5xl mx-auto"> <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={` <div className={`
mb-8 p-4 md:p-6 mb-8 p-4 md:p-6
rounded-lg shadow-md rounded-lg shadow-md
@ -200,17 +209,28 @@ function HabitTrackerContent() {
); );
const renderCalendarView = () => ( const renderCalendarView = () => (
<Calendar <div className="relative">
currentMonth={currentMonth} <div className="absolute inset-0 overflow-hidden pointer-events-none">
habits={habits} <div className="absolute top-[-15%] right-[-10%] w-[45%] h-[45%] opacity-[0.02] dark:opacity-[0.04]">
onChangeMonth={changeMonth} <Circle className="w-full h-full" />
getDaysInMonth={(year, month) => new Date(year, month + 1, 0).getDate()} </div>
getCompletedHabitsForDate={getCompletedHabitsForDate} <div className="absolute bottom-[-25%] left-[-15%] w-[55%] h-[55%] opacity-[0.015] dark:opacity-[0.03]">
onToggleHabit={async (habitId, date) => { <Circle className="w-full h-full" />
await toggleHabit(habitId, date); </div>
await fetchHabits(); </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) { if (loading) {
@ -234,7 +254,7 @@ function HabitTrackerContent() {
<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"> <main className="flex-1 p-4 md:p-8 overflow-y-auto pb-24 md:pb-8 relative">
{activeView === 'habits' && renderHabitsView()} {activeView === 'habits' && renderHabitsView()}
{activeView === 'calendar' && renderCalendarView()} {activeView === 'calendar' && renderCalendarView()}
{activeView === 'settings' && <SettingsView />} {activeView === 'settings' && <SettingsView />}

60
src/styles/theme.ts
View file

@ -1,8 +1,8 @@
export const lightTheme = { export const lightTheme = {
// Background colors // Background colors
background: 'bg-[#ffffff]', background: 'bg-[#fafafa]',
cardBackground: 'bg-[#ffffff]', cardBackground: 'bg-white/80 backdrop-blur-[2px]',
sidebarBackground: 'bg-[#fbfbfa]', sidebarBackground: 'bg-white/90 backdrop-blur-[2px]',
// Text colors // Text colors
text: 'text-[#37352f]', text: 'text-[#37352f]',
@ -31,11 +31,11 @@ export const lightTheme = {
// Calendar specific (expanded) // Calendar specific (expanded)
calendar: { calendar: {
background: 'bg-[#ffffff]', background: 'bg-white/80 backdrop-blur-[2px]',
header: 'text-[#37352f]', header: 'text-[#37352f]',
weekDay: 'text-[#787774]', weekDay: 'text-[#787774]',
day: { 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', selected: 'bg-[#37352f] text-white',
today: 'ring-1 ring-inset ring-black/5 dark:ring-white/5', today: 'ring-1 ring-inset ring-black/5 dark:ring-white/5',
otherMonth: 'text-[#787774] bg-[#fafafa]' otherMonth: 'text-[#787774] bg-[#fafafa]'
@ -45,7 +45,7 @@ export const lightTheme = {
icon: 'h-5 w-5 text-[#37352f]' icon: 'h-5 w-5 text-[#37352f]'
}, },
tooltip: { tooltip: {
background: 'bg-[#ffffff]', background: 'bg-white/95 backdrop-blur-[4px]',
border: 'border-[#e9e9e8]', border: 'border-[#e9e9e8]',
shadow: 'shadow-lg shadow-[#00000008]' shadow: 'shadow-lg shadow-[#00000008]'
} }
@ -61,60 +61,60 @@ export const lightTheme = {
export const darkTheme = { export const darkTheme = {
// Background colors // Background colors
background: 'bg-[#191919]', background: 'bg-[#191919]',
cardBackground: 'bg-[#2f2f2f]', cardBackground: 'bg-[#232323]/80 backdrop-blur-[2px]',
sidebarBackground: 'bg-[#191919]', sidebarBackground: 'bg-[#1d1d1d]/90 backdrop-blur-[2px]',
// Text colors // Text colors
text: 'text-[#ffffff]', text: 'text-[#e6e6e6]',
mutedText: 'text-[#999999]', mutedText: 'text-[#999999]',
// Border colors // Border colors
border: 'border-[#393939]', border: 'border-[#2a2a2a]',
// Interactive elements // Interactive elements
button: { button: {
primary: 'bg-[#ffffff] text-[#191919] hover:bg-[#e6e6e6]', primary: 'bg-[#e6e6e6] text-[#191919] hover:bg-[#d1d1d1]',
secondary: 'bg-[#363636] text-[#ffffff] hover:bg-[#424242]', secondary: 'bg-[#2a2a2a] text-[#e6e6e6] hover:bg-[#333333]',
icon: 'hover:bg-[#363636] text-[#ffffff]' icon: 'hover:bg-[#2a2a2a] text-[#e6e6e6]'
}, },
// Input elements // Input elements
input: 'bg-[#2f2f2f] border-[#393939] focus:border-[#525252] text-[#ffffff]', input: 'bg-[#232323] border-[#2a2a2a] focus:border-[#404040] text-[#e6e6e6]',
// Calendar specific // Calendar specific
calendarDay: 'bg-[#2f2f2f] hover:bg-[#363636]', calendarDay: 'bg-[#232323] hover:bg-[#2a2a2a]',
calendarDaySelected: 'bg-[#ffffff] text-[#191919]', calendarDaySelected: 'bg-[#e6e6e6] text-[#191919]',
// Habit list specific // Habit list specific
habitItem: 'hover:bg-[#363636]', habitItem: 'hover:bg-[#2a2a2a]',
habitCheckbox: 'border-[#393939] text-[#ffffff]', habitCheckbox: 'border-[#2a2a2a] text-[#e6e6e6]',
// Calendar specific (expanded) // Calendar specific (expanded)
calendar: { calendar: {
background: 'bg-[#191919]', background: 'bg-[#232323]/90 backdrop-blur-[2px]',
header: 'text-[#ffffff]', header: 'text-[#e6e6e6]',
weekDay: 'text-[#999999]', weekDay: 'text-[#999999]',
day: { day: {
default: 'bg-[#2f2f2f] hover:bg-[#363636] text-[#ffffff] shadow-md shadow-[#00000030]', default: 'bg-[#232323]/90 hover:bg-[#2a2a2a] text-[#e6e6e6] shadow-sm shadow-[#00000015]',
selected: 'bg-[#ffffff] text-[#191919]', selected: 'bg-[#e6e6e6] text-[#191919]',
today: 'ring-1 ring-inset ring-white/10', today: 'ring-1 ring-inset ring-white/10',
otherMonth: 'text-[#666666] bg-[#242424]' otherMonth: 'text-[#666666] bg-[#1f1f1f]'
}, },
navigation: { navigation: {
button: 'hover:bg-[#363636] text-[#ffffff]', button: 'hover:bg-[#2a2a2a] text-[#e6e6e6]',
icon: 'h-5 w-5 text-[#ffffff]' icon: 'h-5 w-5 text-[#e6e6e6]'
}, },
tooltip: { tooltip: {
background: 'bg-[#2f2f2f]', background: 'bg-[#232323]/95 backdrop-blur-[4px]',
border: 'border-[#393939]', border: 'border-[#2a2a2a]',
shadow: 'shadow-lg shadow-[#00000050]' shadow: 'shadow-lg shadow-[#00000030]'
} }
}, },
// Navigation // Navigation
nav: { nav: {
active: 'bg-[#363636]/80 text-white shadow-inner', active: 'bg-[#2a2a2a]/80 text-[#e6e6e6] shadow-inner',
inactive: 'text-white/70 hover:bg-[#363636]/50' inactive: 'text-[#e6e6e6]/80 hover:bg-[#2a2a2a]/50'
} }
}; };