Alterando os componentes de visualizar e editar antes de salvar

Author: acmesquita

src/components/ComponentList/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import marked from 'marked';
 import { sanitize } from 'dompurify';
-import { MdDone, MdDvr, MdEdit } from 'react-icons/md';
+import { MdDone, MdVisibility, MdCode } from 'react-icons/md';
 
 import { Types } from '../../store/reducer/example-reducer';
 
@@ -75,13 +75,13 @@ export default function ComponentList() {
             <MdDone width={24} />
           </button>
           <button type="button" onClick={preview}>
-            {hide() ? <MdDvr width={24} /> : <MdEdit width={24} />}
+            {hide() ? <MdVisibility width={24} /> : <MdCode width={24} />}
           </button>
         </div>
       </div>
       <div className="content-list">
-        <ul>
-          {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
+        <ul className="list">
+          {list.map(item => <li className="item" key={item.id}><ItemList item={item} /> </li>)}
         </ul>
       </div>
     </>

src/components/ComponentList/styles.css

@@ -59,12 +59,12 @@
   flex-direction: column;
 }
 
-ul {
+.list {
   width: 80%;
   padding: 30px;
 }
 
-ul li {
+.list .item {
   margin: 20px;
   padding: 20px;
   min-height: 200px;

src/styles/global.css

@@ -18,4 +18,9 @@ body {
 
 ul {
   list-style: none;
+}
+
+li, ol {
+  padding-left: 10px;
+  line-height: 24px;
 }