qw/timer (#23)

* Rename logo and add 32x32 version

* Set timer icon if a timer is running

* Do not query activities on initialization

* Show timer in bubble if timed activity exists

* Pass timed activity to App

* Code cleanup

* Show timer view and stop timer

* Make hours optional

* Use booked seconds instead of hours

* Add type submit to form button

* Define colors as sass variables⎄

* Style timer view

* Show start timer submit label

* Update view layouts and content

* Update version and changelog

* Dyanically set iframe height

* Reduce h1 font size

* Add svg webpack loader

* Parse empty string (TimeInputParser)

* Forward ref in Popup component

* Start time on current day only, format buttons

* Improve styling

* Set standard height as iframe default height, validate form

* Upgrade packages to supress react warning

* Show activity form in popup after timer was stoped

* Use stop-watch icon in timer view

* Fix empty description

* Close TimerView if timer stopped for current service

* Style timerview

* Improve timer view styling

* qw/setting-time-tracking-hh-mm (#24)

* Format duration depending on settingTimeTrackingHHMM

* Fix formatDuation without second argument

* Fix time format after updating bubble

* Add tests for formatDuration

src/js/components/App/TimerView.js

@@ -0,0 +1,45 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Timer from "components/shared/Timer"
+import { parseISO } from "date-fns"
+import StopWatch from "components/shared/StopWatch"
+
+export default function TimerView({ timedActivity, onStopTimer }) {
+  const handleStopTimer = () => {
+    onStopTimer(timedActivity)
+  }
+
+  return (
+    <div className="moco-bx-timer-view">
+      <p>
+        <span className="moco-bx-single-line text-secondary">{timedActivity.customer_name}</span>
+        <br />
+        <span className="moco-bx-single-line">{timedActivity.assignment_name}</span>
+        <br />
+        <span className="moco-bx-single-line">{timedActivity.task_name}</span>
+      </p>
+      <h2>{timedActivity.description}</h2>
+      <Timer
+        className="timer text-red"
+        startedAt={parseISO(timedActivity.timer_started_at)}
+        offset={timedActivity.seconds}
+        style={{ fontSize: "36px", display: "inline-block" }}
+      />
+      <button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
+        <StopWatch />
+      </button>
+    </div>
+  )
+}
+
+TimerView.propTypes = {
+  timedActivity: PropTypes.shape({
+    customer_name: PropTypes.string.isRequired,
+    assignment_name: PropTypes.string.isRequired,
+    task_name: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    timer_started_at: PropTypes.string.isRequired,
+    seconds: PropTypes.number.isRequired,
+  }).isRequired,
+  onStopTimer: PropTypes.func.isRequired,
+}