better highlight add task on planning view

app/scripts/daily-planner/_daily-planner-d.scss

@@ -7,4 +7,19 @@ daily-planner {
       display: none;
     }
   }
+
+  .add-task-form {
+    margin: 20px auto;
+    max-width: $component-max-width;
+    md-autocomplete-wrap {
+      box-shadow: none;
+    }
+    ng-md-icon {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  .highlight-add-task-icon {
+    margin-right: 10px;
+  }
 }

app/scripts/daily-planner/daily-planner-d.html

@@ -3,12 +3,18 @@
     <ng-md-icon icon="border_color"></ng-md-icon>
     Plan your day!
   </h2>
-  <p>If you're done, you should spent some time
-    <strong>prioritizing</strong> your tasks, by ordering them via drag and drop. You can also make a rough time estimation.
-  </p>
 
-  <form ng-submit="vm.addTask()">
+  <form ng-submit="vm.addTask()"
+        layout="row"
+        class="add-task-form">
+    <ng-md-icon icon="playlist_add"
+                size="32"
+                class="highlight-add-task-icon"></ng-md-icon>
+
     <md-autocomplete
+      md-whiteframe="2"
+      flex="100"
+      tabindex="1"
       md-selected-item="vm.newTask"
       md-search-text="vm.newTaskTitle"
       md-items="task in vm.getFilteredTaskSuggestions(vm.newTaskTitle)"

app/styles/_variables.scss

@@ -5,6 +5,9 @@ $dark-green: #30412d;
 $green: #4fa758;
 $light-green: #a9ed9f;
 $red: #e15d63;
+$c-accent: rgb(197,17,98);
+
+$component-max-width: 900px;
 
 //$layout-xs: 600px;
 $layout-gt-xs: 600px;