Put quote preview in text box for Android, above it in iOS

js/views/conversation_view.js

@@ -1118,7 +1118,12 @@
         Component: window.Signal.Components.Quote,
         props,
       });
-      this.$('.bottom-bar').prepend(this.quoteView.el);
+
+      const selector = storage.get('theme-setting') === 'ios'
+        ? '.bottom-bar'
+        : '.send';
+
+      this.$(selector).prepend(this.quoteView.el);
       this.updateMessageFieldSize({});
     },
 

stylesheets/_conversation.scss

@@ -777,8 +777,12 @@ span.status {
     height: 18px;
     width: 18px;
 
+    .close-button {
+      width: 100%;
+      height: 100%;
       @include color-svg('../images/x.svg', white);
     }
+  }
 
   .icon-container {
     flex: initial;
@@ -851,13 +855,26 @@ span.status {
   margin: 0px;
 }
 
+// We need to use the wrapper because the conversation view calculates the height of all
+//   things in the composition area. A margin on an inner div won't be included in that
+//   height calculation.
 .bottom-bar .quote-wrapper {
   margin-right: 5px;
   margin-bottom: 5px;
 }
 
+.send .quote-wrapper {
+  margin-left: 46px;
+  margin-top: 5px;
+  margin-right: 75px;
+  margin-bottom: 0px;
+}
+
 .incoming .quoted-message {
   background-color: rgba(white, 0.6);
+  border-top: none;
+  border-bottom: none;
+  border-right: none;
   border-left-color: white;
 }
 

ts/components/conversation/Quote.tsx

@@ -162,9 +162,8 @@ export class Quote extends React.Component<Props, {}> {
     }
 
     // We need the container to give us the flexibility to implement the iOS design.
-    // We put the onClick on both because the Android theme juse uses close-container
     return (
-      <div className="close-container" onClick={onClose}>
+      <div className="close-container">
         <div className="close-button" onClick={onClose}></div>
       </div>
     );