Fix/faq heading and spacing fix #1990

docusaurus.config.ts

@@ -117,6 +117,7 @@ const config: Config = {
       logo: {
         alt: "recode hive Logo",
         src: "img/logo.png",
+        srcDark: "img/logo-dark.png", // add: light-colored / white-background version for night mode
       },
       items: [
         {

src/components/dashboard/Sidebar/DashboardSidebar.css

@@ -11,7 +11,7 @@
   border-right: 1px solid var(--ifm-color-emphasis-200);
   background: var(--ifm-background-color);
   transition: width 0.2s ease;
-  overflow: hidden;
+
 }
 
 .dashboard-rail.collapsed {
@@ -113,7 +113,7 @@
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   padding: 6px;
-  z-index: 20;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
 }

src/components/dashboard/Sidebar/DashboardSidebar.tsx

@@ -46,7 +46,6 @@ export default function DashboardSidebar({
 }: DashboardSidebarProps): React.JSX.Element {
   const { user } = useUser();
   const { signOut, openUserProfile } = useClerk();
-
   const [collapsed, setCollapsed] = useState(false);
   const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
   const profileMenuRef = useRef<HTMLDivElement>(null);

src/components/faqs/faqs.tsx

@@ -65,38 +65,45 @@ const FAQs: React.FC = () => {
     >
       <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
         <div className="w-full">
-          <div className="mb-10 text-center lg:mb-14">
-            <p
-              className="mb-2.5 inline-flex items-center gap-2 text-xs font-semibold tracking-widest uppercase"
+          <div className="mb-5 text-center lg:mb-6">
+            <h3
+              className="mb-1 inline-flex items-center gap-2 text-sm font-bold tracking-widest uppercase"
               style={{
                 color: isDark ? "#4ade80" : "#16a34a",
                 fontFamily:
                   "'Space Grotesk', 'Inter', -apple-system, sans-serif",
               }}
             >
               ✦ FAQs
-            </p>
+            </h3>
             <h2
               className="text-3xl font-bold leading-tight tracking-tight sm:text-4xl"
               style={{
                 color: isDark ? "#ffffff" : "#0f172a",
                 fontFamily:
                   "'Space Grotesk', 'Inter', -apple-system, sans-serif",
+                margin: "0",
               }}
             >
               Looking for answers?
             </h2>
+            <div className="flex w-full justify-center">
             <p
-              className={`mx-auto mt-3 max-w-3xl text-base ${isDark ? "text-gray-400" : "text-gray-600"
-                }`}
-              style={{ textAlign: "center" }}
-            >
-              Find answers to the most common questions about recode hive.
-            </p>
+                className={`mx-auto max-w-3xl text-base ${isDark ? "text-gray-400" : "text-gray-600"
+                  }`}
+                  style={{
+                     textAlign: "center",
+                     width: "100%",
+                   }}
+                >
+                Find answers to the most common questions about recode hive.
+              </p>
+            </div>
           </div>
+
 
           <div className="mx-auto flex max-w-5xl flex-col items-start gap-4 md:flex-row md:gap-6">
-            <div className="flex w-full flex-1 flex-col gap-4 md:gap-6">
+            <div className="flex w-full flex-1 flex-col gap-3 md:gap-4">
               {faqData.filter((_, index) => index % 2 === 0).map((faq, idx) => {
                 const originalIndex = idx * 2;
                 const isOpen = activeIndex === originalIndex;
@@ -134,7 +141,7 @@ const FAQs: React.FC = () => {
                       aria-expanded={isOpen}
                       aria-controls={`faq-panel-${originalIndex}`}
                     >
-                      <span>{faq.question}</span>
+                      <h3 className="text-lg font-semibold md:text-xl m-0">{faq.question}</h3>
                       <motion.span
                         className="transform transition-transform duration-300"
                         animate={{ rotate: isOpen ? 180 : 0 }}
@@ -161,7 +168,7 @@ const FAQs: React.FC = () => {
                             : "1px solid rgba(0, 0, 0, 0.10)",
                           background: isDark ? "#161616" : "#FFFFFF",
                           color: isDark ? "#d1d5db" : "#111827",
-                          padding: "1rem 1.25rem 1.25rem",
+                          padding: "0.5rem 1.25rem 1rem",
                         }}
                         dangerouslySetInnerHTML={{
                           __html: faq.answer
@@ -181,7 +188,7 @@ const FAQs: React.FC = () => {
               })}
             </div>
 
-            <div className="flex w-full flex-1 flex-col gap-4 md:gap-6">
+            <div className="flex w-full flex-1 flex-col gap-3 md:gap-4">
               {faqData.filter((_, index) => index % 2 !== 0).map((faq, idx) => {
                 const originalIndex = idx * 2 + 1;
                 const isOpen = activeIndex === originalIndex;
@@ -219,7 +226,7 @@ const FAQs: React.FC = () => {
                       aria-expanded={isOpen}
                       aria-controls={`faq-panel-${originalIndex}`}
                     >
-                      <span>{faq.question}</span>
+                      <h3 className="text-lg font-semibold md:text-xl m-0">{faq.question}</h3>
                       <motion.span
                         className="transform transition-transform duration-300"
                         animate={{ rotate: isOpen ? 180 : 0 }}
@@ -246,7 +253,7 @@ const FAQs: React.FC = () => {
                             : "1px solid rgba(0, 0, 0, 0.10)",
                           background: isDark ? "#161616" : "#FFFFFF",
                           color: isDark ? "#d1d5db" : "#111827",
-                          padding: "1rem 1.25rem 1.25rem",
+                          padding: "0.5rem 1.25rem 1rem",
                         }}
                         dangerouslySetInnerHTML={{
                           __html: faq.answer
@@ -272,4 +279,4 @@ const FAQs: React.FC = () => {
   );
 };
 
-export default FAQs;
+export default FAQs;

src/theme/ColorModeToggle/index.tsx

@@ -1,31 +1,14 @@
 import React from "react";
-import { useSafeColorMode } from "@site/src/utils/useSafeColorMode";
-import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import { useColorMode } from "@docusaurus/theme-common";
 
 export default function ColorModeToggle(): JSX.Element {
-  const { colorMode } = useSafeColorMode();
-
-  // Safe setColorMode that works with DOM
-  const setColorMode = (mode: "light" | "dark") => {
-    if (!ExecutionEnvironment.canUseDOM) return;
-    // Set DOM attribute immediately for instant visual feedback
-    document.documentElement.setAttribute("data-theme", mode);
-    // Also store in localStorage
-    localStorage.setItem("theme", mode);
-    // Trigger Docusaurus's internal theme change if available
-    try {
-      const {
-        setColorMode: docusaurusSetColorMode,
-      } = require("@docusaurus/theme-common");
-      docusaurusSetColorMode(mode);
-    } catch (e) {
-      // Fallback: just set the DOM attribute
-    }
-  };
+  const { colorMode, setColorMode } = useColorMode();
 
   const toggleColorMode = () => {
     const newMode = colorMode === "dark" ? "light" : "dark";
-    // Only use Docusaurus's setColorMode - it handles everything properly
+    // Use Docusaurus's real setColorMode - this updates the actual
+    // ColorModeProvider context, which drives ThemedImage (navbar logo),
+    // data-theme attribute, and localStorage all in one call.
     setColorMode(newMode);
   };
 
@@ -93,4 +76,4 @@ export default function ColorModeToggle(): JSX.Element {
       </div>
     </button>
   );
-}
+}

src/theme/Footer/Layout/index.tsx

@@ -132,7 +132,7 @@ export default function FooterLayout(): ReactNode {
               <span>code second.</span>
             </p>
             <div className="rh-footer__cta">
-              <Link to="/blog" className="rh-btn rh-btn--white">
+              <Link to="/blogs" className="rh-btn rh-btn--white">
                 <svg
                   className="rh-btn__icon"
                   width="16"