diff --git a/package.json b/package.json index fdc60ca..7f3c254 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "private": true, "dependencies": { + "bootstrap": "^3.3.7", "react": "^16.2.0", "react-dom": "^16.2.0", "react-scripts": "1.0.17" diff --git a/src/App.js b/src/App.js index aadc816..3fa11c2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,41 @@ import React from 'react'; /** - * A simple function which returns some text inside a

tag. + * Return HTML skeleton for todo list. */ function App() { return ( -

Let's Learn React

- ) +
+
+
+

Todos

+
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+
+
+
+ ); } export default App; diff --git a/src/assets/images/add.svg b/src/assets/images/add.svg new file mode 100644 index 0000000..1cb03d8 --- /dev/null +++ b/src/assets/images/add.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/images/search.svg b/src/assets/images/search.svg new file mode 100644 index 0000000..ccc84b6 --- /dev/null +++ b/src/assets/images/search.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/style/index.css b/src/assets/style/index.css new file mode 100644 index 0000000..5994827 --- /dev/null +++ b/src/assets/style/index.css @@ -0,0 +1,126 @@ +body { + background-color: #eee; + color: #555; +} + +.todolist { + background-color: #FFF; + padding: 20px 20px 10px 20px; + width: 600px; + margin: 30px auto; + border: 1px solid #ddd; + border-radius: 2px; + position: relative; +} + +.todolist h1 { + margin: 0; + padding-bottom: 20px; + text-align: center; + text-transform: uppercase; +} + +.todolist .info { + position: absolute; + margin-top: 20px; + left: 0; + right: 0; + color: #999; + text-align: center; +} + +.form-control { + border-radius: 0; +} + +li.ui-state-default { + background: #fff; + border: none; + border-bottom: 1px solid #ddd; +} + +li.ui-state-default:last-child { + border-bottom: none; +} + +li.completed label { + text-decoration: line-through; + color: #aaa; +} + +footer { + border-top: 1px solid #ddd; + background-color: #F4FCE8; + margin: 0 -20px -10px -20px; + padding: 12px 20px; + position: relative; + color: #777; +} + +.filters { + margin: 0; + padding: 0; + list-style: none; +} + +.filters li { + display: inline-block; +} + +.filters li a { + cursor: pointer; + color: inherit; + margin: 3px; + padding: 4px 8px; + text-decoration: none; + border: 1px solid transparent; + border-radius: 3px; +} + +.filters li a.selected, .filters li a:hover { + border-color: rgba(175, 47, 47, 0.1); +} + +.filters li a.selected { + border-color: rgba(175, 47, 47, 0.2); + color: #555; +} + +footer .buttons { + border-right: 1px solid #ccc; + margin-right: 15px; + padding-right: 10px; + height: 20px; +} + +.buttons .button { + display: inline-block; + margin: 0 5px; + height: 18px; + width: 18px; + cursor: pointer; + opacity: 0.5; + transition: 0.3s all; +} + +.buttons .button:hover, .buttons .button.selected { + opacity: 1; + border-color: #ddd; +} + +.buttons .add { + background: url(../images/add.svg) no-repeat center; +} + +.buttons .search { + background: url(../images/search.svg) no-repeat center; +} + +.alert.alert-info { + margin: 10px 0; + padding: 10px; + border-radius: 0; + background: #f2f2f2; + border: 1px solid rgba(229, 229, 229, 0.5); + color: #888; +} diff --git a/src/index.js b/src/index.js index a6aac8d..0939a3f 100644 --- a/src/index.js +++ b/src/index.js @@ -3,5 +3,11 @@ import ReactDOM from 'react-dom'; import App from './App'; +// Add boostrap css +import 'bootstrap/dist/css/bootstrap.css'; + +// Add our style +import './assets/style/index.css'; + // Render a React element to the DOM ReactDOM.render(, document.getElementById('root')); diff --git a/yarn.lock b/yarn.lock index e49635a..44e33e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1040,6 +1040,10 @@ boom@5.x.x: dependencies: hoek "4.x.x" +bootstrap@^3.3.7: + version "3.3.7" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71" + boxen@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6" @@ -5125,7 +5129,7 @@ react-dev-utils@^4.2.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@16.2.0: +react-dom@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044" dependencies: @@ -5181,7 +5185,7 @@ react-scripts@1.0.17: optionalDependencies: fsevents "1.1.2" -react@16.2.0: +react@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" dependencies: