Start time on current day only, format buttons

src/css/popup.scss

@@ -49,7 +49,7 @@ html {
         .moco-bx-calendar {
           display: flex;
           justify-content: space-between;
-          margin-bottom: 3rem;
+          margin-bottom: 2rem;
 
           .moco-bx-calendar__day {
             display: flex;

src/images/icons/stopwatch-light.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="stopwatch" class="svg-inline--fa fa-stopwatch fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M393.3 141.3l17.5-17.5c4.7-4.7 4.7-12.3 0-17l-5.7-5.7c-4.7-4.7-12.3-4.7-17 0l-17.5 17.5c-35.8-31-81.5-50.9-131.7-54.2V32h25c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12h-80c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h23v32.6C91.2 73.3 0 170 0 288c0 123.7 100.3 224 224 224s224-100.3 224-224c0-56.1-20.6-107.4-54.7-146.7zM224 480c-106.1 0-192-85.9-192-192S117.9 96 224 96s192 85.9 192 192-85.9 192-192 192zm4-128h-8c-6.6 0-12-5.4-12-12V172c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v168c0 6.6-5.4 12-12 12z"></path></svg>

src/js/components/App.js

@@ -100,7 +100,7 @@ class App extends Component {
       task_id: this.task?.value,
       billable: this.billable,
       hours: "",
-      seconds: this.changeset.hours && new TimeInputParser(this.changeset.hours).parseSeconds(),
+      seconds: new TimeInputParser(this.changeset.hours).parseSeconds(),
       description: service?.description,
       tag: "",
     }
@@ -110,8 +110,6 @@ class App extends Component {
 
   componentDidMount() {
     window.addEventListener("keydown", this.handleKeyDown)
-    console.log(window.document.body.scrollHeight)
-    console.log(window.document.body)
     parent.postMessage(window.document.body.scrollHeight, "*")
     chrome.runtime.onMessage.addListener(this.handleSetFormErrors)
   }

src/js/components/Form.js

@@ -2,11 +2,16 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import Select from "components/Select"
 import TimeInputParser from "utils/TimeInputParser"
+import { formatDate } from "utils"
 import cn from "classnames"
+import stopWatch from "images/icons/stopwatch-light.svg"
 
-function parseHours(hours) {
+const StopWatch = () => (
-  return new TimeInputParser(hours).parseSeconds()
+  <i
-}
+    dangerouslySetInnerHTML={{ __html: stopWatch }}
+    style={{ width: "24px", color: "white", display: "inline-block" }}
+  />
+)
 
 class Form extends Component {
   static propTypes = {
@@ -32,11 +37,42 @@ class Form extends Component {
     inline: true,
   }
 
-  isValid = () => {
+  isValid() {
     const { changeset } = this.props
     return ["assignment_id", "task_id"].map(prop => changeset[prop]).every(Boolean)
   }
 
+  get isTimerStartable() {
+    const {
+      changeset: { hours, date },
+    } = this.props
+    const duration = new TimeInputParser(hours).parseSeconds()
+    return date === formatDate(new Date()) && duration === 0
+  }
+
+  buttonStyle() {
+    const styleMap = {
+      true: {
+        backgroundColor: "#a3a3a3",
+        border: "none",
+        borderRadius: "50%",
+        width: "60px",
+        height: "60px",
+        marginTop: "22px",
+        transition: "all 0.2s ease-in-out",
+      },
+      false: {
+        border: "none",
+        width: "50px",
+        height: "36px",
+        marginTop: "35px",
+        transition: "all 0.2s ease-in-out",
+      },
+    }
+
+    return styleMap[this.isTimerStartable]
+  }
+
   handleTextareaKeyDown = event => {
     const { onSubmit } = this.props
 
@@ -108,8 +144,13 @@ class Form extends Component {
           ) : null}
         </div>
 
-        <button type="submit" className="moco-bx-btn" disabled={!this.isValid()}>
+        <button
-          {parseHours(changeset.hours) > 0 ? "OK" : "Timer starten"}
+          type="submit"
+          className="moco-bx-btn"
+          disabled={!this.isValid()}
+          style={this.buttonStyle()}
+        >
+          {this.isTimerStartable ? <StopWatch /> : "OK"}
         </button>
       </form>
     )