Skip to content

Commit 8cdeb49

Browse files
emseidovemseidov
committed
feat: (Man, think I have future as designer :D) Style the app...
1 parent 544db7d commit 8cdeb49

File tree

9 files changed

+122
-35
lines changed

9 files changed

+122
-35
lines changed

‎src/components/TodoApp.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ export const TodoContext = createContext(null);
1111
let initialTodos;
1212
if (!localStorage.getItem('solvoyo-todo')) {
1313
initialTodos = [
14-
{ id: shortid.generate(), task: 'Learn React', complete: true },
15-
{ id: shortid.generate(), task: 'Learn Redux', complete: false },
16-
{ id: shortid.generate(), task: 'Learn TypeScript', complete: false },
14+
{ id: shortid.generate(), task: 'Eat', complete: false },
15+
{ id: shortid.generate(), task: 'Sleep', complete: false },
16+
{ id: shortid.generate(), task: 'Code', complete: true },
17+
{ id: shortid.generate(), task: 'Repeat', complete: true },
1718
];
1819
localStorage.setItem('solvoyo-todo', JSON.stringify(initialTodos));
1920
} else {
@@ -75,13 +76,14 @@ const TodoApp = () => {
7576
});
7677

7778
return (
78-
<section className="todo">
79-
<TodoContext.Provider value={dispatchTodos}>
80-
<TodoForm />
79+
<TodoContext.Provider value={dispatchTodos}>
80+
<h1 className="solvoyo">Solvoyo</h1>
81+
<TodoForm />
82+
<section className="todo">
8183
<TodoList todos={filteredTodos} />
82-
<TodoFilter dispatch={dispatchFilter} />
83-
</TodoContext.Provider>
84-
</section>
84+
</section>
85+
<TodoFilter dispatch={dispatchFilter} />
86+
</TodoContext.Provider>
8587
);
8688
};
8789

‎src/components/TodoApp.sass‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1+
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Lobster+Two|Monoton&display=swap')
2+
3+
.solvoyo
4+
color: white
5+
6+
font-family: 'Dancing Script', cursive
7+
font-size: 60px
8+
19
.todo
2-
width: 500px
3-
min-height: 500px
10+
overflow: auto
11+
12+
width: 340px
13+
height: 380px
414

5-
border: 3px solid violet;
6-
border-radius: 10px;
15+
color: #fff
16+
border-radius: 10px
17+
box-shadow: 6px 6px 8px 4px rgba(0, 0, 0, .2)

‎src/components/TodoFilter.jsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { Button } from 'semantic-ui-react';
4+
import './TodoFilter.sass';
45

56
const TodoFilter = ({ dispatch }) => {
67
const handleShowAll = () => {
@@ -16,15 +17,31 @@ const TodoFilter = ({ dispatch }) => {
1617
};
1718

1819
return (
19-
<div>
20-
<Button onClick={handleShowAll} primary>
21-
Show All
20+
<div className="todo__filter">
21+
<Button
22+
active
23+
circular
24+
inverted
25+
onClick={handleShowAll}
26+
style={{ marginRight: '15px', width: '90px' }}
27+
>
28+
All
2229
</Button>
23-
<Button onClick={handleShowDone} primary>
24-
Show Done
30+
<Button
31+
circular
32+
inverted
33+
onClick={handleShowDone}
34+
style={{ marginRight: '15px', width: '90px' }}
35+
>
36+
Done
2537
</Button>
26-
<Button onClick={handleShowUndone} primary>
27-
Show Undone
38+
<Button
39+
circular
40+
inverted
41+
onClick={handleShowUndone}
42+
style={{ width: '90px' }}
43+
>
44+
Undone
2845
</Button>
2946
</div>
3047
);

‎src/components/TodoFilter.sass‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.todo__filter
2+
display: flex
3+
align-items: center
4+
justify-content: center
5+
6+
width: 340px
7+
height: 50px
8+
margin-top: 25px
9+
10+
border-radius: 10px
11+
box-shadow: 6px 6px 8px 4px rgba(0, 0, 0, .2)

‎src/components/TodoForm.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useContext, useState } from 'react';
22
import shortid from 'shortid';
33
import { Form } from 'semantic-ui-react';
44
import { TodoContext } from './TodoApp';
5+
import './TodoForm.sass';
56

67
const TodoForm = () => {
78
const dispatch = useContext(TodoContext);
@@ -17,16 +18,22 @@ const TodoForm = () => {
1718
};
1819

1920
return (
20-
<Form onSubmit={handleAdd}>
21+
<Form className="todo__form" onSubmit={handleAdd}>
2122
<Form.Group>
2223
<Form.Input
24+
focus
2325
name="task"
2426
onChange={handleChange}
2527
placeholder="Add a task..."
28+
style={{ height: '50px', width: '249px' }}
2629
type="text"
2730
value={task}
2831
/>
29-
<Form.Button circular color="violet" inverted type="submit">
32+
<Form.Button
33+
color="yellow"
34+
style={{ margin: '0 0 0 -15px' }}
35+
type="submit"
36+
>
3037
Add Task
3138
</Form.Button>
3239
</Form.Group>

‎src/components/TodoForm.sass‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.todo__form
2+
width: 340px
3+
height: 50px
4+
margin-bottom: 25px
5+
6+
box-shadow: 6px 6px 8px 4px rgba(0, 0, 0, .2)

‎src/components/TodoList.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { List } from 'semantic-ui-react';
34
import TodoListItem from './TodoListItem';
45

56
const TodoList = ({ todos }) => (
6-
<ul>
7+
<List divided relaxed>
78
{todos.map((todo) => (
89
<TodoListItem key={todo.id} todo={todo} />
910
))}
10-
</ul>
11+
</List>
1112
);
1213

1314
TodoList.propTypes = {

‎src/components/TodoListItem.jsx‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useContext } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Button } from 'semantic-ui-react';
3+
import { Checkbox, Icon, List } from 'semantic-ui-react';
44
import { TodoContext } from './TodoApp';
5+
import './TodoListItem.sass';
56

67
const TodoListItem = ({ todo }) => {
78
const dispatch = useContext(TodoContext);
@@ -19,20 +20,42 @@ const TodoListItem = ({ todo }) => {
1920

2021
if (todo.complete) {
2122
return (
22-
<li>
23-
<Button onClick={handleCheck}>Undone</Button>
24-
{todo.task}
25-
<Button onClick={handleDelete}>Delete</Button>
26-
</li>
23+
<List.Item style={{ padding: '0' }}>
24+
<List.Content>
25+
<div className="list__task">
26+
<Checkbox checked={todo.complete} onChange={handleCheck} />
27+
<p style={{ fontSize: '15px', margin: '0 5px', width: '100%' }}>
28+
<strike>{todo.task}</strike>
29+
</p>
30+
<Icon
31+
name="close"
32+
onClick={handleDelete}
33+
size="large"
34+
style={{ cursor: 'pointer' }}
35+
/>
36+
</div>
37+
</List.Content>
38+
</List.Item>
2739
);
2840
}
2941

3042
return (
31-
<li>
32-
<Button onClick={handleCheck}>Done</Button>
33-
{todo.task}
34-
<Button onClick={handleDelete}>Delete</Button>
35-
</li>
43+
<List.Item style={{ padding: '0' }}>
44+
<List.Content>
45+
<div className="list__task">
46+
<Checkbox checked={todo.complete} onChange={handleCheck} />
47+
<p style={{ fontSize: '15px', margin: '0 5px', width: '100%' }}>
48+
{todo.task}
49+
</p>
50+
<Icon
51+
name="close"
52+
onClick={handleDelete}
53+
size="large"
54+
style={{ cursor: 'pointer' }}
55+
/>
56+
</div>
57+
</List.Content>
58+
</List.Item>
3659
);
3760
};
3861

‎src/components/TodoListItem.sass‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.list__task
2+
display: flex
3+
align-items: center
4+
justify-content: space-between
5+
6+
height: 40.28px
7+
padding: 0 14px
8+
&:hover
9+
background-color: rgba(0, 0, 0, 0.07)

0 commit comments

Comments
 (0)