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/Errors/InvalidConfigurationError.js

@@ -3,25 +3,23 @@ import settingsUrl from "images/settings.png"
 
 const InvalidConfigurationError = () => (
   <div className="moco-bx-error-container">
-    <h1>Bitte Einstellungen aktualisieren</h1>
-    <ol>
-      <li>Internetadresse eintragen</li>
-      <li>Persönlichen API-Schlüssel eintragen</li>
-    </ol>
+    <h1>MOCO verbinden</h1>
+    <p>
+      Dazu trägst Du in den Einstellungen Deine Account-Internetadresse und Deinen API-Schlüssel
+      ein.
+    </p>
+    <img
+      src={chrome.extension.getURL(settingsUrl)}
+      alt="Browser extension configuration settings"
+      style={{ cursor: "pointer", width: "185px", height: "195px" }}
+      onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
+    />
     <button
       className="moco-bx-btn"
       onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
     >
-      Einstellungen öffnen
+      Weiter zu den Einstellungen
     </button>
-    <br />
-    <br />
-    <img
-      src={chrome.extension.getURL(settingsUrl)}
-      alt="Browser extension configuration settings"
-      style={{ cursor: "pointer" }}
-      onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
-    />
   </div>
 )
 

src/js/components/Errors/UnknownError.js

@@ -1,14 +1,17 @@
 import React from "react"
 import PropTypes from "prop-types"
-import logo from "images/logo.png"
+import logo from "images/moco-159x159.png"
 
 const UnknownError = ({ message = "Unbekannter Fehler" }) => (
   <div className="moco-bx-error-container">
-    <img className="moco-bx-logo" src={logo} alt="MOCO logo" />
+    <img
+      className="moco-bx-logo"
+      src={logo}
+      style={{ width: "48px", height: "48px" }}
+      alt="MOCO logo"
+    />
     <h1>Ups, es ist ein Fehler passiert!</h1>
     <p>Bitte überprüfe deine Internetverbindung.</p>
-    <p>Wir wurden per Email benachrichtigt und untersuchen den Vorfall.</p>
-    <br />
     <p>Fehlermeldung:</p>
     <pre>{message}</pre>
   </div>

src/js/components/Errors/UpgradeRequiredError.js

@@ -1,12 +1,17 @@
 import React from "react"
 import { isChrome } from "utils/browser"
-import logo from "images/logo.png"
+import logo from "images/moco-159x159.png"
 import firefoxAddons from "images/firefox_addons.png"
 
 const UpgradeRequiredError = () => (
   <div className="moco-bx-error-container">
-    <img className="moco-bx-logo" src={logo} alt="MOCO logo" />
-    <h1>Upgrade erforderlich</h1>
+    <img
+      className="moco-bx-logo"
+      src={logo}
+      style={{ width: "48px", height: "48px" }}
+      alt="MOCO logo"
+    />
+    <h1>Bitte aktualisieren</h1>
     <p>Die installierte MOCO Browser-Erweiterung ist veraltet &mdash; bitte aktualisieren.</p>
     {isChrome() ? (
       <button
@@ -17,9 +22,13 @@ const UpgradeRequiredError = () => (
       </button>
     ) : (
       <>
-        <br />
         <p>Unter folgender URL:</p>
-        <img className="firefox-addons" src={firefoxAddons} alt="about:addons" />
+        <img
+          className="firefox-addons"
+          src={firefoxAddons}
+          style={{ width: "292px", height: "40px" }}
+          alt="about:addons"
+        />
       </>
     )}
   </div>