From 44d420c63030fab8144e3400cedf45dac65d8cc4 Mon Sep 17 00:00:00 2001
From: manubo <manuel@bouza.ch>
Date: Wed, 2 Oct 2019 17:04:46 +0200
Subject: [PATCH] Use stop-watch icon in timer view

---
 src/css/_button.scss                  |  4 ++++
 src/css/popup.scss                    |  8 ++------
 src/js/components/App/TimerView.js    |  3 ++-
 src/js/components/Form.js             |  9 +--------
 src/js/components/shared/StopWatch.js | 11 +++++++++++
 5 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 src/js/components/shared/StopWatch.js

diff --git a/src/css/_button.scss b/src/css/_button.scss
index f2bab7f..b9dc098 100644
--- a/src/css/_button.scss
+++ b/src/css/_button.scss
@@ -15,6 +15,10 @@ button.moco-bx-btn {
   font-size: 100%;
   cursor: pointer;
 
+  &:focus {
+    outline: none;
+  }
+
   &:hover:not(:disabled) {
     background-color: $green-dark;
     border-color: $green-dark;
diff --git a/src/css/popup.scss b/src/css/popup.scss
index 134cbf4..3e9644a 100644
--- a/src/css/popup.scss
+++ b/src/css/popup.scss
@@ -118,12 +118,8 @@ html {
             background-color: $red;
             border: none;
             border-radius: 50%;
-            width: 70px;
-            height: 70px;
-
-            &:focus {
-              outline: none;
-            }
+            width: 60px;
+            height: 60px;
           }
         }
       }
diff --git a/src/js/components/App/TimerView.js b/src/js/components/App/TimerView.js
index 9e0fa50..45aeda8 100644
--- a/src/js/components/App/TimerView.js
+++ b/src/js/components/App/TimerView.js
@@ -2,6 +2,7 @@ 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 = () => {
@@ -20,7 +21,7 @@ export default function TimerView({ timedActivity, onStopTimer }) {
         style={{ fontSize: "48px", display: "inline-block" }}
       />
       <button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
-        Stopp
+        <StopWatch />
       </button>
     </div>
   )
diff --git a/src/js/components/Form.js b/src/js/components/Form.js
index 7a19df1..207af47 100644
--- a/src/js/components/Form.js
+++ b/src/js/components/Form.js
@@ -3,14 +3,7 @@ import PropTypes from "prop-types"
 import Select from "components/Select"
 import { formatDate } from "utils"
 import cn from "classnames"
-import stopWatch from "images/icons/stopwatch-light.svg"
-
-const StopWatch = () => (
-  <i
-    dangerouslySetInnerHTML={{ __html: stopWatch }}
-    style={{ width: "22px", color: "white", display: "inline-block" }}
-  />
-)
+import StopWatch from "components/shared/StopWatch"
 
 class Form extends Component {
   static propTypes = {
diff --git a/src/js/components/shared/StopWatch.js b/src/js/components/shared/StopWatch.js
new file mode 100644
index 0000000..f69db8b
--- /dev/null
+++ b/src/js/components/shared/StopWatch.js
@@ -0,0 +1,11 @@
+import React from "react"
+import stopWatch from "images/icons/stopwatch-light.svg"
+
+export default function StopWatch() {
+  return (
+    <i
+      dangerouslySetInnerHTML={{ __html: stopWatch }}
+      style={{ width: "22px", color: "white", display: "inline-block" }}
+    />
+  )
+}