Emerson

src/components/Category/index.tsx

@@ -2,11 +2,10 @@
 import Edit from "../../assets/icons/edit.png";
 import Editsub from "../../assets/icons/editsub.png";
 import Drop from "../../assets/icons/drop.png";
-import Plus from "../../assets/icons/sum.png";
+import Plus from "../../assets/icons/sum-yellow.png";
 import trash from "../../assets/icons/trash-white.png";
 import imgSum from "../../assets/icons/sum-yellowbig.png";
 import imgSumy from "../../assets/icons/sum-yellow.png";
-import Plus from "../../assets/icons/Vector.png";
 import { useRef, useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import NewItemModal from "../NewItemModal";
@@ -40,12 +39,12 @@ export default function Category() {
 
   return (
     <>
-      <div className="text-[#24252E] text-xl font-bold p-4">
-        <h3>Categorias</h3>
+      <div className="text-[#24252E] text-xl font-bold">
+        <h3 className="mb-4">Categorias</h3>
       </div>
-      <div className="flex  gap-4 overflow-x-auto scroll-smooth  p-4">
+      <div className="flex gap-4 overflow-x-auto scroll-smooth m-">
         {cards.map((card) => (
-          <button className="font-bold text-base leading-6 bg-cyberyellow p-[30px]  rounded-lg shadow-md w-full max-w-[160px] flex justify-center">
+          <button className="font-bold text-base leading-6 bg-cyberyellow  rounded-lg shadow-md w-full flex justify-center items-center">
 
             {card}
           </button>
@@ -55,17 +54,17 @@ export default function Category() {
 
           className="bg-[#001B42] shadow-md flex w-full max-w-[160px] rounded-lg p-[30px] gap-1 items-center object-cover "
         >
-          <span className="bg-[#001B42] shadow-md text-[#FAFAFA]">
+          <span className="bg-[#001B42] shadow-md text-[#FAFAFA] ">
 
             Adicionar Categorias{" "}
           </span>
-          <img className="" src={Plus} alt="" />
+          <img className="ml-1" src={Plus} alt="" />
         </button>
       </div>
 
-      <div className="flex  justify-center ">
+      <div className="flex ">
         <input
-          className="text-raisinblack text-xl font-bold leading-8 "
+          className="text-raisinblack text-xl font-bold leading-8 my-4 w-full"
           type="text"
           value={establishmentName}
           onChange={(e: any) => setEstablishmentName(e.target.value)}
@@ -76,22 +75,23 @@ export default function Category() {
         </button>
       </div>
 
-      <div className="pl-4">
+      <div className="pl-">
         {subcards.map((subcard) => (
-          <div className="bg-oxfordblue p-6 justify-between  rounded-lg shadow-md w-80 flex text-center mb-1 ">
-            <div className="text-left ">
+          <div className="bg-oxfordblue p-5 justify-between  rounded-lg shadow-md flex text-center mb-1 w-full">
+            <div className="text-left">
               <input
-                className="bg-oxfordblue font-bold w-36 text-base   leading-6 text-semiwhite"
+                className="bg-oxfordblue font-bold w-[158px] text-base text-left leading-6 text-semiwhite flex-row mr-2"
                 type="text"
                 disabled={isEditable === false}
                 value={establishmentSubcategory}
                 onChange={(e: any) =>
                   setestablishmentSubcategory(e.target.value)
                 }
               />
+
               <button onClick={() => setIsEditable(!isEditable)}>
                 <img
-                  className="w-[15px] h-[17px]"
+                  className="w-[15px] h-[17px] mr-4"
                   src={Editsub}
                   alt="Botão editar"
                 />
@@ -104,6 +104,8 @@ export default function Category() {
                 />
 
               </button>
+
+
             </div>
             <div className="flex">
               <button onClick={onClik}>
@@ -119,7 +121,7 @@ export default function Category() {
           <div className="drop">
             <button className="w-full h-[82px] bg-royaldark flex-row rounded-b-lg flex justify-between items-center hover:cursor-pointer mb-4">
               <div className="flex flex-col items-start gap-4">
-                <h1 className="text-white text-sm font-bold leading-[22px] ml-[8px]">
+                <h1 className="text-white text-sm font-bold leading-[22px] ml-4">
                   Adicionar item
                 </h1>
               </div>
@@ -144,9 +146,9 @@ export default function Category() {
           onClick={() =>
             setSubcards((state) => [...state, "Nova Subcategoria"])
           }
-          className="bg-[#001B42] shadow-md flex w-80 rounded-lg p-4 gap-1 items-center object-cover mt-6 "
+          className="bg-[#001B42] shadow-md flex w-full rounded-lg p-4  items-center object-cover mt-6 justify-between "
         >
-          <span className="bg-[#001B42] shadow-md text-[#FAFAFA] ">
+          <span className="text-white text-sm font-bold leading-[22px]  ">
             Adicionar subcategoria{" "}
           </span>
           <div className="text-right ">
@@ -162,3 +164,4 @@ export default function Category() {
     </>
   );
 }
+

src/components/MenuHeader/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import Avatar from "../avatar";
+import Avatar from "../Avatar";
 import { SubmitHandler, useForm} from "react-hook-form";
 
 interface IMenuFormValues{
@@ -26,7 +26,7 @@ export default function MenuHeader() {
 
             <form action="" className="mt-2 text-center flex flex-col justify-center items-center gap-2" onSubmit={handleSubmit(onSubmit)}>
 
-              <Avatar/>
+              <Avatar />
               <input
                 type="text"
                 disabled={isEditable === false}
@@ -38,7 +38,7 @@ export default function MenuHeader() {
 
 
               <textarea
-                className="text-sm resize-none px-2 py-1 mb-3 rounded-lg  disabled:bg-transparent disabled:border-none disabled:focus:outline-none disabled:text-semiwhite disabled:p-0 disabled:rounded-none"
+                className="text-sm text-center resize-none px-10 py-1 mb-3 rounded-lg  disabled:bg-transparent disabled:border-none disabled:focus:outline-none disabled:text-semiwhite  disabled:rounded-none"
                 disabled={isEditable === false}
                 value={establishmentAddress}
                 {...register("address", {required: true, onChange:(e)=>setEstablishmentAddress(e.target.value)})}

src/components/Subcategory/index.tsx

@@ -4,7 +4,7 @@ export function SubCategory () {
   return (
     <>
     <button className="w-full h-[48px] bg-royaldark flex-row flex justify-between items-center rounded-[5px] hover:cursor-pointer ">
-      <h1 className="text-white text-sm font-bold leading-[22px] ml-[8px]">Adicionar subcategoria</h1>
+      <h1 className="text-white text-sm font-bold leading-[22px] ml-[8px] flex justify-between">Adicionar subcategoria</h1>
       <img className ="w-[22px] h-[22px] mr-[13px] " src={imgSumyellow} alt="" />
     </button>
     </>

src/components/avatar/index.tsx

@@ -13,7 +13,7 @@ export default function Avatar() {
         setImage(e.target?.result?.toString());
       };
       reader.readAsDataURL(file);
-    }
+
 
 
     reader.readAsDataURL(file)

src/pages/MenuPage/index.tsx

@@ -1,14 +1,24 @@
-
-import MenuHeader from "../../components/MenuHeader";
+import Item from "../../components/Item";
+import imgPen from "../../assets/icons/pen.png";
+import { SubCategory } from "../../components/Subcategory";
 import Category from "../../components/Category";
+import MenuHeader from "../../components/MenuHeader";
+import { ButtonDelete } from "../../components/Delete";
+import AddCategory from "../../components/AddCategory";
 
 export default function MenuPage() {
   return (
     <div className="grid gap-4 ">
       <MenuHeader />
+
       <div className="mx-8 ">
         <Category />
+
+
+
+        <div className="my-10"></div>
+        <ButtonDelete />
       </div>
     </div>
   );
-}
+}

src/pages/homepage/index.tsx

@@ -1,4 +1,4 @@
-import FormButton from "../../components/button";
+
 import { useContext } from "react";
 import { AuthContext } from "../../contexts/Auth/AuthLogin/AuthContext";
 import { useNavigate } from "react-router-dom";

src/pages/menu/index.tsx

@@ -1,12 +1,35 @@
-
+import Item from "../../components/Item";
+import imgPen from "../../assets/icons/pen.png";
+import { SubCategory } from "../../components/Subcategory";
 import Category from "../../components/Category";
+import MenuHeader from "../../components/MenuHeader";
+import { ButtonDelete } from "../../components/Delete";
+
+export default function Menu() {
+  return (
+    <div className="grid gap-4 ">
+      <MenuHeader />
+
+      <div className="mx-8 ">
+
+
+        <div className="flex justify-between items-center">
 
-export default function MenuPage(){
-    return(
-        <>
-            <Category />
-
-        </>
-
-    )
+          <button>
+            <img
+              className="w-[21px] h-[18px]"
+              src={imgPen}
+              alt="icone para modificar pedido"
+            />
+          </button>
+        </div>
+        <Item name="" price="" />
+        <div className="flex justify-center itemx-center ">
+          <SubCategory />
+        </div>
+        <div className="my-10"></div>
+        <ButtonDelete />
+      </div>
+    </div>
+  );
 }

src/pages/signup/index.tsx

@@ -1,9 +1,8 @@
 import { useForm, SubmitHandler } from "react-hook-form";
 import { Link } from "react-router-dom";
-import { FormButtonBack } from "../../components/button/ButtonBack";
-import FormButtonForward from "../../components/button/ButtonForward";
 import { segmentsArray } from "./data";
 
+
 type FormValues = {
   name: string;
   email: string;

src/routes/index.tsx

@@ -1,12 +1,11 @@
 import { Routes, Route, Link } from "react-router-dom";
 import { RequireAuth } from "../contexts/Auth/AuthLogin/RequireAuth";
-import FirstStablishmentSignup from "../pages/firstStablishmentSignup";
-import Home from "../pages/Homepage";
+import Home from "../pages/homepage";
 import Login from "../pages/Login";
 import MenuPage from "../pages/MenuPage";
-import SecondStablishmentSignup from "../pages/SecondStablishmentSignup";
+import SecondStablishmentSignup from "../pages/secondStablishmentSignup";
 import Signup from "../pages/Signup";
-import SuccessfulRegistration from "../pages/SuccessfulRegistration";
+import SuccessfulRegistration from "../pages/successfulRegistration";
 
 export default function RoutesComponent() {
   return (
@@ -33,4 +32,4 @@ export default function RoutesComponent() {
       <Route path="/menupage" element={<MenuPage />}></Route>
     </Routes>
   );
-}
+}