edit readme(screenshot)

README.md

@@ -1,19 +1,61 @@
-# tomadoro 🍅
-A timer based on the Pomodoro Technique
+<h1 align="center">Welcome to tomadoro 🍅</h1>
+<p>
+  <img alt="Version" src="https://img.shields.io/badge/version-1.7.0-blue.svg?cacheSeconds=2592000" />
+  <a href="https://github.com/franjsco/tomadoro/graphs/commit-activity" target="_blank">
+    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
+  </a>
+  <a href="https://github.com/franjsco/tomadoro/blob/master/LICENSE" target="_blank">
+    <img alt="License: GPL--3.0--or--later" src="https://img.shields.io/github/license/franjsco/tomadoro" />
+  </a>
+  <a href="https://twitter.com/franjsco" target="_blank">
+    <img alt="Twitter: franjsco" src="https://img.shields.io/twitter/follow/franjsco.svg?style=social" />
+  </a>
+</p>
 
-![tomadoro screenshot](screenshot.png) 
+> A timer based on the Pomodoro Technique
 
-Technologies: 
-* HTML5 and CSS
-* JavaScript 
-* React.js
-* Bootstrap (reactstrap)
+### ✨ [Demo](https://franjsco.github.io/tomadoro/)
 
-## Demo
-Try tomadoro: https://frsposito.github.io/tomadoro/
+![tomadoro screenshot](screenshot.jpg) 
 
-## License
-GPLv3
+## Install
 
----
-Made with ❤️ by Francesco Esposito ([@frsposito](https://github.com/frsposito))
+```sh
+npm install
+```
+
+## Usage
+
+**Development**
+```sh
+npm run start
+```
+
+**Production**
+```sh
+npm run build
+npm install -g serve
+serve -s build
+```
+Other Solutions: [here](https://create-react-app.dev/docs/deployment/)
+
+## Author
+
+👤 **franjsco (Francesco Esposito)**
+
+* Website: https://franjsco.github.io/
+* Twitter: [@franjsco](https://twitter.com/franjsco)
+* Github: [@franjsco](https://github.com/franjsco)
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+Copyright © 2020 [franjsco (Francesco Esposito)](https://github.com/franjsco).<br />
+This project is [GPL--3.0--or--later](https://github.com/franjsco/tomadoro/blob/master/LICENSE) licensed.
+
+Photo by Zoltan Tasi on Unsplash
+
+***
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

package.json

@@ -1,18 +1,18 @@
 {
   "name": "tomadoro",
   "description": "tomadoro",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "private": true,
   "engines": {
     "npm": "6.4.1",
     "node": "10.15.0"
   },
   "dependencies": {
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.4.1",
     "prop-types": "^15.7.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-scripts": "^3.2.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
     "react-web-notification": "^0.5.0",
     "reactstrap": "^7.1.0"
   },
@@ -24,7 +24,7 @@
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   },
-  "homepage": "http://frsposito.github.io/tomadoro",
+  "homepage": "http://franjsco.github.io/tomadoro",
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -36,11 +36,11 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/frsposito/tomadoro.git"
+    "url": "git+https://github.com/franjsco/tomadoro.git"
   },
-  "author": "frsposito",
+  "author": "franjsco",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "gh-pages": "^2.1.1"
+    "gh-pages": "^2.2.0"
   }
 }

src/components/Box.js

@@ -1,29 +1,28 @@
 import React from 'react';
-import { Button, Row, Col } from 'reactstrap';
+import { Button, Row, Col, Card, CardBody } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 
 const box = props => {
   const buttonStyle = {
-    fontSize: '16px',
-    fontWeight: 'lighter',
-    height: '50px',
-    borderRadius: '30px',
+    fontSize: '20px',
+    height: '54px',
+    borderRadius: '24px',
     width: '100%',
     margin: '4px 0px 4px 0px'
   };
 
   const boxStyle = {
-    padding: '6px',
-    backgroundColor: 'white',
-    borderRadius: '6px',
-    borderBottom: '16px solid #c84132',
-    boxShadow: '0 2px 3px #8a8888'
+    padding: '2px',
+    borderRadius: '14px',
+    background: 'rgb(0,0,0, 0.4)'
   };
 
+  
   return (
-    <div style={boxStyle}>
-        <Row>
+    <Card style={boxStyle}>
+      <CardBody>
+      <Row>
           <Col xs="12">
             <Button
               style={buttonStyle}
@@ -32,7 +31,7 @@ const box = props => {
               color="success"
               onClick={props.startButton}
               disabled={props.isStarted || props.seconds===0}>
-              START
+              Start
             </Button>
           </Col>
         </Row>
@@ -44,7 +43,7 @@ const box = props => {
               size="lg"
               onClick={props.stopButton}
               disabled={!props.isStarted}>
-              STOP
+              Stop
              </Button>
           </Col>
           <Col xs="6">
@@ -54,11 +53,12 @@ const box = props => {
                 size="lg"
                 onClick={props.resetButton}
                 disabled={props.isStarted}>
-                RESET
+                Reset
                 </Button>
             </Col>
         </Row>
-      </div>
+      </CardBody>
+    </Card>
   );
 }
 

src/components/Footer.js

@@ -2,17 +2,14 @@ import React from 'react';
 
 const footer = () => {
   const style = {
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    marginTop: '8px',
-    color: '#ffffff',
-    textShadow: '0 2px 3px #a3a3a3'
+    marginTop: '2px'
   };
 
   return (
     <div style={style}>
       <p>
-        <a href="https://github.com/frsposito/tomadoro">tomadoro</a>{` `}
-        by <a href="https://github.com/frsposito">Francesco Esposito</a>
+        <a href="https://github.com/franjsco/tomadoro">tomadoro</a>{` `}
+        by <a href="https://github.com/franjsco">Francesco Esposito</a>
       </p>
     </div>
   );

src/components/Headbar.js

@@ -3,15 +3,15 @@ import React from 'react';
 const headbar = () => {
   const style = {
     display: 'flex',
-    minHeight: '5vh',
+    minHeight: '4vh',
     flexDirection: 'column',
     textAlign: 'left',
     alignItems: 'center',
     justifyContent: 'center',
     fontSize: '44px',
     color: 'white',  
-    textShadow:  '0 2px 4px #909090', 
-    marginBottom: '6px'
+    textShadow:  '0 2px 2px #1f1f1f', 
+    marginBottom: '2px'
   };
 
   return (

src/components/Logo.css

@@ -1,6 +1,6 @@
 .App-logo {
-    height: 160px;
-    filter: drop-shadow(0 0 0.28rem #e7d8786b);
+    height: 140px;
+    filter: drop-shadow(0 0 0.58rem #1f1f1f);
     align-items: center;
     justify-content: center;
     text-align: center;

src/components/Logo.js

@@ -15,7 +15,7 @@ const logo = props => {
         title="Click on the tomato to change modes"
         onClick={props.click} 
       ></img>
-  )
+  );
 }
 
 logo.propTypes = {

src/components/Timer.js

@@ -5,10 +5,9 @@ import { formatMinute } from '../utils';
 
 const timer = props => {
   const style = {
-    fontSize: "110px",
+    fontSize: "120px",
     fontWeight: "normal",
-    color: "white",
-    textShadow: "0 2px 3px #8a8888"
+    textShadow: "0 2px 2px #1f1f1f"
   };
 
   return (

src/containers/App.css

@@ -1,9 +1,11 @@
 @import url('https://fonts.googleapis.com/css?family=Fredoka+One');
 
 body {
-  background-color: #2e2929;
+  background-image: url('../assets/bg.jpg');
+  background-position: 'center';
+  background-size: cover;
+  background-color: #2e2e2e;
   text-align: center;
-  color: #131313;
   user-select: none;
   font-family: 'Fredoka One', cursive;
   color: white;
@@ -14,9 +16,9 @@ body {
 }
 
 a {
-  color: #f1fb61;
+  color: #d45a45;
 }
 
 a:hover {
-  color: #fddec0;
+  color: #f6f6f3;
 }