Add title to form and timer hint to hours input field

src/css/_form.scss

@@ -22,8 +22,8 @@ input {
     border-width: 1px;
   }
 
-  text-muted {
-    color: #eee;
+  .text-muted {
+    color: #999;
   }
 
   &.has-error {

src/css/content.scss

@@ -27,7 +27,7 @@
     width: 100%;
     height: 100%;
 
-    img.moco-logo {
+    img.moco-bx-logo {
       width: 30px;
       height: 30px;
     }

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

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

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

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}