Use fit: cover for non-square thumbnails, better movie icon

Also: Match Android's X button in the quote composition area

images/movie.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18,4L20,8H17L15,4H13L15,8H12L10,4H8L10,8H7L5,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V4H18Z" /></svg>

stylesheets/_conversation.scss

@@ -788,15 +788,18 @@ span.status {
 
   .close-container {
     position: absolute;
-    top: 0px;
+    top: 4px;
-    right: 0px;
+    right: 4px;
-    height: 18px;
+    height: 16px;
-    width: 18px;
+    width: 16px;
+
+    background-color: rgba(255, 255, 255, 0.75);
+    border-radius: 50%;
 
     .close-button {
       width: 100%;
       height: 100%;
-      @include color-svg('../images/x.svg', white);
+      @include color-svg('../images/x.svg', $grey);
     }
   }
 
@@ -840,6 +843,9 @@ span.status {
       &.play {
         @include color-svg('../images/play.svg', white);
       }
+      &.movie {
+        @include color-svg('../images/movie.svg', white);
+      }
 
       @include avatar-colors;
     }
@@ -853,9 +859,12 @@ span.status {
       align-items: center;
       justify-content: center;
 
+      object-fit: cover;
+
       img {
-        max-width: 100%;
+        width: 100%;
-        max-height: 100%;
+        height: 100%;
+        object-fit: cover;
       }
     }
   }

stylesheets/_ios.scss

@@ -194,6 +194,9 @@ $ios-border-color: rgba(0,0,0,0.1);
       height: 48px;
       position: relative;
 
+      top: auto;
+      right: auto;
+
       display: flex;
       align-items: center;
       justify-content: center;

ts/components/conversation/Quote.md

@@ -183,9 +183,8 @@ const View = Whisper.MessageView;
 #### A lot of text in quotation, with image
 
 ```jsx
-const quotedMessage = {
+const thumbnail = {
-  imageUrl: util.gifObjectUrl,
+  objectUrl: util.gifObjectUrl,
-  id: '3234-23423-2342',
 };
 const outgoing = new Whisper.Message({
   type: 'outgoing',
@@ -218,8 +217,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   }),
 }));
 
-outgoing.quotedMessage = quotedMessage;
+outgoing.quoteThumbnail = thumbnail;
-incoming.quotedMessage = quotedMessage;
+incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
@@ -237,8 +236,8 @@ const View = Whisper.MessageView;
 #### Image with caption
 
 ```jsx
-const quotedMessage = {
+const thumbnail = {
-  imageUrl: util.gifObjectUrl,
+  objectUrl: util.gifObjectUrl,
   id: '3234-23423-2342',
 };
 const outgoing = new Whisper.Message({
@@ -268,8 +267,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   }),
 }));
 
-outgoing.quotedMessage = quotedMessage;
+outgoing.quoteThumbnail = thumbnail;
-incoming.quotedMessage = quotedMessage;
+incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
@@ -287,8 +286,8 @@ const View = Whisper.MessageView;
 #### Image
 
 ```jsx
-const quotedMessage = {
+const thumbnail = {
-  imageUrl: util.gifObjectUrl,
+  objectUrl: util.gifObjectUrl,
 };
 
 const outgoing = new Whisper.Message({
@@ -317,8 +316,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   }),
 }));
 
-outgoing.quotedMessage = quotedMessage;
+outgoing.quoteThumbnail = thumbnail;
-incoming.quotedMessage = quotedMessage;
+incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
@@ -375,8 +374,8 @@ const View = Whisper.MessageView;
 #### Video with caption
 
 ```jsx
-const quotedMessage = {
+const thumbnail = {
-  imageUrl: util.gifObjectUrl,
+  objectUrl: util.gifObjectUrl,
 };
 
 const outgoing = new Whisper.Message({
@@ -406,8 +405,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   }),
 }));
 
-outgoing.quotedMessage = quotedMessage;
+outgoing.quoteThumbnail = thumbnail;
-incoming.quotedMessage = quotedMessage;
+incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
@@ -425,8 +424,8 @@ const View = Whisper.MessageView;
 #### Video
 
 ```jsx
-const quotedMessage = {
+const thumbnail = {
-  imageUrl: util.gifObjectUrl,
+  objectUrl: util.gifObjectUrl,
 };
 
 const outgoing = new Whisper.Message({
@@ -456,8 +455,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   }),
 }));
 
-outgoing.quotedMessage = quotedMessage;
+outgoing.quoteThumbnail = thumbnail;
-incoming.quotedMessage = quotedMessage;
+incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>

ts/components/conversation/Quote.tsx

@@ -95,7 +95,7 @@ export class Quote extends React.Component<Props, {}> {
     if (Mime.isVideo(contentType)) {
       return objectUrl
         ? this.renderImage(objectUrl, 'play')
-        : this.renderIcon('play');
+        : this.renderIcon('movie');
     }
     if (Mime.isImage(contentType)) {
       return objectUrl