Compose flow style tweaks

js/views/new_group_update_view.js

@@ -28,9 +28,7 @@
                 window: options.window
             });
 
-            this.recipients_view = new Whisper.RecipientsInputView({
+            this.recipients_view = new Whisper.RecipientsInputView();
-                placeholder: "Add member"
-            });
             this.listenTo(this.recipients_view.typeahead, 'sync', function() {
                 this.model.contactCollection.models.forEach(function(model) {
                     if (this.recipients_view.typeahead.get(model)) {

js/views/recipients_input_view.js

@@ -97,7 +97,7 @@
         },
 
         render_attributes: function() {
-            return { placeholder: this.placeholder || "Name or phone number" };
+            return { placeholder: this.placeholder || "name or phone number" };
         },
 
         events: {

stylesheets/_global.scss

@@ -76,7 +76,7 @@ button { cursor: pointer; }
 
 button.back {
   float: left;
-  background: $header-color url('/images/back.png') no-repeat center center;
+  background: url('/images/back.png') no-repeat center center;
 
   & + .title-text {
     text-indent: -$header-height;
@@ -252,10 +252,6 @@ $avatar-size: 44px;
     .last-message, .last-timestamp {
       display: none;
     }
-    &:hover {
-      background: white;
-      cursor: auto;
-    }
   }
 }
 
@@ -271,6 +267,7 @@ $avatar-size: 44px;
   white-space: nowrap;
   overflow: hidden;
   box-shadow: 0 0px 1px rgba(#aaa, 0.8);
+  background: $grey_l;
 
   &:hover {
     background: #f8f8f8;
@@ -363,6 +360,13 @@ $avatar-size: 44px;
   }
 
 }
+.new-conversation .recipients-input .recipients::before {
+  content: 'To: ';
+}
+.new-group-update-form .recipients-input .recipients::before {
+  content: 'Add: ';
+}
+
 
 // avatar colors
 .avatar.colorgray { background-color: #999999 }

stylesheets/_index.scss

@@ -20,6 +20,7 @@
 .gutter {
   float: left;
   width: 300px;
+  border-right: solid 1px #ddd;
   .conversations {
     width: 100%;
   }

stylesheets/manifest.css

@@ -78,7 +78,7 @@ button {
 
 button.back {
   float: left;
-  background: #2090ea url("/images/back.png") no-repeat center center; }
+  background: url("/images/back.png") no-repeat center center; }
   button.back + .title-text {
     text-indent: -36px; }
 
@@ -212,10 +212,6 @@ img.emoji {
   .new-group-update-form .members .contact .last-message,
   .new-group-update-form .members .contact .last-timestamp {
     display: none; }
-  .group-member-list .members .contact:hover,
-  .new-group-update-form .members .contact:hover {
-    background: white;
-    cursor: auto; }
 
 .conversation-header .check {
   float: right;
@@ -227,7 +223,8 @@ img.emoji {
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
-  box-shadow: 0 0px 1px rgba(170, 170, 170, 0.8); }
+  box-shadow: 0 0px 1px rgba(170, 170, 170, 0.8);
+  background: #f3f3f3; }
   .contact:hover {
     background: #f8f8f8; }
   .contact.selected {
@@ -282,6 +279,12 @@ img.emoji {
   .attachment-preview img {
     width: 100%; }
 
+.new-conversation .recipients-input .recipients::before {
+  content: 'To: '; }
+
+.new-group-update-form .recipients-input .recipients::before {
+  content: 'Add: '; }
+
 .avatar.colorgray {
   background-color: #999999; }
 
@@ -359,7 +362,8 @@ img.emoji {
 
 .gutter {
   float: left;
-  width: 300px; }
+  width: 300px;
+  border-right: solid 1px #ddd; }
   .gutter .conversations {
     width: 100%; }