css del modal para que ocupe todo, z-index del boton, PReact Portals …

…finalizado
Misael-GC · Nov 3, 2023 · 4453657 · 4453657
1 parent 2918217
commit 4453657
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/src/CreateTodoButton/CreateTodoButton.css b/src/CreateTodoButton/CreateTodoButton.css
@@ -17,7 +17,8 @@
     height:64px;
     width:64px;
     transform:rotate(0);
-    transition:.3s ease
+    transition:.3s ease;
+    z-index: 1;
 }
 
 .CreateTodoButton:hover{

diff --git a/src/CreateTodoButton/index.js b/src/CreateTodoButton/index.js
@@ -10,7 +10,7 @@ function CreateTodoButton(){
         <button
          className="CreateTodoButton"
          onClick={
-            (event) =>{
+            () =>{
                 setOpenModal((abrirModal) => !abrirModal)
             }
          }

diff --git a/src/Modal/Modal.css b/src/Modal/Modal.css
@@ -0,0 +1,12 @@
+.ModalBackground{
+  background-color: rgba(32,35,41,.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
diff --git a/src/Modal/index.js b/src/Modal/index.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom';
+import './Modal.css'
 
 function Modal({children}) {
   return ReactDOM.createPortal(
-    <div className='Modal'>
+    <div className='ModalBackground'>
         {children}
     </div>,
     document.getElementById('modal')

diff --git a/src/TodoForm/index.js b/src/TodoForm/index.js
@@ -1,15 +1,16 @@
 import React from "react";
 import './TodoForm.css'
+import { AiTwotoneEdit } from "react-icons/ai";
 
 function TodoForm() {
   return (
     <form className="formModal">
       {" "}
       {/* conecta con el submi */}
-      <label>Escribe tu nueva tarea</label>
+      <label>Escribe tu nueva tarea <AiTwotoneEdit/></label>
       <textarea
 
-        placeholder="Actividad por hacer"
+        placeholder="Actividad por hacer 🚀"
       />
       <div className="TodoForm-buttonContainer">
         <button