Agregamos css a nuestros botones

MatiRivarola · Jun 8, 2023 · e27e9e7 · e27e9e7
1 parent f87efcb
commit e27e9e7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 29 deletions.
diff --git a/src/App.css b/src/App.css
@@ -153,37 +153,28 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 48px;
-  width: 48px;
+  height: 43px;
+  width: 37px;
   font-size: 24px;
   font-weight: bold;
 }
 
+
 .icon-check{
   position: absolute;
   left: 12px;
 }
 
-.icon-check:hover{
-  color: green;
-}
-
-.icon-check--active{
-  color: green;
-}
-
-
 .icon-delete{
   position: absolute;
   top: -20px;
   right: -5px;
 }
 
-.icon-delete:hover{
-  color: red;
+.icon-delete:hover .icon-svg{
+  fill: red;
 }
 
-.icon-svg{
-  width: 24px;
-  height: 24px;
+.icon-check:hover .icon-svg{
+  fill: green;
 }
diff --git a/src/CompleteIcon.js b/src/CompleteIcon.js
@@ -1,13 +1,13 @@
 import React from "react";
 import { TodoIcon } from "./TodoIcon";
 
-import { BiCheck } from "react-icons/bi";
 
-function CompleteIcon() {
+function CompleteIcon( { completed ,onComplete} ) {
     return (
         <TodoIcon
             type="check"
-            color="gray"
+            color= {completed ? "green": "gray"}
+            onClick={onComplete}
         />
     )
 

diff --git a/src/DeleteIcon.js b/src/DeleteIcon.js
@@ -3,11 +3,12 @@ import React from "react";
 import { TodoIcon } from "./TodoIcon";
 
 
-function DeleteIcon(){
+function DeleteIcon( {onDelete} ){
     return (
         <TodoIcon
             type="delete"
-            color="red"
+            color="grey"
+            onClick={onDelete}
         />
     );
 }

diff --git a/src/TodoIcon.js b/src/TodoIcon.js
@@ -1,17 +1,20 @@
-import { AiOutlineDelete } from "react-icons/ai";
+import { TiDeleteOutline } from "react-icons/ti";
 import { BiCheck } from "react-icons/bi";
 
 const iconTypes = {
-    "check": <BiCheck/>,
-    "delete":<AiOutlineDelete/>,
+    "check": (color) =>  <BiCheck 
+    className="icon-svg" fill={color}/>,
+    "delete": (color) => <TiDeleteOutline 
+    className="icon-svg" fill={color}/>,
 };
 
-function TodoIcon( {type} ) {
+function TodoIcon( {type, color ,onClick } ) {
     return(
         <span
-        className= {`icon icon-svg icon-${type}`}
+        className= {`icon  icon-${type}`}
+        onClick = {onClick}
         >
-            {iconTypes[type]}
+            {iconTypes[type](color)}
         </span>
     )
 }

diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -7,11 +7,16 @@ function TodoItem(props){
     return (
       <li className='todo-item'>
 
-        <CompleteIcon/>
+        <CompleteIcon
+        completed={props.completed}
+        onComplete={props.onComplete}
+        />
 
         <p className={`todo-item-p ${props.completed && "todoItem-p-completed"}`} > {props.text} </p>
 
-        <DeleteIcon/>
+        <DeleteIcon
+        onDelete={props.onDelete}
+        />
 
       </li>
     );