improvements: restyling design

README.md

@@ -16,4 +16,6 @@ Try tomadoro: https://franjsco.github.io/tomadoro/
 GPLv3
 
 ---
+Photo by Zoltan Tasi on Unsplash
+
 Made with ❤️ by Francesco Esposito ([@franjsco](https://github.com/franjsco))

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": "^16.13.1",
-    "react-dom": "^16.11.0",
+    "react-dom": "^16.13.1",
-    "react-scripts": "^3.2.0",
+    "react-scripts": "^3.4.1",
     "react-web-notification": "^0.5.0",
     "reactstrap": "^7.1.0"
   },
@@ -41,6 +41,6 @@
   "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',
+    fontSize: '20px',
-    fontWeight: 'lighter',
+    height: '54px',
-    height: '50px',
+    borderRadius: '24px',
-    borderRadius: '30px',
     width: '100%',
     margin: '4px 0px 4px 0px'
   };
 
   const boxStyle = {
-    padding: '6px',
+    padding: '2px',
-    backgroundColor: 'white',
+    borderRadius: '14px',
-    borderRadius: '6px',
+    background: 'rgb(0,0,0, 0.4)'
-    borderBottom: '16px solid #c84132',
-    boxShadow: '0 2px 3px #8a8888'
   };
 
+  
   return (
-    <div style={boxStyle}>
+    <Card style={boxStyle}>
-        <Row>
+      <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,10 +2,7 @@ import React from 'react';
 
 const footer = () => {
   const style = {
-    fontFamily: 'Arial, Helvetica, sans-serif',
+    marginTop: '2px'
-    marginTop: '8px',
-    color: '#ffffff',
-    textShadow: '0 2px 3px #a3a3a3'
   };
 
   return (

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', 
+    textShadow:  '0 2px 2px #1f1f1f', 
-    marginBottom: '6px'
+    marginBottom: '2px'
   };
 
   return (

src/components/Logo.css

@@ -1,6 +1,6 @@
 .App-logo {
-    height: 160px;
+    height: 140px;
-    filter: drop-shadow(0 0 0.28rem #e7d8786b);
+    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 2px #1f1f1f"
-    textShadow: "0 2px 3px #8a8888"
   };
 
   return (

src/containers/App.css

@@ -1,9 +1,11 @@
 @import url('https://fonts.googleapis.com/css?family=Fredoka+One');
 
 body {
+  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;
 }