updated

VanshKing30 · Jul 4, 2024 · b1d6e63 · b1d6e63
1 parent 3d00451
commit b1d6e63
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/src/pages/AddFoodItem.jsx b/src/pages/AddFoodItem.jsx
@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect, useContext } from "react";
 import axios from "axios";
 import { toast } from "react-hot-toast";
@@ -103,38 +104,43 @@ function AddFoodItem() {
   };
 
   return (
-    <div className={`flex justify-center items-center h-[80vh] ${theme === 'dark' ? 'bg-[#131b33]' : 'bg-white'}`}>
+    <div className={`flex justify-center p-10 w-screen items-start h-fit ${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 sm:w-2/5 rounded-3xl border-2 ${theme === 'dark' ? 'bg-gray-300' : 'bg-white'}`}
       >
         <h1 className="text-xl font-bold mb-4 text-black">Add Food Item</h1>
 
         <div className="mb-4">
-          <label className="block text-gray-700">Dish Name</label>
+
           <input
             type="text"
+            id="dish"
             name="dish"
             value={formData.dish}
             onChange={handleChange}
             className="w-full p-2 border border-gray-300 rounded mt-1"
             required
+            placeholder="Enter dish name"
           />
         </div>
         <div className="mb-4">
-          <label className="block text-gray-700">Dish ID</label>
+
           <input
             type="text"
+            id="dishId"
             name="dishId"
             value={formData.dishId}
             onChange={handleChange}
             className="w-full p-2 border border-gray-300 rounded mt-1"
             required
+            placeholder="Enter dish ID"
           />
         </div>
         <div className="mb-4">
-          <label className="block text-gray-700">Meal Type</label>
+
           <select
+            id="mealType"
             name="mealType"
             value={formData.mealType}
             onChange={handleChange}
@@ -150,19 +156,22 @@ function AddFoodItem() {
           </select>
         </div>
         <div className="mb-4">
-          <label className="block text-gray-700">Description</label>
+
           <textarea
+            id="description"
             name="description"
             value={formData.description}
             onChange={handleChange}
             className="w-full p-2 border border-gray-300 rounded mt-1"
             rows="3"
+            placeholder="Enter dish description"
           ></textarea>
         </div>
         <div className="mb-4">
-          <label className="block text-gray-700">Dish Image</label>
+
           <input
             type="file"
+            id="dishImage"
             accept="image/*"
             onChange={handleImageChange}
             className="w-full p-2 border border-gray-300 rounded mt-1"
@@ -189,3 +198,4 @@ function AddFoodItem() {
 }
 
 export default AddFoodItem;
+
diff --git a/src/pages/SectionPage.jsx b/src/pages/SectionPage.jsx
@@ -83,20 +83,20 @@ const SectionPage = () => {
         ) : (
           <>
             <button
-              className="absolute mt-2 end-0 right-16 bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-full flex gap-2 "
+              className="absolute mt-2 end-0 sm:right-16 right-6 bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-full flex items-center gap-2 "
               onClick={() => navigate(`/edit-profile/${_id}`)}
             >
               Edit Profile <FaRegEdit />
             </button>
             <div
-              className={`flex justify-center mt-4 ${
+              className={`flex sm:flex-row flex-col justify-center mt-4 ${
                 theme === "dark"
                   ? "text-white bg-[#131b33]"
                   : "text-gray-900 bg-white"
               } `}
             >
               <button
-                className={`mx-4 mt-2 py-3 px-4 rounded-full ${
+                className={`mx-4 mt-2 py-3 px-4 flex w-fit items-center rounded-full ${
                   view === "add"
                     ? "bg-green-500 text-white"
                     : "bg-green-500 text-white"
@@ -106,7 +106,7 @@ const SectionPage = () => {
                 Add Product <IoMdAdd />
               </button>
               <button
-                className={`mx-4 mt-2 py-3 px-4 rounded-full border-green-400 border-2 ${
+                className={`mx-4 mt-2 py-3 px-4 flex items-center w-fit rounded-full border-green-400 border-2 ${
                   view === "list"
                     ? " bg-transparent text-green-500"
                     : "bg-transparent text-green-500"