From 06fdfb7a789206c113620559214a2c54942966d8 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Fri, 20 Sep 2013 19:17:31 +0200
Subject: [PATCH] [ux] minor tweaks on connection status bar, further
 amendments to roster

---
 public/css/app/connectionStatus.styl |  4 ++--
 public/css/app/roster.styl           | 18 +++++++++---------
 public/css/otalk.css                 | 24 +++++++++++++-----------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/public/css/app/connectionStatus.styl b/public/css/app/connectionStatus.styl
index 4ece441..0469c5f 100644
--- a/public/css/app/connectionStatus.styl
+++ b/public/css/app/connectionStatus.styl
@@ -23,9 +23,8 @@
   top: 0px;
   position: fixed
   background-color: #333
-  border-bottom: 1px solid #000
   width: 100%
-  z-index: 9999
+  z-index: 100
   text-align: center
 
   span.message
@@ -33,6 +32,7 @@
     padding: 0px 10px
     font-weight: bold
     font-size: $fontLarge
+    color: white
 
   button
     padding: 5px 8px
diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index 7005ee8..ae5868c 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -14,6 +14,9 @@
   webkit-transition-fix()
   noselect()
 
+  .main li a, h1, #roster li
+    border-bottom: 1px solid lighten($sidebarActive, 5%)
+
   .main
     li
       list-style-type: none
@@ -38,7 +41,6 @@
         color: white
         font-weight: 600
         line-height: 35px
-        border-bottom: 1px solid lighten($sidebarActive, 5%)
 
 
   h1
@@ -46,18 +48,16 @@
     margin: 0
     padding: 5px 10px
     color: lighten($sidebarActive, 50%)
-    border-top: 1px solid lighten($sidebarActive, 5%)
-    border-bottom: 1px solid lighten($sidebarActive, 5%)
     background: $sidebarActive
 
 #roster,
 #bookmarks
   li
     list-style-type: none
-    padding: 11px
+    padding: 8px 10px
     margin: 0px
     position: relative
-    min-height: 20px
+    min-height: 15px
     font-size: $fontSmall
     color: #fff
     cursor: pointer
@@ -73,17 +73,17 @@
 
     &.online,
     &.chat
-      border-left: 2px solid green
+      border-left: 3px solid green
 
     &.dnd
-      border-left: 2px solid red
+      border-left: 3px solid red
 
     &.away,
     &.xa
-      border-left: 2px solid orange
+      border-left: 3px solid orange
 
     &.offline
-      border-left: 2px solid #222
+      border-left: none
       color: #aaa
 
       img
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 9178ba8..f12f2e0 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -263,6 +263,11 @@ td {
   -ms-user-select: none;
   user-select: none;
 }
+#menu .main li a,
+#menu h1,
+#menu #roster li {
+  border-bottom: 1px solid #1e3356;
+}
 #menu .main li {
   list-style-type: none;
   line-height: 12px;
@@ -286,24 +291,21 @@ td {
   color: #fff;
   font-weight: 600;
   line-height: 35px;
-  border-bottom: 1px solid #1e3356;
 }
 #menu h1 {
   font-size: 14px;
   margin: 0;
   padding: 5px 10px;
   color: #668bc9;
-  border-top: 1px solid #1e3356;
-  border-bottom: 1px solid #1e3356;
   background: #192a47;
 }
 #roster li,
 #bookmarks li {
   list-style-type: none;
-  padding: 11px;
+  padding: 8px 10px;
   margin: 0px;
   position: relative;
-  min-height: 20px;
+  min-height: 15px;
   font-size: 12px;
   color: #fff;
   cursor: pointer;
@@ -324,21 +326,21 @@ td {
 #bookmarks li.online,
 #roster li.chat,
 #bookmarks li.chat {
-  border-left: 2px solid #008000;
+  border-left: 3px solid #008000;
 }
 #roster li.dnd,
 #bookmarks li.dnd {
-  border-left: 2px solid #f00;
+  border-left: 3px solid #f00;
 }
 #roster li.away,
 #bookmarks li.away,
 #roster li.xa,
 #bookmarks li.xa {
-  border-left: 2px solid #ffa500;
+  border-left: 3px solid #ffa500;
 }
 #roster li.offline,
 #bookmarks li.offline {
-  border-left: 2px solid #222;
+  border-left: none;
   color: #aaa;
 }
 #roster li.offline img,
@@ -623,9 +625,8 @@ td {
   top: 0px;
   position: fixed;
   background-color: #333;
-  border-bottom: 1px solid #000;
   width: 100%;
-  z-index: 9999;
+  z-index: 100;
   text-align: center;
 }
 #connectionStatus span.message {
@@ -633,6 +634,7 @@ td {
   padding: 0px 10px;
   font-weight: bold;
   font-size: 20px;
+  color: #fff;
 }
 #connectionStatus button {
   padding: 5px 8px;