From ae6e6da44bcb45f76502715c6a201ff98eb1af4c Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Tue, 9 May 2017 13:31:04 -0700
Subject: [PATCH] Change iOS file attachment bubbles to be on-theme

FREEBIE
---
 stylesheets/_conversation.scss |  4 ---
 stylesheets/_ios.scss          | 53 +++++++++++++++++++++++++++++++++-
 stylesheets/manifest.css       | 47 +++++++++++++++++++++++++-----
 3 files changed, 91 insertions(+), 13 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 4d4c0a25b..687550aca 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -473,11 +473,7 @@ li.entry .error-icon-container {
       padding: 5px;
       padding-right: 10px;
 
-      background-color: #fafafa;
-      border: 1px solid $grey_l2;
-      border-radius: $border-radius;
       cursor: pointer;
-      color: $grey_d;
 
       .fileName {
         font-weight: bold;
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index d56dbd79b..413a4815f 100644
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -85,6 +85,37 @@ $ios-border-color: rgba(0,0,0,0.1);
   .control .content {
     padding: 10px;
   }
+
+
+  .message-list .attachments .fileView {
+    border-radius: 15px;
+    margin-bottom: 0.25em;
+
+    padding: 10px;
+    position: relative;
+
+    &:before, &:after {
+      content: '';
+      display: block;
+      border-radius: 20px;
+      position: absolute;
+      width: 10px;
+    }
+    &:before {
+      right: -1px;
+      bottom: -3px;
+      height: 10px;
+      border-radius: 20px;
+      background: $blue;
+    }
+    &:after {
+      height: 11px;
+      right: -6px;
+      bottom: -3px;
+      background: white;
+    }
+  }
+
   .bubble {
     .content {
       margin-bottom: 5px;
@@ -126,6 +157,21 @@ $ios-border-color: rgba(0,0,0,0.1);
       clear: both;
     }
   }
+
+  .message-list .incoming .attachment .fileView {
+    background-color: #e6e5ea;
+    color: black;
+    float: left;
+
+    &:before {
+      left: -1px;
+      background-color: #e6e5ea;
+    }
+    &:after {
+      left: -6px;
+    }
+  }
+
   .incoming .content {
     background-color: #e6e5ea;
     color: black;
@@ -141,7 +187,7 @@ $ios-border-color: rgba(0,0,0,0.1);
     }
   }
   .outgoing {
-    .content {
+    .content, .attachments .fileView {
       background-color: $blue;
       &, .body, a {
         @include invert-text-color;
@@ -149,6 +195,11 @@ $ios-border-color: rgba(0,0,0,0.1);
       float: right;
     }
   }
+
+  .outgoing .attachments .fileView .icon::before {
+    @include color-svg('/images/file.svg', white);
+  }
+
   .attachment {
     a {
       border-radius: 15px;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index b6310fa82..77c03b91d 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1320,11 +1320,7 @@ li.entry .error-icon-container {
     position: relative;
     padding: 5px;
     padding-right: 10px;
-    background-color: #fafafa;
-    border: 1px solid #d9d9d9;
-    border-radius: 5px;
-    cursor: pointer;
-    color: #454545; }
+    cursor: pointer; }
     .message-container .attachments .fileView .fileName,
     .message-list .attachments .fileView .fileName {
       font-weight: bold;
@@ -1532,6 +1528,28 @@ li.entry .error-icon-container {
 .ios .error-message.content,
 .ios .control .content {
   padding: 10px; }
+.ios .message-list .attachments .fileView {
+  border-radius: 15px;
+  margin-bottom: 0.25em;
+  padding: 10px;
+  position: relative; }
+  .ios .message-list .attachments .fileView:before, .ios .message-list .attachments .fileView:after {
+    content: '';
+    display: block;
+    border-radius: 20px;
+    position: absolute;
+    width: 10px; }
+  .ios .message-list .attachments .fileView:before {
+    right: -1px;
+    bottom: -3px;
+    height: 10px;
+    border-radius: 20px;
+    background: #2090ea; }
+  .ios .message-list .attachments .fileView:after {
+    height: 11px;
+    right: -6px;
+    bottom: -3px;
+    background: white; }
 .ios .bubble .content {
   margin-bottom: 5px; }
   .ios .bubble .content .body {
@@ -1562,6 +1580,15 @@ li.entry .error-icon-container {
   border: 1px solid rgba(0, 0, 0, 0.1); }
 .ios .bubble .meta {
   clear: both; }
+.ios .message-list .incoming .attachment .fileView {
+  background-color: #e6e5ea;
+  color: black;
+  float: left; }
+  .ios .message-list .incoming .attachment .fileView:before {
+    left: -1px;
+    background-color: #e6e5ea; }
+  .ios .message-list .incoming .attachment .fileView:after {
+    left: -6px; }
 .ios .incoming .content {
   background-color: #e6e5ea;
   color: black;
@@ -1571,14 +1598,18 @@ li.entry .error-icon-container {
     background-color: #e6e5ea; }
   .ios .incoming .content .body:after {
     left: -6px; }
-.ios .outgoing .content {
+.ios .outgoing .content, .ios .outgoing .attachments .fileView {
   background-color: #2090ea;
   float: right; }
-  .ios .outgoing .content, .ios .outgoing .content .body, .ios .outgoing .content a {
+  .ios .outgoing .content, .ios .outgoing .content .body, .ios .outgoing .content a, .ios .outgoing .attachments .fileView, .ios .outgoing .attachments .fileView .body, .ios .outgoing .attachments .fileView a {
     color: white; }
-    .ios .outgoing .content::selection, .ios .outgoing .content .body::selection, .ios .outgoing .content a::selection {
+    .ios .outgoing .content::selection, .ios .outgoing .content .body::selection, .ios .outgoing .content a::selection, .ios .outgoing .attachments .fileView::selection, .ios .outgoing .attachments .fileView .body::selection, .ios .outgoing .attachments .fileView a::selection {
       background: white;
       color: #454545; }
+.ios .outgoing .attachments .fileView .icon::before {
+  -webkit-mask: url("/images/file.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: white; }
 .ios .attachment {
   margin-bottom: 1px; }
   .ios .attachment a {