Adicionando um style

Author: acmesquita

src/components/ComponentList/index.js

@@ -5,6 +5,8 @@ import { Types } from '../../store/reducer/example-reducer';
 import Note from '../../models/Note';
 import ItemList from '../ItemList'
 
+import './styles.css'
+
 export default function ComponentList() {
 
   const qty = 20
@@ -23,13 +25,15 @@ export default function ComponentList() {
 
   return (
     <>
-      <textarea
-        cols={100}
-        rows={10}
-        value={text}
-        onChange={e => setText(e.target.value)}
-      />
-      <button type="button" onClick={add}>ADD</button>
+      <div className="content-add">
+        <textarea
+          cols={100}
+          rows={10}
+          value={text}
+          onChange={e => setText(e.target.value)}
+        />
+        <button type="button" onClick={add}>ADD</button>
+      </div>
       <ul>
         {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
       </ul>

src/components/ComponentList/styles.css

@@ -0,0 +1,38 @@
+.content-add {
+  width: 100%;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-add textarea {
+  padding: 10px;
+  font-size: 18px;
+}
+
+.content-add button {
+  padding: 10px;
+  margin: 10px;
+}
+
+ul {
+  width: 100%;
+  margin: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+ul li {
+  margin: 10px;
+  padding: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #717180;
+  border-radius: 8px;
+}

src/components/ItemList/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
-// import { Container } from './styles';
+import './styles.css';
 
 export default function ItemList({ item }) {
 
@@ -14,8 +14,9 @@ export default function ItemList({ item }) {
 
   return (
     <span>
-      {item.text} - {item.createAt}
-      <button type="button" onClick={remove}>DELETE</button>
+      <div>{item.text}</div>
+      <small>{item.createAt}</small>
+      <button type="button" onClick={remove} className="trach">DEL</button>
     </span>
   );
 }