add Styles to the Icons

JuanDaGue · Aug 28, 2024 · e11d2a8 · e11d2a8
1 parent 7cf5f20
commit e11d2a8
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 9 deletions.
diff --git a/src/App.js b/src/App.js
@@ -33,6 +33,7 @@ function App() {
   )
 
   const TodoComplet = (text) =>{
+    console.log('Complete')
     const newTodos=[...todos]
     const todoIndex = newTodos.findIndex(
       elem => elem.text== text
@@ -45,6 +46,7 @@ function App() {
     setTodos(newTodos);
   }
   const TodoDelet = (text)=>{
+    console.log('Delete')
     const newTodos=[...todos]
     const todoIndex = newTodos.findIndex(
       elem => elem.text== text

diff --git a/src/IconCheck.js b/src/IconCheck.js
@@ -0,0 +1,21 @@
+import React from "react";
+import {TodoIcon} from './TodoIcon';
+ function IconCheck({onComplete}){
+     return (
+         <TodoIcon
+            type="check"
+            onClick={onComplete}
+         />
+     )
+ }
+export {IconCheck}
+
+
+
+// import React from 'react';import{TodoIcon}from './TodoIcon';
+
+// function CompleteIcon({completed,onComplete}){return(<TodoIcon
+//      type="check"
+//         color={completed?'green':'gray'}
+//         onClick={onComplete}/>);}
+//     export{CompleteIcon};
diff --git a/src/IconDelete.js b/src/IconDelete.js
@@ -0,0 +1,11 @@
+import React from "react";
+import {TodoIcon} from "./TodoIcon";
+function IconDelete({onDelete}){
+    return (
+        <TodoIcon
+            type="delete"
+            onClick={onDelete}
+        />
+    )
+}
+export {IconDelete}
diff --git a/src/Icons/check.svg b/src/Icons/check.svg
diff --git a/src/Icons/complete.svg b/src/Icons/complete.svg
diff --git a/src/Icons/delete.svg b/src/Icons/delete.svg
diff --git a/src/TodoIcon.js b/src/TodoIcon.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { ReactComponent as CheckSVG} from './Icons/check.svg'
+import { ReactComponent as DeleteSVG} from './Icons/delete.svg'
+
+const iconTypes={"check":<CheckSVG/>,"delete":<DeleteSVG/>,}
+function TodoIcon({type, onClick}){
+    return(
+    <span className={`Icon Icon-svg Icon-${type}`} onClick={onClick} >
+        {iconTypes[type]}
+    </span>
+    )
+}
+export {TodoIcon};
+
+
+
+// import{ReactComponent as CheckSVG}from './check.svg';import{ReactComponent as DeleteSVG}from './delete.svg';import './TodoIcon.css';const iconTypes={"check":(color)=><CheckSVG className="Icon-svg"fill={color}/>,"delete":(color)=><DeleteSVG className="Icon-svg"fill={color}/>,};
+
+
+// function TodoIcon({type,color,onClick}){return(<span
+// className={`Icon-container Icon-container-${type}`}
+// onClick={onClick}>{iconTypes[type](color)}</span>)}
+// export{TodoIcon};
diff --git a/src/TodoItem.css b/src/TodoItem.css
@@ -24,17 +24,32 @@ p {
     color: #555;
 }
 
-.Icon-check-active{
-    background-color:beige;
+.Icon-check-active {
+    background-color: beige;
 }
-.Icon-check-active .Icon-check{
+.Icon-check-active .Icon-check {
     color: aquamarine;
 }
-
+.Icon-check-active .Icon-svg {
+    fill: aquamarine;
+}
+.Icon-svg {
+    fill: #caa275;
+}
 .Icon {
     cursor: pointer;
 }
-
-.inactive{
+.inactive {
     display: none;
+}
+
+/* New hover effect and transition */
+.Icon:hover .Icon-svg {
+    fill: aquamarine; /* Change to your desired hover color */
+    transition: fill 0.3s ease; /* Smooth transition */
+}
+
+.Icon:hover .Icon-check {
+    color: aquamarine; /* Change to your desired hover color */
+    transition: color 0.3s ease; /* Smooth transition */
 }
diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -1,11 +1,17 @@
 import "./TodoItem.css"
+import { IconCheck } from  './IconCheck'
+import { IconDelete } from  './IconDelete'
+
 function TodoItem(props){
     return(
     <li className={`TodoIteM ${props.completed && "Icon-check-active"}`}>
-      <span className={`Icon Icon-check`} onClick={props.onComplete}> V </span>
+      {/* <span className={`Icon Icon-check`} onClick={props.onComplete}> V </span> */}
+      <IconCheck onComplete={props.onComplete}/>
       <p className={`TodoItem-p TodoItem-p--complete`}>{props.text}</p>
-      <span className='Icon Icon-delete' onClick={props.onDelete}>X </span>
+      <IconDelete onDelete={props.onDelete}/>
+
+      {/* <span className='Icon Icon-delete' onClick={props.onDelete}>X </span> */}
     </li>
     );
 }
-export { TodoItem};
+export { TodoItem};