From 342b039dba7775a669e9310171b7548d4cbe05f2 Mon Sep 17 00:00:00 2001
From: Manuel Bouza <manuel@bouza.ch>
Date: Thu, 21 Feb 2019 10:55:27 +0100
Subject: [PATCH] Add title to form and timer hint to hours input field

---
 src/css/_form.scss          |  4 ++--
 src/css/content.scss        |  2 +-
 src/css/popup.scss          | 20 +++++++++++++++++++-
 src/js/components/App.js    | 24 ++++++++++++++++--------
 src/js/components/Bubble.js |  2 +-
 src/js/components/Form.js   |  3 ++-
 6 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/css/_form.scss b/src/css/_form.scss
index e4d4451..4cd5a05 100644
--- a/src/css/_form.scss
+++ b/src/css/_form.scss
@@ -22,8 +22,8 @@ input {
     border-width: 1px;
   }
 
-  text-muted {
-    color: #eee;
+  .text-muted {
+    color: #999;
   }
 
   &.has-error {
diff --git a/src/css/content.scss b/src/css/content.scss
index 3170a19..92cb4ca 100644
--- a/src/css/content.scss
+++ b/src/css/content.scss
@@ -27,7 +27,7 @@
     width: 100%;
     height: 100%;
 
-    img.moco-logo {
+    img.moco-bx-logo {
       width: 30px;
       height: 30px;
     }
diff --git a/src/css/popup.scss b/src/css/popup.scss
index c77ce64..e85df2f 100644
--- a/src/css/popup.scss
+++ b/src/css/popup.scss
@@ -3,12 +3,30 @@
 
 html {
   height: 100%;
-  
+
   body {
     height: 100%;
 
     #moco-bx-root {
       height: 100%;
+
+      .moco-bx-logo__container {
+        display: flex;
+        margin-bottom: 2rem;
+        text-align: center;
+
+        img.moco-bx-logo {
+          flex: 0 0 48px;
+          width: 48px;
+          height: 48px;
+          margin-right: 1rem;
+        }
+
+        h1 {
+          line-height: 48px;
+          margin: 0;
+        }
+      }
     }
   }
 }
diff --git a/src/js/components/App.js b/src/js/components/App.js
index 3179303..78064d2 100644
--- a/src/js/components/App.js
+++ b/src/js/components/App.js
@@ -12,6 +12,7 @@ import {
   currentDate,
   secondsFromHours
 } from "utils"
+import logoUrl from 'images/logo.png'
 import { head } from "lodash"
 
 @observer
@@ -173,14 +174,21 @@ class App extends Component {
     const { service } = this.props;
     
     return (
-      <Form
-        changeset={this.changesetWithDefaults}
-        projects={this.projects}
-        errors={this.formErrors}
-        onChange={this.handleChange}
-        onSubmit={this.handleSubmit}
-        onCancel={this.handleCancel}
-      />
+      <>
+        <div className="moco-bx-logo__container">
+          <img className="moco-bx-logo" src={this.props.browser.extension.getURL(logoUrl)} />
+          <h1>MOCO Zeiterfassung</h1>
+        </div>
+        
+        <Form
+          changeset={this.changesetWithDefaults}
+          projects={this.projects}
+          errors={this.formErrors}
+          onChange={this.handleChange}
+          onSubmit={this.handleSubmit}
+          onCancel={this.handleCancel}
+        />
+      </>
     )
   }
 }
diff --git a/src/js/components/Bubble.js b/src/js/components/Bubble.js
index c14652d..f5fd1d4 100644
--- a/src/js/components/Bubble.js
+++ b/src/js/components/Bubble.js
@@ -141,7 +141,7 @@ class Bubble extends Component {
 
     return (
       <div className="moco-bx-bubble" onClick={this.open}>
-        <img className="moco-logo" src={this.props.browser.extension.getURL(logoUrl)} />
+        <img className="moco-bx-logo" src={this.props.browser.extension.getURL(logoUrl)} />
         {this.bookedHours > 0
           ? <span className="moco-bx-badge">{this.bookedHours}h</span>
           : null
diff --git a/src/js/components/Form.js b/src/js/components/Form.js
index 0567605..57b9c80 100644
--- a/src/js/components/Form.js
+++ b/src/js/components/Form.js
@@ -23,7 +23,7 @@ class Form extends Component {
 
   isValid = () => {
     const { changeset } = this.props
-    return ["assignment_id", "task_id", "hours", "description"]
+    return ["assignment_id", "task_id", "description"]
       .map(prop => changeset[prop])
       .every(Boolean)
   };
@@ -73,6 +73,7 @@ class Form extends Component {
             autoComplete="off"
             autoFocus
           />
+          &nbsp;&nbsp;<span className="text-muted">Leer lassen, um Timer zu starten</span>
           {errors.hours ? (
             <div className="form-error">{errors.hours.join("; ")}</div>
           ) : null}