Style timerview

src/css/_variables.scss

@@ -1,4 +1,4 @@
-$font-family: Arial, sans-serif;
+$font-family: Roboto, Arial, sans-serif;
 $font-color: #191919;
 $popup-width: 420px;
 $popup-height: 463px;

src/css/popup.scss

@@ -17,11 +17,18 @@ html {
       h1 {
         font-size: 24px;
         font-weight: normal;
-        line-height: 1.2;
+        line-height: 1.5;
         margin-top: 1rem;
         margin-bottom: 3rem;
       }
 
+      h2 {
+        font-size: 20px;
+        font-weight: normal;
+        line-height: 1.5;
+        margin-top: 1rem;
+      }
+
       .text-red {
         color: $red;
       }
@@ -100,21 +107,24 @@ html {
           text-align: center;
           margin-top: 3rem;
 
-          h1 {
-            margin: 0.75rem;
-            line-height: 1.2;
+          h2 {
+            max-height: 90px;
+            overflow: hidden;
           }
 
           p {
-            margin-top: 0.75rem;
+            margin-top: 0;
+            margin-bottom: 1rem;
+            max-height: 16px;
+            overflow: hidden;
           }
 
           .timer {
-            margin-top: 2.5rem;
+            margin-top: 2rem;
           }
 
           .btn-stop-timer {
-            margin-top: 3rem;
+            margin-top: 1.5rem;
             background-color: $red;
             border: none;
             border-radius: 50%;

src/js/components/App/TimerView.js

@@ -11,14 +11,17 @@ export default function TimerView({ timedActivity, onStopTimer }) {
 
   return (
     <div className="moco-bx-timer-view">
-      <h1>{timedActivity.assignment_name}</h1>
-      <h1>{timedActivity.task_name}</h1>
-      <p className="text-secondary">{timedActivity.customer_name}</p>
+      <p className="text-secondary" style={{ marginBottom: "0.5rem" }}>
+        {timedActivity.customer_name}
+      </p>
+      <p>{timedActivity.assignment_name}</p>
+      <p>{timedActivity.task_name}</p>
+      <h2>{timedActivity.description}</h2>
       <Timer
         className="timer text-red"
         startedAt={parseISO(timedActivity.timer_started_at)}
         offset={timedActivity.seconds}
-        style={{ fontSize: "48px", display: "inline-block" }}
+        style={{ fontSize: "36px", display: "inline-block" }}
       />
       <button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
         <StopWatch />
@@ -32,6 +35,7 @@ TimerView.propTypes = {
     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,