Merge pull request #577 from AnushkaChouhan25/newbranch

Change Background Color on Dark Theme
Luson045 · Oct 29, 2024 · f48ac24 · f48ac24
2 parents c289f25 + fa9b3e8
commit f48ac24
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx
@@ -111,7 +111,11 @@ const AboutPage = () => {
 
   const dark = useRecoilValue(mode); // Get dark mode value from Recoil
   return (
-    <Container dark={dark}>
+    <Container className={`${
+      dark === 'dark'
+        ? 'relative text-white py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-gray-700 via-gray-900 to-black overflow-hidden'
+        : 'relative text-black py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-100 to-white overflow-hidden'
+    } `}  dark={dark}>
       <animated.div style={fadeIn}>
         {/* Two-box section for Vision and Mission */}
         <VisionMissionContainer>

diff --git a/client/src/pages/HospitalList.jsx b/client/src/pages/HospitalList.jsx
@@ -7,9 +7,15 @@ import { UserContext } from '../store/userContext';
 import hospitalsData from '../data/hospitalsData'; // Import local hospital data
 import { databaseUrls } from '../data/databaseUrls';
 
+import { useRecoilState } from 'recoil'; 
+import { mode } from '../store/atom';
+
+
 const mindate = new Date().toISOString().split('T')[0];
 
 const HospitalsList = () => {
+
+  const [dark] = useRecoilState(mode);
   const { user } = useContext(UserContext);
   const [hospitals, setHospitals] = useState([]);
   const [filteredHospitals, setFilteredHospitals] = useState([]);
@@ -134,8 +140,17 @@ const HospitalsList = () => {
   return (
     <>
       <Navbar />
-      <div className="hospital-list-container container mx-auto mt-8 px-4">
-        <h2 className="text-center mb-4 mt-8 text-2xl font-bold">Hospitals</h2>
+      <div className={`${
+          dark === 'dark'
+            ? 'relative text-white py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-gray-700 via-gray-900 to-black overflow-hidden'
+            : 'relative text-black py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-100 to-white overflow-hidden'
+        } `} 
+      >
+        <h2 className={`${
+          dark === 'dark'
+            ? 'text-white'
+            : 'text-black'
+} `} >Hospitals</h2>
 
         {/* Search bar */}
         <div className="search-bar mb-4">

diff --git a/client/src/pages/Service.jsx b/client/src/pages/Service.jsx
@@ -2,6 +2,9 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import FloatingIcons from '../components/FloatingIcons';
 import { services } from '../data';
+import { useRecoilState } from 'recoil'; 
+import { mode } from '../store/atom';
+
 
 const ServiceCard = ({ icon: Icon, title, details }) => (
   <>
@@ -24,9 +27,15 @@ const ServiceCard = ({ icon: Icon, title, details }) => (
   </>
 );
 export default function ServicePage() {
+  const [dark] = useRecoilState(mode);
   return (
     <>
-      <header className="relative text-black py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-100 to-white overflow-hidden">
+      <header className={`${
+      dark === 'dark'
+        ? 'relative text-white py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-gray-700 via-gray-900 to-black overflow-hidden'
+        : 'relative text-black py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-100 to-white overflow-hidden'
+    } `} 
+      >
         <div className="absolute inset-0">
           <svg
             className="absolute bottom-0 left-0 right-0"
@@ -51,7 +60,11 @@ export default function ServicePage() {
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 1, type: 'spring' }}
                 >
-                  <span>Our Services</span>
+                  <span className={`${
+                    dark === 'dark'
+                      ? 'text-white'
+                      : 'text-black'
+    } `} >Our Services</span>
                 </motion.h2>
                 <motion.p className="flex flex-col items-center text-center mb-12">
                   <span> A better life starts with a beautiful smile</span>