From 324d5cc890a1d256d25e234a2b9005958cf8319a Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Thu, 26 Sep 2013 12:55:27 +0200
Subject: [PATCH 1/2] [ux] fix message grouping borders

---
 public/css/app/chat.styl | 11 +++--------
 public/css/otalk.css     | 11 +++--------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index 39a5700..a199cf6 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -72,19 +72,16 @@
     position: relative
     z-index: 1
     list-style: none
-    padding: 0px
+    padding: 10px 0
     width: 100%
     min-height: 40px
     display: block
     borderbox()
-    border: 1px solid blue
+    border-bottom: 1px solid $grayOutline
 
-    &:last-child .message
+    &:last-of-type
       border: none
 
-    &.chatGroup
-      border: 1px solid red
-
     .messageAvatar
       position: relative
       display: inline-block
@@ -103,12 +100,10 @@
 
   .messageWrapper
     margin-left: 50px
-    border-left: 1px solid red
 
   .message
     font-size: 12px
     margin: 0px
-    padding: 10px
     display: inline-block
     padding-right: 11px
     min-width: 20px
diff --git a/public/css/otalk.css b/public/css/otalk.css
index fa3d54f..b89124d 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -689,21 +689,18 @@ h3 {
   position: relative;
   z-index: 1;
   list-style: none;
-  padding: 0px;
+  padding: 10px 0;
   width: 100%;
   min-height: 40px;
   display: block;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border: 1px solid #00f;
+  border-bottom: 1px solid #e4e4e4;
 }
-.messages li:last-child .message {
+.messages li:last-of-type {
   border: none;
 }
-.messages li.chatGroup {
-  border: 1px solid #f00;
-}
 .messages li .messageAvatar {
   position: relative;
   display: inline-block;
@@ -730,12 +727,10 @@ h3 {
 }
 .messages .messageWrapper {
   margin-left: 50px;
-  border-left: 1px solid #f00;
 }
 .messages .message {
   font-size: 12px;
   margin: 0px;
-  padding: 10px;
   display: inline-block;
   padding-right: 11px;
   min-width: 20px;

From 2ffecb060d1e725add01d8ef0bc2f946af5f0323 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Thu, 26 Sep 2013 13:03:35 +0200
Subject: [PATCH 2/2] [ux] fix avatars in chat, improve messaging

---
 public/css/app/chat.styl | 15 ++++++---------
 public/css/otalk.css     | 14 +++++---------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index a199cf6..d9f0c42 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -66,7 +66,6 @@
   bottom: 75px
   width: 100%
   borderbox()
-  background: lighten($activeBlue, 97%)
 
   li
     position: relative
@@ -74,7 +73,7 @@
     list-style: none
     padding: 10px 0
     width: 100%
-    min-height: 40px
+    min-height: 50px
     display: block
     borderbox()
     border-bottom: 1px solid $grayOutline
@@ -83,16 +82,14 @@
       border: none
 
     .messageAvatar
-      position: relative
-      display: inline-block
-      float: left
-      width: 30px
-      height: 30px
-      margin: 0px 8px 8px 8px
+      position: absolute
+      top: 50%
+      left: 10px
+      margin-top: -15px
 
       img
         avatar()
-        border: 1px solid red
+
       .name
         text-indent: -9999em
         position: absolute
diff --git a/public/css/otalk.css b/public/css/otalk.css
index b89124d..0b6faac 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -683,7 +683,6 @@ h3 {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  background: #f7fdff;
 }
 .messages li {
   position: relative;
@@ -691,7 +690,7 @@ h3 {
   list-style: none;
   padding: 10px 0;
   width: 100%;
-  min-height: 40px;
+  min-height: 50px;
   display: block;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -702,12 +701,10 @@ h3 {
   border: none;
 }
 .messages li .messageAvatar {
-  position: relative;
-  display: inline-block;
-  float: left;
-  width: 30px;
-  height: 30px;
-  margin: 0px 8px 8px 8px;
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  margin-top: -15px;
 }
 .messages li .messageAvatar img {
   width: 30px;
@@ -718,7 +715,6 @@ h3 {
   -o-border-radius: 50px;
   -border-radius: 50px;
   border-radius: 50px;
-  border: 1px solid #f00;
 }
 .messages li .messageAvatar .name {
   text-indent: -9999em;