From cafbc0f5df0fa4a242f692ec4a7c91e3687b0b73 Mon Sep 17 00:00:00 2001
From: Odysseas <OdysseasKr@users.noreply.github.com>
Date: Sat, 24 Oct 2015 00:43:51 +0300
Subject: [PATCH] Tweak conversation list style

Styled the conversation list items so that:
 - Timestamp is on the same line as the name
 - The message text on an unread conversation is ligher than the rest of
   the text

Resolves: #379
---
 background.html          | 2 +-
 stylesheets/_global.scss | 1 +
 stylesheets/_index.scss  | 2 +-
 stylesheets/manifest.css | 9 +++++----
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/background.html b/background.html
index 2b5f0bbd..1ee6017e 100644
--- a/background.html
+++ b/background.html
@@ -122,8 +122,8 @@
       {{> avatar }}
       <div class='contact-details'>
           {{> contact_name_and_number }}
-          <p class='last-message'> {{ last_message }} </p>
           <span class='last-timestamp'> {{ last_message_timestamp }} </span>
+          <p class='last-message'> {{ last_message }} </p>
       </div>
   </script>
   <script type="text/x-tmpl-mustache" id="phone-number">
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index ad781113..387087b5 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -307,6 +307,7 @@ $avatar-size: 44px;
     font-weight: 400;
     text-overflow: ellipsis;
     overflow-x: hidden;
+    display: inline-block;
   }
 
   .number {
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index da9a2942..37573a4d 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -119,6 +119,7 @@ input.search {
 
 .last-timestamp {
   font-size: smaller;
+  float: right;
 }
 
 .new-contact {
@@ -172,7 +173,6 @@ input.search {
 
 .conversations .unread .contact-details {
     .name,
-    .last-message,
     .last-timestamp {
       font-weight: bold;
     }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index ba6a3508..633b7f73 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -247,7 +247,8 @@ img.emoji {
     font-size: 1em;
     font-weight: 400;
     text-overflow: ellipsis;
-    overflow-x: hidden; }
+    overflow-x: hidden;
+    display: inline-block; }
   .contact .number {
     color: #616161;
     font-size: small; }
@@ -450,7 +451,7 @@ img.emoji {
     display: block; }
 
 .conversation-header {
-  border-bottom: solid 1px #d9d9d9;
+  border-bottom: solid 1px #dadada;
   margin-bottom: 4px; }
 
 .menu.conversation-menu button.drop-down {
@@ -487,7 +488,8 @@ input.search {
       color: #ccc; }
 
 .last-timestamp {
-  font-size: smaller; }
+  font-size: smaller;
+  float: right; }
 
 .new-contact {
   display: none;
@@ -527,7 +529,6 @@ input.search {
     display: block; }
 
 .conversations .unread .contact-details .name,
-.conversations .unread .contact-details .last-message,
 .conversations .unread .contact-details .last-timestamp {
   font-weight: bold; }