Improve button and label styling (#16)

Author: flextremedev

src/components/Button/Button.module.css

@@ -5,19 +5,31 @@
   outline: none;
   color: #ffffff;
   background: rgba(209, 0, 166, 0.7);
+
   border: 4px solid white;
   font-size: 18px;
   font-family: 'Lato', sans-serif;
   font-weight: 700;
   text-transform: uppercase;
+  letter-spacing: 0.0625rem;
   transition: background, box-shadow 0.1s ease;
   box-shadow: 0px 12px 15px rgba(0, 0, 0, 0.3), 0px 5px 8px rgba(0, 0, 0, 0.2);
 }
 .btn:focus {
   box-shadow: 0px 18px 20px rgba(0, 0, 0, 0.3), 0px 5px 8px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(
+    45deg,
+    rgba(209, 0, 166, 0.7) 0%,
+    rgba(255, 0, 96, 0.8) 100%
+  );
 }
 .btn:hover {
   box-shadow: 0px 18px 20px rgba(0, 0, 0, 0.3), 0px 5px 8px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(
+    45deg,
+    rgba(209, 0, 166, 0.7) 0%,
+    rgba(255, 0, 96, 0.8) 100%
+  );
 }
 .btn:active {
   box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3), 0px 2px 8px rgba(0, 0, 0, 0.2);

src/components/DurationInput/DurationInput.module.css

@@ -20,6 +20,7 @@
   font-family: 'Lato', sans-serif;
   font-weight: 700;
   text-align: center;
+  letter-spacing: 0.0625rem;
 }
 .textInput {
   border: none;

src/components/Input/Input.module.css

@@ -30,6 +30,7 @@ input[type='number'] {
   font-size: 12px;
   font-family: 'Lato', sans-serif;
   font-weight: 700;
+  letter-spacing: 0.0625rem;
 }
 
 @media only screen and (orientation: landscape) {