Refactor: remove unused dark mode state and simplify className concatenation

Author: rahul-vyas-dev

src/pages/More.tsx

@@ -20,7 +20,6 @@ const MorePage: React.FC = () => {
   const [pagesByCategory, setPagesByCategory] = useState<
     Record<string, MorePageType[]>
   >({});
-  const [isDarkMode, setIsDarkMode] = useState(false);
   const [activeCategory, setActiveCategory] = useState<string>('All');
   const [notFoundSlug, setNotFoundSlug] = useState<string | null>(null);
   const [zoomableImages, setZoomableImages] = useState<HTMLImageElement[]>([]);
@@ -29,20 +28,6 @@ const MorePage: React.FC = () => {
     alt: string;
   } | null>(null);
 
-  useEffect(() => {
-    const dark = document.documentElement.classList.contains('dark');
-    setIsDarkMode(dark);
-
-    const observer = new MutationObserver(() => {
-      const updatedDark = document.documentElement.classList.contains('dark');
-      setIsDarkMode(updatedDark);
-    });
-
-    observer.observe(document.documentElement, { attributes: true });
-
-    return () => observer.disconnect();
-  }, []);
-
   useEffect(() => {
     const loadPage = async () => {
       setIsLoading(true);
@@ -60,7 +45,7 @@ const MorePage: React.FC = () => {
           if (fetchedPage) {
             setPage(fetchedPage);
             setNotFoundSlug(null);
-            document.title = `${fetchedPage.title} - Sugar Labs`;
+            document.title = fetchedPage.title + ' - Sugar Labs';
 
             if (fetchedPage.category) {
               setActiveCategory(fetchedPage.category);
@@ -147,11 +132,7 @@ const MorePage: React.FC = () => {
             className="text-blue-600 hover:underline mb-2 inline-block"
           >
             <motion.button
-              className={
-                'mb-6 px-4 py-2 flex items-center text-blue-600 ' +
-                'hover:text-blue-700 transition-colors rounded-md ' +
-                'hover:bg-blue-50'
-              }
+              className="mb-6 px-4 py-2 flex items-center text-blue-600 hover:text-blue-700 transition-colors rounded-md hover:bg-blue-50"
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
             >
@@ -203,7 +184,7 @@ const MorePage: React.FC = () => {
               <h3 className="font-bold text-xl mb-4">
                 {activeCategory === 'All'
                   ? 'All Pages'
-                  : `${activeCategory} Pages`}
+                  : activeCategory + ' Pages'}
               </h3>
               <ul className="space-y-2">
                 {pagesByCategory[activeCategory]?.map((linkPage) => (
@@ -232,11 +213,7 @@ const MorePage: React.FC = () => {
             transition={{ duration: 0.5 }}
             key={page?.slug}
           >
-            <div
-              className={`${
-                isDarkMode ? 'bg-amber-950' : 'bg-white'
-              } rounded-lg shadow-md p-6`}
-            >
+            <div className="bg-white rounded-lg shadow-md p-6">
               {page ? (
                 <div className="prose prose-lg max-w-none">
                   <MarkdownRenderer
@@ -320,12 +297,7 @@ const MorePage: React.FC = () => {
             </p>
             <button
               onClick={closeImageModal}
-              className={
-                'absolute top-2 right-2 text-white text-2xl ' +
-                'hover:text-gray-300 bg-black bg-opacity-50 rounded-full ' +
-                'w-8 h-8 flex items-center justify-center ' +
-                'focus:outline-none focus:ring-2 focus:ring-white'
-              }
+              className="absolute top-2 right-2 text-white text-2xl hover:text-gray-300 bg-black bg-opacity-50 rounded-full w-8 h-8 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white"
               aria-label="Close image"
             >
               &times;