count0/HabitGrid
1
0
Fork 0
mirror of https://github.com/nagaoo0/HabbitGrid.git synced 2026-01-11 23:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

update favicon and improvements on darkmode toggles

Browse Source
This commit is contained in:
_count0
2025-10-13 17:09:12 +02:00
parent ad38e66514
commit ce8f53fef3
5 changed files with 43 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Habit Tracker App</title> <title>Habit Tracker App</title>
<meta name="description" content="Track your habits and visualize your progress with HabitGrid." /> <meta name="description" content="Track your habits and visualize your progress with HabitGrid." />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/png" href="/assets/fav.png" />
<link rel="stylesheet" href="/src/index.css" /> <link rel="stylesheet" href="/src/index.css" />
</head> </head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100"> <body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100">

BIN
public/assets/fav.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 KiB

34
src/pages/HomePage.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Plus, Settings, TrendingUp, Flame, Calendar } from 'lucide-react'; import { Plus, Settings, TrendingUp, Flame, Calendar, Moon, Sun } from 'lucide-react';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { useToast } from '../components/ui/use-toast'; import { useToast } from '../components/ui/use-toast';
import HabitCard from '../components/HabitCard'; import HabitCard from '../components/HabitCard';
@@ -12,11 +12,24 @@ const HomePage = () => {
const { toast } = useToast(); const { toast } = useToast();
const [habits, setHabits] = useState([]); const [habits, setHabits] = useState([]);
const [isPremium] = useState(false); const [isPremium] = useState(false);
const [darkMode, setDarkMode] = useState(() => {
return localStorage.getItem('theme') === 'dark';
});
useEffect(() => { useEffect(() => {
loadHabits(); loadHabits();
}, []); }, []);
useEffect(() => {
if (darkMode) {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}, [darkMode]);
const loadHabits = () => { const loadHabits = () => {
const loadedHabits = getHabits(); const loadedHabits = getHabits();
setHabits(loadedHabits); setHabits(loadedHabits);
@@ -44,13 +57,7 @@ const HomePage = () => {
className="flex items-center justify-between mb-8" className="flex items-center justify-between mb-8"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg"> <img src="/assets/logo.png" alt="HabitGrid Logo" className="w-12 h-12 rounded-xl shadow-lg object-cover" />
<div className="grid grid-cols-4 gap-0.5">
{[...Array(11)].map((_, i) => (
<div key={i} className="w-1.5 h-1.5 bg-white rounded-sm opacity-90" />
))}
</div>
</div>
<div> <div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent"> <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">
HabitGrid HabitGrid
@@ -58,6 +65,16 @@ const HomePage = () => {
<p className="text-sm text-muted-foreground">Commit to yourself, one square at a time</p> <p className="text-sm text-muted-foreground">Commit to yourself, one square at a time</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => setDarkMode((prev) => !prev)}
className="rounded-full"
aria-label="Toggle dark mode"
>
{darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
</Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@@ -66,6 +83,7 @@ const HomePage = () => {
> >
<Settings className="w-5 h-5" /> <Settings className="w-5 h-5" />
</Button> </Button>
</div>
</motion.div> </motion.div>
{/* Stats Overview */} {/* Stats Overview */}

16
src/pages/SettingsPage.jsx
View File

@@ -11,23 +11,23 @@ import { exportData, importData, clearAllData } from '../lib/storage';
const SettingsPage = () => { const SettingsPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { toast } = useToast(); const { toast } = useToast();
const [darkMode, setDarkMode] = useState(false); const [darkMode, setDarkMode] = useState(() => {
return localStorage.getItem('theme') === 'dark';
});
const [notifications, setNotifications] = useState(false); const [notifications, setNotifications] = useState(false);
useEffect(() => { useEffect(() => {
const isDark = document.documentElement.classList.contains('dark'); if (darkMode) {
setDarkMode(isDark);
}, []);
const toggleDarkMode = (enabled) => {
setDarkMode(enabled);
if (enabled) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
} else { } else {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light'); localStorage.setItem('theme', 'light');
} }
}, [darkMode]);
const toggleDarkMode = (enabled) => {
setDarkMode(enabled);
}; };
const handleExport = () => { const handleExport = () => {