Padronizando os icones

src/components/Category/index.tsx

@@ -2,12 +2,14 @@ import { useRef, useState } from "react";
 import Edit from "../../assets/icons/pen.png";
 import Editsub from "../../assets/icons/pen-white.png";
 import Drop from "../../assets/icons/drop.png";
-import Plus from "../../assets/icons/sum.png";
+import Plus from "../../assets/icons/plus.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 PlusBig from "../../assets/icons/plus-big.png";
+import NewItemModal from "../NewItemModal";
+
 
 export default function Category() {
+  const [showModal, setShowModal] = useState(false);
   const [cards, setCards] = useState(["Pizza"]);
   const [subcards, setSubcards] = useState([""]);
   const [isEditable, setIsEditable] = useState(false);
@@ -88,7 +90,18 @@ export default function Category() {
               Adicionar item
             </h1>
           </div>
-          <img className="w-[40px] h-[40px] mr-4" src={imgSum}alt="" />
+          <img
+                className="w-[40px] h-[40px] mr-4"
+                src={PlusBig}
+                alt=""
+                onClick={() => setShowModal(true)}
+              />
+              {showModal ? (
+                <>  
+                 < NewItemModal 
+                 onClick={() => setShowModal(false)}/>
+                </>
+              ) : null}
         </button>
       </div>
         )}
@@ -102,7 +115,7 @@ export default function Category() {
               Adicionar subcategoria{" "}
             </span>
             <div className="text-right ">
-            <img className ="w-[22px] h-[22px] mr-[13px] " src={imgSumy} alt="" />
+            <img className ="w-[22px] h-[22px] mr-[13px] " src={Plus} alt="" />
             </div>
           </button>
       </div>

src/components/NewItemModal/index.tsx

@@ -0,0 +1,116 @@
+import { useForm, SubmitHandler } from "react-hook-form";
+
+interface IFormValues {
+    name: string;
+    itemDescription: string;
+    price: number;
+    photoDescription: string;
+  }
+
+  export default function NewItemModal(props: any) {
+    const { register, handleSubmit } = useForm<IFormValues>();
+
+    const submit: SubmitHandler<IFormValues> = (data) =>
+      alert(JSON.stringify(data));
+
+    return (
+      <div className="h-[520px] w-[314px] bg-semiwhite rounded-xl pt-4 pb-5 px-4 absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]">
+        <div className="min-w-[50%] flex flex-col items-center">
+          <h1 className="raisinblack leading-6 text-center font-bold w-4/5 mb-4">
+            Cadastrar novo item
+          </h1>
+          <form
+            onSubmit={handleSubmit(submit)}
+            className="w-full bg-semiwhite flex flex-col gap-2"
+          >
+            <div className="flex flex-col gap-2">
+              <label className="leading-6 text-left raisinblack" htmlFor="name">
+                Nome do Item
+              </label>
+              <div>
+                <input
+                  className="block box-border w-full rounded-md border-solid border border-royalblue py-2 px-2 text-sm"
+                  placeholder="Escreva o nome do item"
+                  type="text"
+                  id="name"
+                  required
+                  {...register("name")}
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <label
+                className="leading-6 text-left raisinblack"
+                htmlFor="item-description"
+              >
+                Descrição (opcional)
+              </label>
+              <div>
+                <input
+                  className="block box-border w-full rounded-md border-solid border border-royalblue py-2 px-2 text-sm"
+                  placeholder="Escreva a descrição do item"
+                  type="text"
+                  id="item-description"
+                  {...register("itemDescription")}
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <label className="leading-6 text-left raisinblack" htmlFor="price">
+                Preço
+              </label>
+              <div>
+                <input
+                  className="block box-border w-3/6 rounded-md border-solid border border-royalblue py-2 px-2 text-sm"
+                  placeholder="R$ 00,00"
+                  type="number"
+                  step="0.01"
+                  min="0.01"
+                  id="price"
+                  required
+                  {...register("price")}
+                />
+              </div>
+            </div>
+
+            <button className="formButtonBack !w-full font-bold">
+              Adicionar foto do item
+            </button>
+
+            <div className="flex flex-col gap-2">
+              <label
+                className="leading-6 text-left raisinblack"
+                htmlFor="photo-decription"
+              >
+                Descrição da foto
+              </label>
+              <div>
+                <input
+                  className="block box-border w-full rounded-md border-solid border border-royalblue py-2 px-2 text-sm"
+                  placeholder="Escreva a descrição da foto que adicionou"
+                  type="text"
+                  id="photo-decription"
+                  required
+                  {...register("photoDescription")}
+                />
+              </div>
+            </div>
+
+            <div className="font-bold flex-row flex justify-around mt-5">
+              <button onClick={props.onClick} className="formButtonBackMin bg-semiwhite">
+                Cancelar
+              </button>
+
+              <input
+                type="submit"
+                className="formButtonForwardMax hover:cursor-pointer"
+                value="Salvar"
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }

src/pages/homepage/index.tsx

@@ -1,29 +1,41 @@
-import { useContext } from 'react';
+import { useContext } from "react";
 import { AuthContext } from "../../contexts/Auth/AuthLogin/AuthContext";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 
 export default function Home() {
   const auth = useContext(AuthContext);
   const navigate = useNavigate();
-  function handleLogout(event:  React.MouseEvent<HTMLAnchorElement, MouseEvent>){
+  function handleLogout(
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) {
     event.preventDefault();
     auth.signout();
-    navigate('/login')
+    navigate("/login");
   }
 
   return (
     <div className="flex flex-col bg-slate-800">
       <div>
-        <h1 className="text-4xl mb-7"
-        > Olá {auth.user?.name}, Tudo bem?
-        </h1>
+        <h1 className="text-4xl mb-7"> Olá {auth.user?.name}, Tudo bem?</h1>
       </div>
       <a href="/login">Login</a>
       <a href="/signup">Cadastro</a>
-      <a href="/firstStablishmentSignup">Primeiro Cadastro de Estabelecimento</a>
-      <a href="/secondStablishmentSignup">Segunda Página Cadastro de Estabelecimento</a> 
-      {auth.user && <a href="/login" onClick={handleLogout}>Sair</a>}
-      <input type="submit" className="formButtonForward hover:cursor-pointer" value="Enviar" />
+      <a href="/firstStablishmentSignup">
+        Primeiro Cadastro de Estabelecimento
+      </a>
+      <a href="/secondStablishmentSignup">
+        Segunda Página Cadastro de Estabelecimento
+      </a>
+      {auth.user && (
+        <a href="/login" onClick={handleLogout}>
+          Sair
+        </a>
+      )}
+      <input
+        type="submit"
+        className="formButtonForward hover:cursor-pointer"
+        value="Enviar"
+      />
     </div>
-  )
-}
+  );
+}

src/pages/login/index.tsx

@@ -1,33 +1,36 @@
-import { FormEvent, useCallback, useState, useContext } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { AuthContext } from '../../contexts/Auth/AuthLogin/AuthContext';
-import { IFormInputs } from '../../types';
-import Logo from '../../assets/images/logo.png';
+import { FormEvent, useCallback, useState, useContext } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { AuthContext } from "../../contexts/Auth/AuthLogin/AuthContext";
+import { IFormInputs } from "../../types";
+import Logo from "../../assets/images/logo.png";
 
 export default function Login() {
   const [formData, setFormData] = useState<IFormInputs>({
-    email: '',
-    senha: '',
+    email: "",
+    senha: "",
   });
   const auth = useContext(AuthContext);
   const navigate = useNavigate();
-  const handleFormSubmit = useCallback(async (event: FormEvent) => {
-    event.preventDefault()
-    const { email, senha } = formData;
-    const isLogged = await auth.signin(email, senha)
-    if (email && senha) {
-      if (isLogged) {
-        navigate('/');
-        return true;
+  const handleFormSubmit = useCallback(
+    async (event: FormEvent) => {
+      event.preventDefault();
+      const { email, senha } = formData;
+      const isLogged = await auth.signin(email, senha);
+      if (email && senha) {
+        if (isLogged) {
+          navigate("/");
+          return true;
+        }
+        return false;
       }
-      return false
-    }
-  }, [formData]);
+    },
+    [formData]
+  );
 
   return (
     <>
       <div className="min-h-[110vh] flex justify-center items-center flex-col bg-semiwhite md:flex-row ml-7">
-        <div className='m-10'>
+        <div className="m-10">
           <img src={Logo} alt="Logo" width={450} height={380} />
         </div>
         <form
@@ -37,17 +40,24 @@ export default function Login() {
           <h1 className="text-oxfordblue text-4xl text-center font-bold mb-8">
             Entrar na Conta
           </h1>
-          <div className='mb-5'>
+          <div className="mb-5">
             <label
               className="text-left font-bold text-raisinblack text-base"
               htmlFor="email"
             >
               E-mail
             </label>
             <input
-              type='email' name='email' id='email' required placeholder='Digite seu email' autoComplete='current-email'
+              type="email"
+              name="email"
+              id="email"
+              required
+              placeholder="Digite seu email"
+              autoComplete="current-email"
               className="block box-border w-full rounded-[5px] border border-royalblue py-2 pl-4 pr-6 mb-3  text-sm"
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              onChange={(e) =>
+                setFormData({ ...formData, email: e.target.value })
+              }
             />
           </div>
           <div>
@@ -58,26 +68,35 @@ export default function Login() {
               Senha
             </label>
             <input
-              type='password' placeholder='Digite sua senha' id='password' autoComplete='current-password' required minLength={8}
+              type="password"
+              placeholder="Digite sua senha"
+              id="password"
+              autoComplete="current-password"
+              required
+              minLength={8}
               className="w-full rounded-[5px] border border-royalblue py-2 pl-4 pr-6 mb-10 text-sm"
-              onChange={(e) => setFormData({ ...formData, senha: e.target.value })}
+              onChange={(e) =>
+                setFormData({ ...formData, senha: e.target.value })
+              }
             />
           </div>
-          <div className='text-center'>
-            <button type="submit"
+          <div className="text-center">
+            <button
+              type="submit"
               className="box-border border-2 border-cyberyellow py-2 px-4 text-[sm] rounded-[10px] w-[230px] items-center text-raisinblack txt font-bold"
-            >Entrar
+            >
+              Entrar
             </button>
-            <div className='p-10  flex flex-col justify-center items-center'>
-              <span className='font-bold font-xl mb-8 text-raisinblack text-base' >
+            <div className="p-10  flex flex-col justify-center items-center">
+              <span className="font-bold font-xl mb-8 text-raisinblack text-base">
                 Ainda não possui uma conta?
               </span>
-              <Link to={'/signup'}
-                className='bg-cyberyellow  py-3 px-4 text-[sm] rounded-[10px] w-[230px] items-center text-raisinblack txt font-bold '
+              <Link
+                to={"/signup"}
+                className="bg-cyberyellow  py-3 px-4 text-[sm] rounded-[10px] w-[230px] items-center text-raisinblack txt font-bold "
               >
-                <><span>
-                  Registre-se
-                </span>
+                <>
+                  <span>Registre-se</span>
                 </>
               </Link>
             </div>
@@ -86,4 +105,4 @@ export default function Login() {
       </div>
     </>
   );
-}
+}