mirror of
https://github.com/harivansh-afk/Habit-Tracker.git
synced 2026-04-18 07:01:32 +00:00
improved mobile ui
This commit is contained in:
parent
36126e6a65
commit
1cd3445bd6
5 changed files with 233 additions and 131 deletions
|
|
@ -41,19 +41,14 @@ export function HabitList({
|
|||
const date = new Date(dateStr);
|
||||
return (
|
||||
<th key={dateStr} className="px-4 py-2 text-center dark:text-white">
|
||||
<div>{getDayName(dateStr)}</div>
|
||||
<div className="hidden md:block">{getDayName(dateStr)}</div>
|
||||
<div className="md:hidden">{getDayName(dateStr).slice(0, 1)}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{date.getDate()}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
{showStreaks && (
|
||||
<>
|
||||
<th className="px-4 py-2 text-center dark:text-white">Current Streak</th>
|
||||
<th className="px-4 py-2 text-center dark:text-white">Best Streak</th>
|
||||
</>
|
||||
)}
|
||||
<th className="px-4 py-2 text-center dark:text-white">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -65,9 +60,7 @@ export function HabitList({
|
|||
type="text"
|
||||
value={habit.name}
|
||||
onChange={(e) => onUpdateHabit(habit.id, e.target.value)}
|
||||
aria-label="Habit name"
|
||||
placeholder="Enter habit name"
|
||||
className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2"
|
||||
className="bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-gray-300 rounded px-2 w-full"
|
||||
/>
|
||||
</td>
|
||||
{currentWeek.map((date) => (
|
||||
|
|
@ -76,27 +69,26 @@ export function HabitList({
|
|||
<input
|
||||
type="checkbox"
|
||||
checked={habit.completedDates.includes(date)}
|
||||
onChange={() => {
|
||||
onToggleHabit(habit.id, date);
|
||||
}}
|
||||
aria-label={`Mark ${habit.name} as completed for ${date}`}
|
||||
onChange={() => onToggleHabit(habit.id, date)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`
|
||||
w-6 h-6 rounded-md border-2 transition-all duration-200
|
||||
${habit.completedDates.includes(date)
|
||||
? 'bg-green-500 border-green-500'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:border-green-400 dark:hover:border-green-400'}
|
||||
flex items-center justify-center
|
||||
`}>
|
||||
<div
|
||||
className={`
|
||||
w-6 h-6 rounded-md border-2 transition-all duration-200
|
||||
${habit.completedDates.includes(date)
|
||||
? 'bg-green-500 border-green-500'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:border-green-400 dark:hover:border-green-400'}
|
||||
flex items-center justify-center
|
||||
`}
|
||||
>
|
||||
{habit.completedDates.includes(date) && (
|
||||
<svg
|
||||
className="w-4 h-4 text-white"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
<svg
|
||||
className="w-4 h-4 text-white"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M5 13l4 4L19 7"></path>
|
||||
|
|
@ -106,20 +98,6 @@ export function HabitList({
|
|||
</label>
|
||||
</td>
|
||||
))}
|
||||
{showStreaks && (
|
||||
<>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<span className="text-yellow-500 dark:text-yellow-400 font-medium text-lg">
|
||||
{calculateStreak(habit.completedDates || []).currentStreak}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<span className="text-yellow-500 dark:text-yellow-400 font-medium text-lg">
|
||||
{calculateStreak(habit.completedDates || []).bestStreak}
|
||||
</span>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
<td className="px-4 py-2 text-center">
|
||||
<button
|
||||
onClick={() => onDeleteHabit(habit.id)}
|
||||
|
|
|
|||
105
src/components/MobileNav.tsx
Normal file
105
src/components/MobileNav.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import React from 'react';
|
||||
import { Plus, CalendarIcon, SettingsIcon, LogOut } from 'lucide-react';
|
||||
import { useThemeContext } from '../contexts/ThemeContext';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
|
||||
type View = 'habits' | 'calendar' | 'settings';
|
||||
|
||||
interface MobileNavProps {
|
||||
activeView: View;
|
||||
setActiveView: (view: View) => void;
|
||||
}
|
||||
|
||||
export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView }) => {
|
||||
const { theme } = useThemeContext();
|
||||
const { signOut } = useAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Spacer to prevent content from being hidden behind the nav */}
|
||||
<div className="h-20 md:hidden" />
|
||||
|
||||
<nav className={`
|
||||
fixed bottom-4 left-4 right-4 md:hidden
|
||||
${theme.cardBackground}
|
||||
rounded-2xl shadow-lg backdrop-blur-lg
|
||||
border ${theme.border}
|
||||
z-50
|
||||
`}>
|
||||
<div className="flex justify-around items-center p-2">
|
||||
<NavButton
|
||||
active={activeView === 'habits'}
|
||||
onClick={() => setActiveView('habits')}
|
||||
icon={<Plus className="h-5 w-5" />}
|
||||
label="Habits"
|
||||
/>
|
||||
<NavButton
|
||||
active={activeView === 'calendar'}
|
||||
onClick={() => setActiveView('calendar')}
|
||||
icon={<CalendarIcon className="h-5 w-5" />}
|
||||
label="Calendar"
|
||||
/>
|
||||
<NavButton
|
||||
active={activeView === 'settings'}
|
||||
onClick={() => setActiveView('settings')}
|
||||
icon={<SettingsIcon className="h-5 w-5" />}
|
||||
label="Settings"
|
||||
/>
|
||||
<NavButton
|
||||
onClick={signOut}
|
||||
icon={<LogOut className="h-5 w-5" />}
|
||||
label="Sign Out"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
interface NavButtonProps {
|
||||
active?: boolean;
|
||||
onClick: () => void;
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
variant?: 'default' | 'danger';
|
||||
}
|
||||
|
||||
const NavButton: React.FC<NavButtonProps> = ({
|
||||
active = false,
|
||||
onClick,
|
||||
icon,
|
||||
label,
|
||||
variant = 'default'
|
||||
}) => {
|
||||
const { theme } = useThemeContext();
|
||||
|
||||
const baseStyles = "flex flex-col items-center justify-center px-3 py-2 rounded-xl transition-all duration-200";
|
||||
const variantStyles = variant === 'danger'
|
||||
? "text-red-500 hover:bg-red-500/10 active:bg-red-500/20"
|
||||
: `${active ? theme.nav.active : theme.nav.inactive}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`
|
||||
${baseStyles}
|
||||
${variantStyles}
|
||||
${active ? 'scale-95 shadow-inner' : 'hover:scale-105'}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
${active ? 'scale-95' : ''}
|
||||
transition-transform duration-200
|
||||
`}>
|
||||
{icon}
|
||||
</div>
|
||||
<span className={`
|
||||
text-xs mt-1 font-medium
|
||||
${active ? 'opacity-100' : 'opacity-70'}
|
||||
`}>
|
||||
{label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
@ -15,58 +15,61 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) =
|
|||
const { signOut } = useAuth();
|
||||
|
||||
return (
|
||||
<nav className={`w-64 border-r ${theme.border} ${theme.sidebarBackground} flex flex-col`}>
|
||||
<div className="p-4">
|
||||
<nav className={`w-72 h-screen sticky top-0 border-r ${theme.border} ${theme.sidebarBackground} flex flex-col`}>
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h1 className={`text-2xl font-bold ${theme.text}`}>Habit Tracker</h1>
|
||||
</div>
|
||||
<ul className="space-y-2 p-4 flex-grow">
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setActiveView('habits')}
|
||||
className={`w-full px-4 py-2 text-left rounded-lg ${
|
||||
activeView === 'habits'
|
||||
? theme.button.secondary
|
||||
: `${theme.text} ${theme.habitItem}`
|
||||
}`}
|
||||
>
|
||||
<Plus className="inline-block mr-2 h-4 w-4" />
|
||||
Habits
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setActiveView('calendar')}
|
||||
className={`w-full px-4 py-2 text-left rounded-lg ${
|
||||
activeView === 'calendar'
|
||||
? theme.button.secondary
|
||||
: `${theme.text} ${theme.habitItem}`
|
||||
}`}
|
||||
>
|
||||
<CalendarIcon className="inline-block mr-2 h-4 w-4" />
|
||||
Calendar
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setActiveView('settings')}
|
||||
className={`w-full px-4 py-2 text-left rounded-lg ${
|
||||
activeView === 'settings'
|
||||
? theme.button.secondary
|
||||
: `${theme.text} ${theme.habitItem}`
|
||||
}`}
|
||||
>
|
||||
<SettingsIcon className="inline-block mr-2 h-4 w-4" />
|
||||
Settings
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="p-4 border-t border-gray-200">
|
||||
<div className="flex-grow overflow-y-auto">
|
||||
<ul className="space-y-2 p-4">
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setActiveView('habits')}
|
||||
className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center ${
|
||||
activeView === 'habits'
|
||||
? `${theme.button.secondary} shadow-md`
|
||||
: `${theme.text} ${theme.habitItem} hover:translate-x-1`
|
||||
}`}
|
||||
>
|
||||
<Plus className="h-5 w-5 mr-3" />
|
||||
<span className="font-medium">Habits</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setActiveView('calendar')}
|
||||
className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center ${
|
||||
activeView === 'calendar'
|
||||
? `${theme.button.secondary} shadow-md`
|
||||
: `${theme.text} ${theme.habitItem} hover:translate-x-1`
|
||||
}`}
|
||||
>
|
||||
<CalendarIcon className="h-5 w-5 mr-3" />
|
||||
<span className="font-medium">Calendar</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setActiveView('settings')}
|
||||
className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center ${
|
||||
activeView === 'settings'
|
||||
? `${theme.button.secondary} shadow-md`
|
||||
: `${theme.text} ${theme.habitItem} hover:translate-x-1`
|
||||
}`}
|
||||
>
|
||||
<SettingsIcon className="h-5 w-5 mr-3" />
|
||||
<span className="font-medium">Settings</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={signOut}
|
||||
className={`w-full px-4 py-2 text-left rounded-lg ${theme.text} ${theme.habitItem}`}
|
||||
className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center
|
||||
${theme.text} ${theme.habitItem} hover:bg-red-500/10 hover:text-red-500`}
|
||||
>
|
||||
<LogOut className="inline-block mr-2 h-4 w-4" />
|
||||
Sign Out
|
||||
<LogOut className="h-5 w-5 mr-3" />
|
||||
<span className="font-medium">Sign Out</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue