Clase platzi#5 - Estilos CSS en React

scharcode · Jan 3, 2024 · 331845d · 331845d
1 parent 05f1c69
commit 331845d
Show file tree

Hide file tree

Showing 14 changed files with 158 additions and 63 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />
+    <title>TODO Machine</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,20 @@
+import React from 'react';
 import { TodoCounter } from './TodoCounter';
 import { TodoSearch } from './TodoSearch';
 import { TodoList } from './TodoList';
 import { TodoItem } from './TodoItem';
 import { CreateTodoButton } from './CreateTodoButton';
-import './App.css';
-import React from 'react';
 
 const defaultTodos = [
-  { text: "Cortar cebolla", completed: true },
-  { text: "Tomar el curso de ReactJS", completed: false },
+  { text: "Cortar cebolla", completed: false },
+  { text: "Tomar el curso de ReactJS", completed: true },
   { text: "Llorar con la llorona", completed: false },
-  { text: "Otra tarea pendiente", completed: false }
+  { text: "Otra tarea pendiente", completed: true }
 ];
 
 function App() {
   return (
-    <React.Fragment>
+    <>
 
       <TodoCounter completed={16} total={25} />
       <TodoSearch />
@@ -31,7 +30,7 @@ function App() {
       </TodoList>
 
       <CreateTodoButton />
-    </React.Fragment>
+    </>
   );
 }
 

diff --git a/src/CreateTodoButton.css b/src/CreateTodoButton.css
@@ -0,0 +1,25 @@
+.CreateTodoButton {
+  background-color: #61DAFA;
+  box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 50px;
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  font-weight: bold;
+  color: #FAFAFA;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+  width: 64px;
+
+  transform: rotate(0);
+  transition: .3s ease;
+}
+
+.CreateTodoButton:hover {
+  transform: rotate(224deg);
+}
diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js
@@ -1,6 +1,8 @@
+import './CreateTodoButton.css';
+
 function CreateTodoButton() {
   return (
-    <button>+</button>
+    <button className="CreateTodoButton">+</button>
   );
 }
 

diff --git a/src/TodoCounter.css b/src/TodoCounter.css
@@ -0,0 +1,11 @@
+.TodoCounter {
+  font-size: 24px;
+  text-align: center;
+  margin: 0;
+  padding: 48px;
+  font-weight: normal;
+}
+
+.TodoCounter span {
+  font-weight: bold;
+}
diff --git a/src/TodoCounter.js b/src/TodoCounter.js
@@ -1,7 +1,9 @@
+import './TodoCounter.css';
+
 function TodoCounter({ total, completed }) {
   return (
-    <h1>
-      Completaste {completed} de {total} TODOS
+    <h1 className='TodoCounter'>
+      Completaste <span>{completed}</span> de <span>{total}</span> TODOS
     </h1>
   );
 }

diff --git a/src/TodoItem.css b/src/TodoItem.css
@@ -0,0 +1,49 @@
+.TodoItem {
+  background-color: #FAFAFA;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 24px;
+  box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.15);
+}
+
+.TodoItem-p {
+  margin: 24px 0 24px 24px;
+  width: calc(100% - 120px);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.TodoItem-p--complete {
+  text-decoration: line-through;
+}
+
+.Icon {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  width: 48px;
+  font-size: 24px;
+  font-weight: bold;
+  /* background-color: #CCC; */
+}
+
+.Icon-check {
+  position: absolute;
+  left: 12px;
+}
+.Icon-check--active {
+  color: #4caf50;
+}
+
+.Icon-delete {
+  position: absolute;
+  top: -24px;
+  right: 0;
+}
+.Icon-delete:hover {
+  color: red;
+}
diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -1,9 +1,17 @@
+import './TodoItem.css';
+
 function TodoItem(props) {
   return (
-    <li>
-      <span>V</span>
-      <p>{props.text}</p>
-      <span>X</span>
+    <li className="TodoItem">
+      <span className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}>
+        V
+      </span>
+      <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>
+        {props.text}
+      </p>
+      <span className="Icon Icon-delete">
+        X
+      </span>
     </li>
   );
 }

diff --git a/src/TodoList.css b/src/TodoList.css
@@ -0,0 +1,5 @@
+.TodoList {
+  margin: 0;
+  padding: 0 0 56px 0;
+  list-style: none;
+}
diff --git a/src/TodoList.js b/src/TodoList.js
@@ -1,6 +1,8 @@
+import './TodoList.css';
+
 function TodoList({ children }) {
   return (
-    <ul>
+    <ul className='TodoList'>
       {children}
     </ul>
   );

diff --git a/src/TodoSearch.css b/src/TodoSearch.css
@@ -0,0 +1,24 @@
+.TodoSearch {
+  background: #F9FBFC;
+  border-radius: 2px;
+  border: 2px solid #202329;
+  margin: 0 24px;
+  height: 64px;
+  width: calc(100% - 62px);
+  font-size: 24px;
+  text-align: center;
+  font-family: 'Montserrat';
+  font-weight: 400;
+  color: #1E1E1F;
+  box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.25);
+}
+
+.TodoSearch::placeholder {
+  color: #A5A5A5;
+  font-family: 'Montserrat';
+  font-weight: 400;
+}
+
+.TodoSearch:focus {
+  outline-color: #61DAFA;
+}
diff --git a/src/TodoSearch.js b/src/TodoSearch.js
@@ -1,6 +1,11 @@
+import './TodoSearch.css';
+
 function TodoSearch() {
   return (
-    <input placeholder="Cortar cebolla" />
+    <input 
+      placeholder="Buscar TODO"
+      className="TodoSearch"
+    />
   );
 }
 

diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  background: #F2F4F5;
+  color: #1E1E1F;
+  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+#root {
+  margin: 0 24px;
+  position: relative;
+  min-height: 100vh;
 }