From f18cf3c0cb3e855559b8fc05dcdd0944fa5ea50e Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Thu, 19 Sep 2013 16:28:07 +0200
Subject: [PATCH] [ux] header styling and active for sidebar

---
 public/css/app/chat.styl   |  7 +++----
 public/css/app/roster.styl |  8 ++++----
 public/css/otalk.css       | 35 +++++++++++++++++------------------
 3 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index 6fbc37f..e31d142 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -18,20 +18,19 @@
 
   header
     padding: 5px
-    border-bottom: 1px solid #aaa
+    border-bottom: 2px solid $grayOutline
     position: fixed
     right: 0px
     left: 181px
     z-index: 10
     font-size: 14px
     borderbox()
+    background: $grayBackground
     color: #222
-    font-weight: normal
-    font-size: 11px
 
     .avatar
       margin-right: 5px
-      roundall: 5px
+      roundall(3px)
       width: 30px
       height: 30px
       position: absolute
diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index 11b934d..022ebe4 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -82,8 +82,8 @@
         color: #777
 
     &.activeContact
-      border-top: 1px solid #8de0ff
-      border-bottom: 1px solid #004a65
+      background: $activeBlue
+      color: white
 
     &.composing
       border-right: 4px solid orange
@@ -102,13 +102,13 @@
       top: 5px
       width: 30px
       height: 30px
-      roundall: 5px
+      roundall(3px)
       noselect()
 
     .name
-      margin: 0px
       margin-left: 40px
       font-weight: bold
+      line-height: 20px
 
     .status
       color: #ccc
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 58ba0ec..febfbd3 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -340,8 +340,8 @@ td {
 }
 #roster li.activeContact,
 #bookmarks li.activeContact {
-  border-top: 1px solid #8de0ff;
-  border-bottom: 1px solid #004a65;
+  background: #00aeef;
+  color: #fff;
 }
 #roster li.composing,
 #bookmarks li.composing {
@@ -364,12 +364,12 @@ td {
   top: 5px;
   width: 30px;
   height: 30px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -khtml-border-radius: 5px;
-  -o-border-radius: 5px;
-  -border-radius: 5px;
-  border-radius: 5px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -379,9 +379,9 @@ td {
 }
 #roster li .name,
 #bookmarks li .name {
-  margin: 0px;
   margin-left: 40px;
   font-weight: bold;
+  line-height: 20px;
 }
 #roster li .status,
 #bookmarks li .status {
@@ -433,7 +433,7 @@ td {
 }
 .conversation header {
   padding: 5px;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 2px solid #e4e4e4;
   position: fixed;
   right: 0px;
   left: 181px;
@@ -442,18 +442,17 @@ td {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  background: #f7f7f7;
   color: #222;
-  font-weight: normal;
-  font-size: 11px;
 }
 .conversation header .avatar {
   margin-right: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -khtml-border-radius: 5px;
-  -o-border-radius: 5px;
-  -border-radius: 5px;
-  border-radius: 5px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
   width: 30px;
   height: 30px;
   position: absolute;