bug: set background images for feature boxes in dark mode

WikiPortal · Jan 23, 2024 · 1dab835 · 1dab835
1 parent c9385a5
commit 1dab835
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/assets/Home/dark-background.png b/src/assets/Home/dark-background.png
diff --git a/src/components/About/HomeAbout.jsx b/src/components/About/HomeAbout.jsx
@@ -1,13 +1,30 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import idea from "../../assets/Home/creative-writing.png";
 import component from "../../assets/Home/abstract.png";
 import project from "../../assets/Home/blueprint.png";
 import collaborate from "../../assets/Home/collaborate.png";
+import darkBackground from "../../assets/Home/dark-background.png";
 
+import { useTheme } from "../../context/ThemeContext";
 import "./homeabout.css";
 
 const HomeAbout = () => {
+  const { isDarkMode } = useTheme();
+
+  useEffect(() => {
+    const aboutBox = document.querySelectorAll(".about-box");
+
+    aboutBox.forEach((box) => {
+      if (isDarkMode) {
+        box.style.backgroundImage = `url(${darkBackground})`;
+        box.style.backgroundSize = "cover";
+      } else {
+        box.style.backgroundImage = "none";
+      }
+    });
+  }, [isDarkMode]);
+
   return (
     <section className="about-section">
       <div className="about-container">

diff --git a/src/components/About/homeabout.css b/src/components/About/homeabout.css
@@ -60,7 +60,6 @@
     0 6px 6px -1px rgba(8, 11, 14, 0.1);
   border: 1px solid #f7f8f9;
   margin: 10px;
-  background-color: #fff;
   justify-content: center;
 }