Fixed Design issues with dark mode and add dish page

src/pages/AddFoodItem.jsx

@@ -103,10 +103,10 @@ function AddFoodItem() {
   };
 
   return (
-    <div className={`flex justify-center items-center h-[80vh] ${theme === 'dark' ? 'bg-[#131b33]' : 'bg-white'}`}>
+    <div className={`flex justify-center items-center h-[auto] ${theme === 'dark' ? 'bg-[#131b33]' : 'bg-white'}`}>
       <form
         onSubmit={handleSubmit}
-        className={`p-6 rounded shadow-lg w-full max-w-sm border-2 ${theme === 'dark' ? 'bg-gray-300' : 'bg-white'}`}
+        className={`p-6 rounded shadow-lg w-full max-w-sm mt-[40px] mb-[20px] border-2 ${theme === 'dark' ? 'bg-gray-300' : 'bg-white'}`}
       >
         <h1 className="text-xl font-bold mb-4 text-black">Add Food Item</h1>
 
@@ -117,7 +117,7 @@ function AddFoodItem() {
             name="dish"
             value={formData.dish}
             onChange={handleChange}
-            className="w-full p-2 border border-gray-300 rounded mt-1"
+            className="w-full p-2 border border-gray-300 rounded mt-1 text-black"
             required
           />
         </div>
@@ -128,7 +128,7 @@ function AddFoodItem() {
             name="dishId"
             value={formData.dishId}
             onChange={handleChange}
-            className="w-full p-2 border border-gray-300 rounded mt-1"
+            className="w-full p-2 border border-gray-300 rounded mt-1 text-black"
             required
           />
         </div>
@@ -155,7 +155,7 @@ function AddFoodItem() {
             name="description"
             value={formData.description}
             onChange={handleChange}
-            className="w-full p-2 border border-gray-300 rounded mt-1"
+            className="w-full p-2 border border-gray-300 rounded mt-1 text-black"
             rows="3"
           ></textarea>
         </div>

src/pages/EditProfile.jsx

@@ -112,7 +112,7 @@ const EditProfile = () => {
             value={formData.name}
             disabled={!edit}
             onChange={handleChange}
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            className={`shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline `}
           />
         </div>
         <div className="mb-4">

src/pages/Foodlist.jsx

@@ -24,8 +24,7 @@ const Foodlist = () => {
     try {
       setLoading(true);
       const response = await fetch(
-        `${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}`,
-        {
+        `${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}`,        {
           method: "GET",
           headers: {
             "Content-Type": "application/json",
@@ -40,7 +39,10 @@ const Foodlist = () => {
       setLoading(false);
     }
   };
-
+  function handleClose(){
+    setEditModal(false)
+    console.log(editModal)
+  }
   const handleDelete = async (dishId, mealType) => {
     try {
       const token = localStorage.getItem("token");
@@ -135,7 +137,7 @@ const Foodlist = () => {
   useEffect(() => {
     fetchData("breakfast", setBreakfast);
     fetchData("lunch", setLunch);
-    fetchData("dinner", setDinner);
+    fetchData("dinner", setLunch);
   }, [_id]);
 
   const handleDishClick = async (dishId) => {
@@ -186,7 +188,7 @@ const Foodlist = () => {
   };
 
   return (
-    <div className="text-purple-800 min-h-screen pt-5 bg-transparent">
+    <div className={` text-purple-800 min-h-screen pt-5  ${theme=="dark"?"bg-[#131b33]":""}` }>
       <Navbar />
       <div className="container px-8 mx-auto p-4 mt-20 min-h-screen bg-transparent">
         <div className="flex justify-center space-x-4 mb-8">
@@ -363,7 +365,7 @@ const Foodlist = () => {
       {editModal && (
         <Modalupdate
           dish={currentDish}
-          onClose={() => setEditModal(false)}
+          onCancel={handleClose}
           onUpdate={handleUpdateDish}
         />
       )}

src/pages/Rateus.jsx

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState,useContext } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
+import { ThemeContext } from "../themeContext";
 
 const RateUs = () => {
   const [rating, setRating] = useState('');
   const [feedback, setFeedback] = useState('');
+  const { theme } = useContext(ThemeContext);
 
   const handleRatingClick = (emoji) => {
     setRating(emoji);
@@ -32,12 +34,12 @@ const RateUs = () => {
       }}
     >
       <Navbar />
-      <div className="flex items-center justify-center flex-grow">
+      <div className={` flex items-center justify-center flex-grow`}>
         <div
-          className="w-full max-w-xl mx-4 p-8 bg-white bg-opacity-90 rounded-lg shadow-lg transition-transform transform hover:scale-105 hover:shadow-2xl"
+          className={`w-full ${theme=='dark'?"bg-[#172554]":""} max-w-xl mx-4 p-8 bg-white bg-opacity-90 rounded-lg shadow-lg transition-transform transform hover:scale-105 hover:shadow-2xl`}
           style={{ marginBottom: '100px', marginTop: '150px', textAlign: 'center' }}
         >
-          <h1 className="text-3xl font-bold mb-6 text-black">Rate Our Website</h1>
+          <h1 className={`text-3xl font-bold mb-6 text-black ${theme=='dark'?"text-white":""}`}>Rate Our Website</h1>
           <div className="mb-6">
             {['😢', '😡', '😐', '😊', '🤩'].map((emoji) => (
               <span