[Chore] Beautified the appearances

samkahchiin · Apr 10, 2020 · 104ef53 · 104ef53
1 parent a0d8390
commit 104ef53
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 48 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Poppins:wght@900&display=swap" rel="stylesheet">
+    <title>Pomodoro Clock</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,13 @@
 .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
   }
 }
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/components/Display/Display.js b/src/components/Display/Display.js
@@ -4,8 +4,8 @@ import classes from './Display.module.css'
 const display = (props) => {
   return (
     <div className={classes.Display}>
-      <h2 id="timer-label">{props.type}</h2>
-      <h1 id="time-left">{props.duration}</h1>
+      <p id="timer-label" className={classes.TimeLabel}>{props.type}</p>
+      <p id="time-left" className={classes.TimeLeft}>{props.duration}</p>
     </div>
   )
 }

diff --git a/src/components/Display/Display.module.css b/src/components/Display/Display.module.css
@@ -1,7 +1,23 @@
 .Display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #649568;
+  flex-direction: column;
+  border-radius: 40px;
+  margin: 20px;
+  padding: 10px;
+}
+
+.Display p {
+  text-transform: uppercase;
+  margin: 3px;
+}
 
+.TimeLabel {
+  font-size: 40px;
 }
 
-.Display h2 {
-  text-transform: capitalize;
+.TimeLeft {
+  font-size: 70px;
 }
diff --git a/src/components/TimeControl/TimeControl.module.css b/src/components/TimeControl/TimeControl.module.css
@@ -1,4 +1,8 @@
 .TimeControl {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0px 30px;
 }
 
 .TimeControl h1 {

diff --git a/src/containers/ControlPanel/ControlPanel.js b/src/containers/ControlPanel/ControlPanel.js
@@ -3,6 +3,7 @@ import BreakControl from '../../components/TimeControl/BreakControl/BreakControl
 import SessionControl from '../../components/TimeControl/SessionControl/SessionControl';
 import Display from '../../components/Display/Display';
 import MediaControl from '../../components/MediaControl/MediaControl';
+import classes from './ControlPanel.module.css'
 
 const BREAK = 'break';
 const SESSION = 'session';
@@ -23,15 +24,19 @@ class ControlPanel extends Component {
 
   increaseSessionHandler = () => {
     if (this.state.sessionMins >= 60) { return };
+    let newMins = this.state.sessionMins + 1;
     this.setState({
-      sessionMins: this.state.sessionMins + 1
+      sessionMins: newMins,
+      displayTime: `${newMins}:00`
     });
   }
 
   decreaseSessionHandler = () => {
     if (this.state.sessionMins <= 1) { return };
+    let newMins = this.state.sessionMins - 1;
     this.setState({
-      sessionMins: this.state.sessionMins - 1
+      sessionMins: newMins,
+      displayTime: `${newMins}:00`
     });
   }
 
@@ -67,7 +72,7 @@ class ControlPanel extends Component {
   }
 
   startTimerHandler = () => {
-    let timer = this.state.duration;
+    let timer = this.state.sessionMins * 60;
     let self = this;
     this.setState({
       isOn: true
@@ -111,16 +116,19 @@ class ControlPanel extends Component {
   render() {
     return(
       <div>
-        <BreakControl
-          duration={this.state.breakMins}
-          increase={this.increaseBreakHandler}
-          decrease={this.decreaseBreakHandler}
-        />
-        <SessionControl
-          duration={this.state.sessionMins}
-          increase={this.increaseSessionHandler}
-          decrease={this.decreaseSessionHandler}
-        />
+        <h1>POMODORO CLOCK</h1>
+        <div className={classes.TimeControlPanel}>
+          <BreakControl
+            duration={this.state.breakMins}
+            increase={this.increaseBreakHandler}
+            decrease={this.decreaseBreakHandler}
+          />
+          <SessionControl
+            duration={this.state.sessionMins}
+            increase={this.increaseSessionHandler}
+            decrease={this.decreaseSessionHandler}
+          />
+        </div>
         <Display
           type={this.state.type}
           duration={this.state.displayTime}/>

diff --git a/src/containers/ControlPanel/ControlPanel.module.css b/src/containers/ControlPanel/ControlPanel.module.css
@@ -0,0 +1,4 @@
+.TimeControlPanel {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;