Merge pull request #407 from vansh-codes/main

[BUG] Fixes FAQ Page dark mode issue after refreshing
girlscript · Sep 14, 2024 · 3f24b53 · 3f24b53
2 parents bd4f38c + 52f3f91
commit 3f24b53
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/components/diabloAccordion.js b/components/diabloAccordion.js
@@ -5,13 +5,20 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import React from "react";
+import React, {useState, useEffect} from "react";
 import { useTheme } from "next-themes";
 import { FaQuestionCircle } from "react-icons/fa";
 
 const DiabloAccordion = ({ question, answer }) => {
-  const { theme } = useTheme();
-  const isDarkMode = theme === "dark";
+  const { theme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isDarkMode = resolvedTheme === "dark";
+  if (!mounted) return null;
 
   return (
     <>

diff --git a/pages/faq.js b/pages/faq.js
@@ -15,15 +15,15 @@ function Faq() {
         <meta name="description" content="FAQs of GirlScript Summer of Code" />
       </Head>
       <>
-      <div className="flex flex-row dark:text-white font-sans text-3xl md:text-5xl text-center font-extrabold flex-wrap justify-center items-center">
+      <div className="flex flex-row mt-4 dark:text-white font-sans text-3xl md:text-5xl text-center font-extrabold flex-wrap justify-center items-center">
        <h1 className=" underline">
        <span style={{ color:'#f97316' }}>Frequently Asked Questions</span>
         </h1>
       <h1 className="">(FAQs)</h1>
       </div>
 
 
-        <div className="flex flex-col w-full justify-center px-16 mt-20 mb-10">
+        <div className="flex flex-col w-full justify-center px-16 mt-16 mb-10">
           {data.map((curElem) => (
             <DiabloAccordion key={curElem.id} {...curElem} />
           ))}