Make 'New Message' view match new title bar style

Make text blue and light weight. Update back button colors to match.

stylesheets/_index.scss

@@ -26,15 +26,15 @@ input.new-message {
     float: left;
     width: 36px;
     height: 36px;
-    background: $blue url('/images/back.png') no-repeat center center;
+    background: $header-color url('/images/back.png') no-repeat center center;
   }
 
   span {
     display: inline-block;
     height: 36px;
     line-height: 36px;
-    font-size: 18px;
-    color: white;
+    font-family: $roboto-light;
+    color: $blue;
     text-indent: -36px;
   }
 }

stylesheets/_variables.scss

@@ -5,11 +5,16 @@ $grey_l: #f3f3f3;
 $grey: #616161;
 $grey_d: #454545;
 
+@font-face {
+  font-family: 'Roboto-Light';
+  src: url('/fonts/Roboto-Light.ttf') format('truetype');
+}
 @font-face {
   font-family: 'Roboto';
   src: url('/fonts/Roboto-Regular.ttf') format('truetype');
 }
 $roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+$roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
 $header-height: 36px;
 $header-color: #f2f2f2;

stylesheets/manifest.css

@@ -1,4 +1,7 @@
 @charset "UTF-8";
+@font-face {
+  font-family: 'Roboto-Light';
+  src: url("/fonts/Roboto-Light.ttf") format("truetype"); }
 @font-face {
   font-family: 'Roboto';
   src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
@@ -67,13 +70,13 @@ input.new-message {
     float: left;
     width: 36px;
     height: 36px;
-    background: #2a92e7 url("/images/back.png") no-repeat center center; }
+    background: #f2f2f2 url("/images/back.png") no-repeat center center; }
   .back span {
     display: inline-block;
     height: 36px;
     line-height: 36px;
-    font-size: 18px;
-    color: white;
+    font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif;
+    color: #2a92e7;
     text-indent: -36px; }
 
 .new-conversation .new-group-update-form {