Update ImageGenerator and Testimonial components

preston176 · Feb 21, 2024 · 3b4bd5a · 3b4bd5a
1 parent dae99a0
commit 3b4bd5a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/Components/ImageGenerator/ImageGenerator.jsx b/src/Components/ImageGenerator/ImageGenerator.jsx
@@ -3,7 +3,7 @@ import defaultImage from '../../assets/defaultImage.jpg';
 import axios from 'axios';
 import './ImageGenerator.css';
 
-const ImageGenerator = () => {
+const ImageGenerator = ({ isDarkMode }) => {
     // ImageURL State
     const [imageURL, setImageURL] = useState('/');
     const inputReference = useRef(null);
@@ -51,15 +51,15 @@ const ImageGenerator = () => {
 
     return (
         <div className="flex flex-col items-center justify-center mt-8 mb-4 gap-4">
-            <div className="text-4xl font-medium pb-6">AI Image <span className="text-pink-500">Generator</span></div>
+            <div className={`${isDarkMode ? "text-white" : "text-black"} text-4xl font-medium pb-6`}>AI Image <span className="text-pink-500">Generator</span></div>
             <div className="flex flex-col">
                 <img className="min-w-[200px] h-auto rounded-md max-w-[300px]" src={imageURL === "/" ? defaultImage : imageURL} alt="generated-image" />
                 <div className="loading">
                     <div className={loading ? "loading-bar-full" : "loading-bar"}></div>
                     <div className={loading ? "loading-text" : "display-none"}>Loading ...</div>
                 </div>
             </div>
-            <div className="flex flex-col w-full max-w-screen-md items-center justify-center bg-gray-900 p-4 rounded-md">
+            <div className={`${isDarkMode ? "bg-gray-700" : "bg-gray-900"} flex flex-col w-full max-w-screen-md items-center justify-center  p-4 rounded-md`}>
                 <input ref={inputReference} type="text" placeholder="Describe what you would like to see" className="w-full h-12 bg-transparent border-none outline-none text-white placeholder-white text-lg px-4 mr-2" />
             </div>
             {/* buttons container */}

diff --git a/src/Components/Testimonial/Testimonial.jsx b/src/Components/Testimonial/Testimonial.jsx
@@ -21,7 +21,15 @@ const Testimonial = () => {
                     </div>
 
                     <div className="mt-8 text-center md:mt-16 md:order-3 ">
-                        <a href="#" title="" className="pb-2 text-base font-bold leading-7 text-gray-900 transition-all duration-200 border-b-2 border-gray-900 hover:border-gray-600 font-pj focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2 hover:text-gray-600"> Check all 2,157 reviews </a>
+                        <a
+                            href="#"
+                            title=""
+                            className={`pb-2 text-base font-bold leading-7 ${isDarkMode ? 'text-gray-300 border-gray-300 hover:border-gray-400 hover:text-gray-400 focus:ring-gray-300 focus:ring-offset-gray-900' : 'text-gray-900 border-gray-900 hover:border-gray-600 hover:text-gray-600 focus:ring-gray-900 focus:ring-offset-2'
+                                } transition-all duration-200 border-b-2 ${isDarkMode ? 'border-gray-300' : 'border-gray-900'
+                                } font-pj focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-gray-900`}
+                        >
+                            Check all 2,157 reviews
+                        </a>
                     </div>
 
                     <div className=" relative mt-10 md:mt-24 md:order-2 ">

diff --git a/src/Pages/ImageGen.jsx b/src/Pages/ImageGen.jsx
@@ -1,10 +1,16 @@
 import React from 'react'
 import ImageGenerator from '../Components/ImageGenerator/ImageGenerator'
 
+import { ThemeContext } from "@emotion/react";
+import { useContext } from "react";
+
+
+
 const ImageGen = () => {
+  const { isDarkMode } = useContext(ThemeContext);
   return (
     <div>
-      <ImageGenerator />
+      <ImageGenerator isDarkMode={isDarkMode} />
     </div>
   )
 }