From 6c05a7142496768f3e5bdfe02580a941d7f247d3 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 29 Aug 2016 01:11:13 -0700
Subject: [PATCH] Tune up ios bubble style

// FREEBIE
---
 background.html                |  4 ++-
 js/views/message_view.js       |  8 +++--
 stylesheets/_conversation.scss |  5 +--
 stylesheets/_themes.scss       | 50 ++++++++++++++++++++++++-----
 stylesheets/manifest.css       | 57 ++++++++++++++++++++++------------
 5 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/background.html b/background.html
index 6760c64d..5d3ff904 100644
--- a/background.html
+++ b/background.html
@@ -148,7 +148,9 @@
       <div class='bubble {{ avatar.color }}'>
           <div class='sender' dir='auto'>{{ sender }}</div>
           <div class='attachments'></div>
-          <p class='content' dir='auto'>{{ message }}</p>
+          <p class='content' dir='auto'>
+            {{ #message }}<span class='body'>{{ message }}</span>{{ /message }}
+          </p>
           <div class='meta'>
             <span class='timestamp' data-timestamp={{ timestamp }}></span>
             <span class='status hide'></span>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 65d5cd0f..bdaf59e9 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -138,9 +138,11 @@
               size: 16
             });
 
-            var content = this.$('.content');
-            var escaped = content.html();
-            content.html(escaped.replace(/\n/g, '<br>').replace(URL_REGEX, "$1<a href='$2' target='_blank'>$2</a>"));
+            var body = this.$('.body');
+            if (body.length > 0) {
+                var escaped = body.html();
+                body.html(escaped.replace(/\n/g, '<br>').replace(URL_REGEX, "$1<a href='$2' target='_blank'>$2</a>"));
+            }
 
             this.renderSent();
             this.renderDelivered();
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index f1415f68..736bd7c6 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -285,9 +285,6 @@ li.entry .error-icon-container {
     left: -2px;
     display: inline-block;
     vertical-align: top;
-    padding: 9px 12px;
-    border-radius: $border-radius;
-    box-shadow: 0 3px 3px -4px black;
     word-wrap: break-word;
     margin-left: 8px;
     max-width: 30em;
@@ -297,7 +294,7 @@ li.entry .error-icon-container {
       max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size
     }
 
-    .content {
+    .body {
       -webkit-user-select: text;
       white-space: pre-wrap;
 
diff --git a/stylesheets/_themes.scss b/stylesheets/_themes.scss
index e253df1e..862d84a1 100644
--- a/stylesheets/_themes.scss
+++ b/stylesheets/_themes.scss
@@ -3,7 +3,7 @@
     color: white;
   }
 
-  .content {
+  &, .content {
     &::selection, a::selection {
       background: white;
       color: $grey_d;
@@ -15,7 +15,7 @@
     }
   }
 
-  .attachments, .content {
+  &, .attachments, .content {
     a {
       color: $grey_l;
     }
@@ -23,17 +23,51 @@
 }
 
 .ios {
-  .incoming .bubble {
-    background-color: $grey_l;
-    color: $grey_d;
+  .bubble {
+    .content .body {
+      display: inline-block;
+      padding: 10px;
+    }
+    .content, .attachments img {
+      border-radius: 15px;
+    }
+    .meta {
+      float: none;
+      clear: both;
+    }
   }
-  .outgoing .bubble {
-    background-color: $blue;
-    @include invert-text-color;
+  .incoming .content {
+    background-color: #e5e5e5;
+    color: black;
+    float: left;
+  }
+  .outgoing {
+    .content {
+      background-color: $blue;
+      @include invert-text-color;
+      float: right;
+    }
+    .timestamp {
+      float: none;
+    }
+    .status {
+      float: right;
+    }
+  }
+  .attachment {
+    a {
+      border-radius: 15px;
+    }
+    margin-bottom: 1px;
   }
 }
 
 .android {
+  .bubble {
+    padding: 9px 12px;
+    border-radius: $border-radius;
+    box-shadow: 0 3px 3px -4px black;
+  }
   .outgoing .bubble {
     background-color: $grey_l;
   }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index d251d8a6..3356429a 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1052,9 +1052,6 @@ li.entry .error-icon-container {
     left: -2px;
     display: inline-block;
     vertical-align: top;
-    padding: 9px 12px;
-    border-radius: 5px;
-    box-shadow: 0 3px 3px -4px black;
     word-wrap: break-word;
     margin-left: 8px;
     max-width: 30em;
@@ -1063,12 +1060,12 @@ li.entry .error-icon-container {
       .message-container .bubble,
       .message-list .bubble {
         max-width: calc(100% - 45px - 24px); } }
-    .message-container .bubble .content,
-    .message-list .bubble .content {
+    .message-container .bubble .body,
+    .message-list .bubble .body {
       -webkit-user-select: text;
       white-space: pre-wrap; }
-      .message-container .bubble .content a,
-      .message-list .bubble .content a {
+      .message-container .bubble .body a,
+      .message-list .bubble .body a {
         word-break: break-all; }
     .message-container .bubble p,
     .message-list .bubble p {
@@ -1277,33 +1274,55 @@ li.entry .error-icon-container {
         background-color: #d9d9d9;
         border-color: silver; }
 
-.ios .incoming .bubble {
-  background-color: #f3f3f3;
-  color: #454545; }
-.ios .outgoing .bubble {
-  background-color: #2090ea; }
-  .ios .outgoing .bubble, .ios .outgoing .bubble .meta {
+.ios .bubble .content .body {
+  display: inline-block;
+  padding: 10px; }
+.ios .bubble .content, .ios .bubble .attachments img {
+  border-radius: 15px; }
+.ios .bubble .meta {
+  float: none;
+  clear: both; }
+.ios .incoming .content {
+  background-color: #e5e5e5;
+  color: black;
+  float: left; }
+.ios .outgoing .content {
+  background-color: #2090ea;
+  float: right; }
+  .ios .outgoing .content, .ios .outgoing .content .meta {
     color: white; }
-  .ios .outgoing .bubble .content::selection, .ios .outgoing .bubble .content a::selection {
+  .ios .outgoing .content::selection, .ios .outgoing .content a::selection, .ios .outgoing .content .content::selection, .ios .outgoing .content .content a::selection {
     background: white;
     color: #454545; }
-  .ios .outgoing .bubble .content::-moz-selection, .ios .outgoing .bubble .content a::-moz-selection {
+  .ios .outgoing .content::-moz-selection, .ios .outgoing .content a::-moz-selection, .ios .outgoing .content .content::-moz-selection, .ios .outgoing .content .content a::-moz-selection {
     background: white;
     color: #454545; }
-  .ios .outgoing .bubble .attachments a, .ios .outgoing .bubble .content a {
+  .ios .outgoing .content a, .ios .outgoing .content .attachments a, .ios .outgoing .content .content a {
     color: #f3f3f3; }
+.ios .outgoing .timestamp {
+  float: none; }
+.ios .outgoing .status {
+  float: right; }
+.ios .attachment {
+  margin-bottom: 1px; }
+  .ios .attachment a {
+    border-radius: 15px; }
 
+.android .bubble {
+  padding: 9px 12px;
+  border-radius: 5px;
+  box-shadow: 0 3px 3px -4px black; }
 .android .outgoing .bubble {
   background-color: #f3f3f3; }
 .android .incoming .bubble, .android .incoming .bubble .meta {
   color: white; }
-.android .incoming .bubble .content::selection, .android .incoming .bubble .content a::selection {
+.android .incoming .bubble::selection, .android .incoming .bubble a::selection, .android .incoming .bubble .content::selection, .android .incoming .bubble .content a::selection {
   background: white;
   color: #454545; }
-.android .incoming .bubble .content::-moz-selection, .android .incoming .bubble .content a::-moz-selection {
+.android .incoming .bubble::-moz-selection, .android .incoming .bubble a::-moz-selection, .android .incoming .bubble .content::-moz-selection, .android .incoming .bubble .content a::-moz-selection {
   background: white;
   color: #454545; }
-.android .incoming .bubble .attachments a, .android .incoming .bubble .content a {
+.android .incoming .bubble a, .android .incoming .bubble .attachments a, .android .incoming .bubble .content a {
   color: #f3f3f3; }
 
 .avatar.red, .conversation-header.red, .android .bubble.red {