diff --git a/index.html b/index.html index 6d2862a7..70b26a2d 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,19 @@ } })(); +
diff --git a/src/App.tsx b/src/App.tsx index 51b9d660..97ad9a05 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,8 +4,14 @@ import router from '@/routes'; const App = () => { useEffect(() => { - const unsubscribe = router.subscribe(() => { - window.scrollTo(0, 0); + let lastPathname = window.location.pathname; + + const unsubscribe = router.subscribe((state) => { + // Only scroll to top on pathname changes, not on query/hash changes + if (state.location.pathname !== lastPathname) { + window.scrollTo(0, 0); + lastPathname = state.location.pathname; + } }); const handleRedirect = () => { const redirectPath = sessionStorage.getItem('gh_redirect'); diff --git a/src/components/DeveloperTestimonials.tsx b/src/components/DeveloperTestimonials.tsx index 9d8c1cab..256d3621 100644 --- a/src/components/DeveloperTestimonials.tsx +++ b/src/components/DeveloperTestimonials.tsx @@ -49,12 +49,12 @@ const ReviewCard = ({ /> {/* Feedback Text */} - - {body} - +

{body}

+ {/* User Info */}
diff --git a/src/components/shared/DarkModeToggle.tsx b/src/components/shared/DarkModeToggle.tsx index 7230338c..c7efd507 100644 --- a/src/components/shared/DarkModeToggle.tsx +++ b/src/components/shared/DarkModeToggle.tsx @@ -2,18 +2,51 @@ import { useState, useEffect } from 'react'; import { Moon, Sun } from 'lucide-react'; const DarkModeToggle = () => { - const [isDarkMode, setIsDarkMode] = useState(false); + // Initialize from the class that was already set in index.html + const [isDarkMode, setIsDarkMode] = useState(() => { + return document.documentElement.classList.contains('dark'); + }); const [isHovered, setIsHovered] = useState(false); useEffect(() => { + // Sync with localStorage and system preference on mount const theme = localStorage.getItem('theme'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + if (theme === 'dark') { document.documentElement.classList.add('dark'); setIsDarkMode(true); - } else { + } else if (theme === 'light') { document.documentElement.classList.remove('dark'); setIsDarkMode(false); + } else { + // If no preference saved, respect system preference + if (prefersDark) { + document.documentElement.classList.add('dark'); + setIsDarkMode(true); + } else { + document.documentElement.classList.remove('dark'); + setIsDarkMode(false); + } } + + // Listen for system theme changes (only if no manual preference is set) + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const handleThemeChange = (e: MediaQueryListEvent) => { + // Only update if user hasn't set a manual preference + if (!localStorage.getItem('theme')) { + if (e.matches) { + document.documentElement.classList.add('dark'); + setIsDarkMode(true); + } else { + document.documentElement.classList.remove('dark'); + setIsDarkMode(false); + } + } + }; + + mediaQuery.addEventListener('change', handleThemeChange); + return () => mediaQuery.removeEventListener('change', handleThemeChange); }, []); const toggleDarkMode = () => { @@ -34,24 +67,25 @@ const DarkModeToggle = () => { const translateX = isDarkMode ? trackWidth - thumbWidth - padding : padding; return ( - +
); }; diff --git a/src/pages/News/NewsPage.tsx b/src/pages/News/NewsPage.tsx index c9274d08..a5f68948 100644 --- a/src/pages/News/NewsPage.tsx +++ b/src/pages/News/NewsPage.tsx @@ -257,15 +257,17 @@ const NewsPage: React.FC = () => { >
-

+

NEWS

@@ -381,11 +383,13 @@ const NewsPage: React.FC = () => { whileTap={{ scale: 0.95 }} > {cat} - {activeCategory === cat && ( - - {(postsByCategory[cat] || []).length} - - )} + + {(postsByCategory[cat] || []).length} + ))}