Merge branch 'redesign'

clientapp/templates.js

@@ -131,7 +131,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><div><h3>Current status<span contenteditable="true" class="status"></span></h3></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
+        buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -2,7 +2,7 @@ section.page.main
 
   div
     h3 Current status
-      span.status(contenteditable="true")
+    .status(contenteditable="true")
 
   div#avatarChanger
     h3 Change Avatar

public/css/app/chat.styl

@@ -109,7 +109,7 @@
         content: 'edited '
 
     &.pending
-      background-color: red
+      color: lighten($baseText, 50%)
 
     .body
       display: inline

public/css/app/forms.styl

@@ -27,7 +27,8 @@ input[type=text]:focus,
 input[type=email]:focus, 
 input[type=search]:focus,
 input[type=password]:focus,
-textarea:focus
+textarea:focus,
+.main .status:focus
   outline: none
   border: 1px solid lighten($activeBlue, 50%)
 

public/css/app/roster.styl

@@ -66,7 +66,7 @@
     &:hover
       background: $sidebarActive
 
-      &.hasUnread .unread
+      .unread:not(:empty)
         display: block
 
     &.online, &.chat, &.dnd, &.away, &.xa
@@ -146,12 +146,13 @@
     .status
       color: $textSecondary
       font-size: 10px
+      font-weight: 400
       line-height: 12px
       margin: 0
-      margin-left: 30px
+      margin-left: 40px
 
       &:not(:empty)
-        margin-top: -2px
+        margin-top: -8px
 
     .unread
       display: none

public/css/app/settings.styl

@@ -1,14 +1,20 @@
 @import '../_variables'
 @import '../_mixins'
 
-.main div
+.main > div
   padding: 20px
   border-bottom: 1px solid $grayOutline
 
   &:last-of-type
     border: none
 
+  .status
+    padding: 5px
+    background: $grayBackground
+    roundall(3px)
+
 .uploadRegion
+  padding: 15px
   font-size: $fontSmall
   roundall(3px)
   margin: 10px 0

public/css/otalk.css

@@ -384,8 +384,8 @@ h3 {
 #bookmarks li:hover {
   background: #1f2d49;
 }
-#roster li:hover.hasUnread .unread,
-#bookmarks li:hover.hasUnread .unread {
+#roster li:hover .unread:not(:empty),
+#bookmarks li:hover .unread:not(:empty) {
   display: block;
 }
 #roster li.online:after,
@@ -503,13 +503,14 @@ h3 {
 #bookmarks li .status {
   color: #b7b7b7;
   font-size: 10px;
+  font-weight: 400;
   line-height: 12px;
   margin: 0;
-  margin-left: 30px;
+  margin-left: 40px;
 }
 #roster li .status:not(:empty),
 #bookmarks li .status:not(:empty) {
-  margin-top: -2px;
+  margin-top: -8px;
 }
 #roster li .unread,
 #bookmarks li .unread {
@@ -727,7 +728,7 @@ h3 {
   content: 'edited ';
 }
 .messages .message.pending {
-  background-color: #f00;
+  color: #ababab;
 }
 .messages .message .body {
   display: inline;
@@ -781,14 +782,25 @@ h3 {
   border: 1px solid #efe391;
   color: #d2bd2d;
 }
-.main div {
+.main > div {
   padding: 20px;
   border-bottom: 1px solid #e4e4e4;
 }
-.main div:last-of-type {
+.main > div:last-of-type {
   border: none;
 }
+.main > div .status {
+  padding: 5px;
+  background: #f7f7f7;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
+}
 .uploadRegion {
+  padding: 15px;
   font-size: 12px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -905,7 +917,8 @@ input[type=text]:focus,
 input[type=email]:focus,
 input[type=search]:focus,
 input[type=password]:focus,
-textarea:focus {
+textarea:focus,
+.main .status:focus {
   outline: none;
   border: 1px solid #78daff;
 }