refactor: changed style

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tomadoro",
   "description": "tomadoro",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "private": true,
   "engines": {
     "npm": "6.4.1",

src/App.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Fredoka+One');
 
 body {
-  background-color: #f04d3b; /* e74c3c */
+  background-color: #2e2929; /* e74c3c f04d3b  272222 */
   user-select: none;
   font-family: 'Fredoka One', cursive;
   color: white;
@@ -21,18 +21,16 @@ body {
 }
 
 .App-header {
-  background-color: #c94233; /*c0392b*/
   display: flex;
   min-height: 5vh;
   flex-direction: column;
+  text-align: 'left';
   align-items: center;
   justify-content: center;
-  font-size: calc(25px + 2vmin);
+  font-size: 44px;
   color: white;  
-  text-shadow: 0 0 1px #2b0f0f, 0 0 2px rgb(193, 194, 190);
-  margin-bottom: 20px;
-  box-shadow: 0 0 2px #cf4242, 0 0 6px #2B2D1F;
-
+  text-shadow:  0 2px 4px #909090; /* 909090 */
+  margin-bottom: 6px;
 }
 
 a {
@@ -45,15 +43,15 @@ a:hover {
 
 .footer {
   font-family: Arial, Helvetica, sans-serif;
-  margin-top: 15px;
+  margin-top: 8px;
   color: #ffffff;
-  text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
+  text-shadow:  0 2px 3px #a3a3a3;
 }
 
 
 .timer {
-  font-size: 100px; 
+  font-size: 110px; 
   font-weight: normal;
-  text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
-  color: white;
+  text-shadow:  0 2px 3px #8a8888; /*0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);  a3a3a3*/
+  color: #ffebeb;
 }

src/App.js

@@ -169,7 +169,7 @@ class App extends Component {
         <div className="footer">
           <p>
             <a href="https://github.com/frsposito/tomadoro">tomadoro</a>{` `}
-            by <a href="https://github.com/frsposito">@frsposito</a> (Francesco Esposito)
+            by <a href="https://github.com/frsposito">Francesco Esposito</a>
           </p>
         </div>
       </div>

src/components/Box.css

@@ -2,25 +2,15 @@
     font-size: 16px;
     font-weight: lighter;
     height: 50px;
-    border-radius: 40px;
+    border-radius: 30px;
     width: 100%;
-    margin: 5px 0px 5px 0px;
-    transition: all .2s ease-in-out;
-    box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
+    margin: 4px 0px 4px 0px;
 }
 
 .box {
-    padding: 10px;
+    padding: 6px;
     background-color: white;
-    border-radius: 10px;
-    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
-}
-
-.button:hover { 
-    transform: scale(1.01); 
-}
-
-.button:focus { 
-    transform: scale(1.01); 
-    box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
+    border-radius: 6px;
+    border-bottom: 20px solid #c84132;
+    box-shadow: 0 2px 3px #8a8888;
 }

src/components/Logo.css

@@ -1,13 +1,13 @@
 .App-logo {
-    height: 130px;
-    filter: drop-shadow(0 0 0.30rem #f8ff9c);
+    height: 160px;
+    filter: drop-shadow(0 0 0.28rem #e7d8786b);
     align-items: center;
     justify-content: center;
     text-align: center;
     transition: all .3s ease-in-out;
 }
 
-.App-logo:hover { transform: scale(1.2); }
+.App-logo:hover { transform: scale(1.1); }
 
 .App-logo-rotation {
     animation: App-logo-spin infinite 5s linear;