From 6a7f40b29a4e40ef88ebb29754528e130ba04f0e Mon Sep 17 00:00:00 2001
From: manubo <manuel@bouza.ch>
Date: Thu, 26 Sep 2019 16:32:01 +0200
Subject: [PATCH] Style timer view

---
 src/css/_variables.scss            |  1 +
 src/css/popup.scss                 | 29 ++++++++++++++++++++++++++++-
 src/js/components/App/TimerView.js | 16 ++++++++--------
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index 5584b29..ecda9eb 100644
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@@ -7,3 +7,4 @@ $green: #7dc332;
 $green-dark: #639a28;
 $blue: #38b5eb;
 $red: #fb3a2f;
+$gray-base: #a3a3a3;
diff --git a/src/css/popup.scss b/src/css/popup.scss
index 9bab894..0b653be 100644
--- a/src/css/popup.scss
+++ b/src/css/popup.scss
@@ -94,10 +94,37 @@ html {
 
         .moco-bx-timer-view {
           text-align: center;
-          margin-top: 4rem;
+          margin-top: 3rem;
+
+          h1 {
+            font-weight: normal;
+            line-height: 1.2;
+            margin: 0;
+          }
+
+          p {
+            margin-top: 0.6rem;
+          }
+
+          .text-secondary {
+            color: $gray-base;
+          }
+
+          .timer {
+            margin-top: 2.5rem;
+          }
 
           .btn-stop-timer {
             margin-top: 3rem;
+            background-color: $red;
+            border: none;
+            border-radius: 50%;
+            width: 80px;
+            height: 80px;
+
+            &:focus {
+              outline: none;
+            }
           }
         }
       }
diff --git a/src/js/components/App/TimerView.js b/src/js/components/App/TimerView.js
index 810a083..d22a4e2 100644
--- a/src/js/components/App/TimerView.js
+++ b/src/js/components/App/TimerView.js
@@ -10,20 +10,20 @@ export default function TimerView({ timedActivity, onStopTimer }) {
 
   return (
     <div className="moco-bx-timer-view">
-      <h3>
-        {timedActivity.customer_name}:<br />
+      <h1>
         {timedActivity.assignment_name}
-      </h3>
-      <h3>{timedActivity.task_name}</h3>
-      <br />
+        <br />
+        {timedActivity.task_name}
+      </h1>
+      <p className="text-secondary">{timedActivity.customer_name}</p>
       <Timer
-        className="text-red"
+        className="timer text-red"
         startedAt={parseISO(timedActivity.timer_started_at)}
         offset={timedActivity.seconds}
-        style={{ fontSize: "60px", display: "inline-block" }}
+        style={{ fontSize: "48px", display: "inline-block" }}
       />
       <button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
-        Timer Stoppen
+        Stopp
       </button>
     </div>
   )