diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index e211de5ea..808d5c863 100644 --- a/js/views/conversation_view.js +++ b/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({}); }, diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 968201e0b..e07b4920e 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -777,7 +777,11 @@ span.status { height: 18px; width: 18px; - @include color-svg('../images/x.svg', white); + .close-button { + width: 100%; + height: 100%; + @include color-svg('../images/x.svg', white); + } } .icon-container { @@ -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; } diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx index b2117c8e3..83532d7bd 100644 --- a/ts/components/conversation/Quote.tsx +++ b/ts/components/conversation/Quote.tsx @@ -162,9 +162,8 @@ export class Quote extends React.Component { } // 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 ( -
+
);