Fim da live 1

Author: marcobrunodev

src/App.js

@@ -1,10 +1,23 @@
 import React from 'react';
 
+import './styles/settings/colors.css';
 import './styles/generic/reset.css';
-import Title from './components/Title';
+import './styles/elements/base.css';
+import MainTitle from './components/MainTitle';
+import MainTask from './components/MainTask';
 
 const App = () => (
- <Title content="Todo" />
+ <>
+ <MainTitle content="Todo" />
+
+ <MainTask id="task1" content="Criar o title" />
+
+ <MainTask id="task2" content="Criar o title" />
+
+ <MainTask id="task3" content="Criar o title" />
+
+ <MainTask id="task4" content="Criar o title" />
+ </>
 );
 
 export default App;

src/components/MainTask/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Label, Checkbox } from './styles';
+
+const MainTask = ({id, content}) => (
+ <>
+ <Checkbox id={id} />
+ <Label for={id}>
+ {content}
+ </Label>
+ </>
+);
+
+export default MainTask;

src/components/MainTask/styles.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+const Checkbox = styled.input.attrs({ type: "checkbox"})`
+ display: none;
+`;
+
+const Label = styled.label`
+ display: flex;
+ align-items: center;
+ font-size: 22px;
+ font-weight: 300;
+ padding: 30px 20px;
+ margin-bottom: 30px;
+ 
+ background-image: linear-gradient(270.67deg, rgba(255, 255, 255, 0) 0.13%, rgba(160, 163, 164, 0.483621) 18.84%, rgba(123, 127, 128, 0.671695) 39.1%, rgba(81, 86, 88, 0.885417) 75.46%, #3A4042 99.88%);
+
+ &:before {
+ content: "";
+ box-sizing: content-box;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: 2px solid var(--color-first);
+ margin-right: 15px;
+ cursor: pointer;
+ }
+
+ ${Checkbox}:checked + &:before {
+ background-color: var(--color-first);
+ }
+`;
+
+
+
+export { Label, Checkbox }

src/components/MainTitle/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Title } from './styles';
+
+const MainTitle = ({ content }) => (
+ <Title>{content}</Title>
+);
+
+export default MainTitle;

src/components/MainTitle/styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const Title = styled.h1`
+ font-size: 34px;
+ text-align: center;
+ font-weight: bold;
+ margin-bottom: 20px;
+`
+
+export { Title }

src/components/Title/index.js

@@ -0,0 +1,5 @@
+body {
+ padding-top: 30px;
+ font-family: 'Comfortaa', sans-serif;
+ color: var(--color-base);
+}

src/components/Title/styles.css

@@ -0,0 +1,4 @@
+:root {
+ --color-base: #E5E5E5;
+ --color-first: #F25A70;
+}