Style timer view

src/css/_variables.scss

@@ -7,3 +7,4 @@ $green: #7dc332;
 $green-dark: #639a28;
 $blue: #38b5eb;
 $red: #fb3a2f;
+$gray-base: #a3a3a3;

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;
+            }
           }
         }
       }

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 />
+        {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>
   )