[ux] cleanup: buttons and typography

clientapp/templates.js

@@ -187,7 +187,7 @@ exports.pages.chat = function anonymous(locals) {
 exports.pages.groupchat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><button class="primary joinRoom">Join</button><button class="secondary leaveRoom">Leave</button></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="controls"><button class="primary joinRoom">Join</button><button class="secondary leaveRoom">Leave</button></div></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/groupchat.jade

@@ -3,8 +3,9 @@ section.page.chat
     header
       img.avatar
       h1.name
-      button.primary.joinRoom Join
-      button.secondary.leaveRoom Leave
+      .controls
+        button.primary.joinRoom Join
+        button.secondary.leaveRoom Leave
     ul.messages
     .chatBox
       form

public/css/components/buttons.styl

@@ -115,3 +115,6 @@ button
 
 .addContact
   margin-top: -2px
+
+.joinRoom, .leaveRoom
+  margin: 3px 5px 0 0

public/css/otalk.css

@@ -518,6 +518,10 @@ button.secondary:hover:not(:disabled) {
 .addContact {
   margin-top: -2px;
 }
+.joinRoom,
+.leaveRoom {
+  margin: 3px 5px 0 0;
+}
 #connectionOverlay {
   position: fixed;
   top: 0px;
@@ -601,7 +605,6 @@ button.secondary:hover:not(:disabled) {
 #roster li,
 #bookmarks li {
   display: table;
-  list-style-type: none;
   padding: 7px 35px 7px 10px;
   margin: 0px;
   position: relative;
@@ -891,6 +894,9 @@ button.secondary:hover:not(:disabled) {
   box-sizing: border-box;
   background: #f7f7f7;
 }
+.conversation header .controls {
+  float: right;
+}
 .conversation header .avatar {
   margin-right: 5px;
   width: 30px;
@@ -1064,8 +1070,7 @@ button.secondary:hover:not(:disabled) {
   word-break: break-word;
 }
 .messages .message .timestamp {
-  font-size: 12px;
-  font-weight: 800;
+  font-size: 10px;
   color: #88d5f7;
   float: right;
   display: block;

public/css/pages/chat.styl

@@ -24,6 +24,9 @@
     borderbox()
     background: lighten($gray-light, 93%)
 
+    .controls
+      float: right
+
     .avatar
       margin-right: 5px
       avatar()
@@ -174,8 +177,7 @@
       word-break: break-word
 
     .timestamp
-      font-size: $font-size-small
-      font-weight: $font-weight-bold
+      font-size: $font-size-smaller
       color: lighten($blue, 50%)
       float: right
       display: block

public/css/pages/roster.styl

@@ -47,7 +47,6 @@
 
   li
     display: table
-    list-style-type: none
     padding: 7px 35px 7px 10px
     margin: 0px
     position: relative

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1382716344670
+# 0.0.1 1382717200112
 
 CACHE:
 /app.js