Digital/checkpoint/wave 00 Vite Updates

src/App.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import TaskList from './components/TaskList.jsx';
 import './App.css';
 

src/components/Task.css

@@ -35,9 +35,17 @@
 button.tasks__item__remove {
   top: 50%;
   right: 0;
-  height: 100%;
+  height: 1;
+  background-color: #1779ba;
+  color: white;
+  border: none;
+  width: 2.5em;
   /* transform: translateY(-50%); */
   /* padding: 0.85em 2.25em 0.85em 1em; */
   font-size: 100%;
   margin: 0;
 }
+
+button.tasks__item__remove:hover {
+  background-color: #0f6d9c;
+}

src/components/Task.jsx

@@ -1,20 +1,11 @@
-import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import './Task.css';
 
 const Task = ({ id, title, isComplete }) => {
-  const [complete, setComplete] = useState(isComplete);
-  const buttonClass = complete ? 'tasks__item__toggle--completed' : '';
-
   return (
     <li className="tasks__item">
-      <button
-        className={`tasks__item__toggle ${buttonClass}`}
-        onClick={() => setComplete(!complete)}
-      >
-        {title}
-      </button>
+      <button className="tasks__item__toggle">{title}</button>
       <button className="tasks__item__remove button">x</button>
     </li>
   );

src/components/TaskList.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import Task from './Task.jsx';
 import './TaskList.css';