Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat:Want to fix UI of Add Product Page #396 #410

Merged
merged 2 commits into from
Jul 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions src/pages/AddFoodItem.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import React, { useState, useEffect, useContext } from "react";
import axios from "axios";
import { toast } from "react-hot-toast";
Expand Down Expand Up @@ -104,39 +105,44 @@ function AddFoodItem() {
};

return (
<div className={`flex py-10 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 mt-[40px] mb-[20px] 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 text-black"
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 text-black"
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}
Expand All @@ -152,19 +158,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 text-black"
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"
Expand All @@ -191,3 +200,4 @@ function AddFoodItem() {
}

export default AddFoodItem;

8 changes: 4 additions & 4 deletions src/pages/SectionPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down