Polish

Features are finished now. If you want to make them more "smooth", try the following css transitions.

Button Transitions

Changes in App.js:

@@ -173,7 +173,7 @@ function App() {
           <button
             className={`control-btn ${
               phase === PHASE_BREAK ? "secondary-control-btn" : ""
-            }`}
+            } ${ticking ? "pushed" : ""}`}
             onClick={toggleTimer}
           >
             {ticking ? "Pause" : seconds === 0 ? "Next" : "Start"}

Changes in App.css:

@@ -2,15 +2,20 @@
   --primary-color: #f28585;
   --secondary-color: #ffa447;
   --button-bg: coral;
+  --duration: 0.8s;
+  --btn-border-width: 5px;
+  --pushed-btn-border-width: 2px;
 }
 
@@ -69,16 +74,23 @@ body {
 }
 
 .control-btn {
+  font-family: monospace, Courier, "Courier New";
   padding: 6px 25px;
   font-size: 36px;
   background-color: white;
   border: none;
-  border-bottom: solid 5px lightcoral;
+  border-bottom: solid var(--btn-border-width) lightcoral;
   border-radius: 0.5rem;
   cursor: pointer;
   color: var(--primary-color);
 }
 
+.pushed {
+  margin-top: calc(var(--btn-border-width) - var(--pushed-btn-border-width));
+  border-width: var(--pushed-btn-border-width);
+  transition: border-width 0.1s ease-out;
+}
+
 .skip-btn {
   font-size: small;
   cursor: pointer;

Background Color Transitions

Changes in App.css:

 body {
   background-color: var(--primary-color);
   font-family: Geneva, Verdana, Tahoma, sans-serif;
+  transition: background-color var(--duration) ease;
 }
 
 .secondary-bg {
   background-color: var(--secondary-color);
+  transition: background-color var(--duration) ease;
 }

Congratulations🎉! You've made a nice pomodoro web app in React now.

Complete code: https://github.com/Literank/lr_pomodoro

Keep Going! Keep Learning!