Fix a number visual bugs with message forwarding

stylesheets/components/ForwardMessageModal.scss

@@ -60,8 +60,9 @@
     &__scroller {
       max-height: 300px;
       min-height: 300px;
-      padding-right: 36px;
       padding: 16px;
+      // Need more padding on the right to make room for floating emoji button
+      padding-right: 36px;
     }
   }
 
@@ -79,14 +80,26 @@
       }
     }
 
-    &--cancel {
+    &--close {
       @include button-reset;
       position: absolute;
-      left: 16px;
+      top: 8px;
+      right: 16px;
+
+      height: 22px;
+      width: 22px;
+
+      @include light-theme {
+        @include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
+      }
+
+      @include dark-theme {
+        @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
+      }
 
       @include keyboard-mode {
         &:focus {
-          color: $ultramarine-ui-light;
+          background-color: $ultramarine-ui-light;
         }
       }
     }

ts/components/ContactListItem.stories.tsx

@@ -18,6 +18,8 @@ storiesOf('Components/ContactListItem', module)
   .add("It's me!", () => {
     return (
       <ContactListItem
+        type="direct"
+        acceptedMessageRequest
         i18n={i18n}
         isMe
         title="Someone 🔥 Somewhere"
@@ -33,6 +35,8 @@ storiesOf('Components/ContactListItem', module)
     return (
       <div>
         <ContactListItem
+          type="direct"
+          acceptedMessageRequest
           i18n={i18n}
           title="Someone 🔥 Somewhere"
           name="Someone 🔥 Somewhere"
@@ -43,6 +47,8 @@ storiesOf('Components/ContactListItem', module)
           onClick={onClick}
         />
         <ContactListItem
+          type="direct"
+          acceptedMessageRequest
           i18n={i18n}
           title="Another ❄️ Yes"
           name="Another ❄️ Yes"
@@ -58,6 +64,8 @@ storiesOf('Components/ContactListItem', module)
   .add('With name and profile, admin', () => {
     return (
       <ContactListItem
+        type="direct"
+        acceptedMessageRequest
         i18n={i18n}
         isAdmin
         title="Someone 🔥 Somewhere"
@@ -70,9 +78,23 @@ storiesOf('Components/ContactListItem', module)
       />
     );
   })
+  .add('With a group with no avatarPath', () => {
+    return (
+      <ContactListItem
+        type="group"
+        i18n={i18n}
+        isAdmin
+        title="Group!"
+        about="👍 Free to chat"
+        onClick={onClick}
+      />
+    );
+  })
   .add('With just number, admin', () => {
     return (
       <ContactListItem
+        type="direct"
+        acceptedMessageRequest
         i18n={i18n}
         isAdmin
         title="(202) 555-0011"
@@ -86,6 +108,8 @@ storiesOf('Components/ContactListItem', module)
   .add('With name and profile, no avatar', () => {
     return (
       <ContactListItem
+        type="direct"
+        acceptedMessageRequest
         i18n={i18n}
         title="Someone 🔥 Somewhere"
         name="Someone 🔥 Somewhere"
@@ -100,6 +124,9 @@ storiesOf('Components/ContactListItem', module)
   .add('Profile, no name, no avatar', () => {
     return (
       <ContactListItem
+        type="direct"
+        acceptedMessageRequest
+        color="blue"
         i18n={i18n}
         phoneNumber="(202) 555-0011"
         title="🔥Flames🔥"
@@ -112,6 +139,8 @@ storiesOf('Components/ContactListItem', module)
   .add('No name, no profile, no avatar, no about', () => {
     return (
       <ContactListItem
+        type="direct"
+        acceptedMessageRequest
         i18n={i18n}
         phoneNumber="(202) 555-0011"
         title="(202) 555-0011"
@@ -122,6 +151,8 @@ storiesOf('Components/ContactListItem', module)
   .add('No name, no profile, no avatar', () => {
     return (
       <ContactListItem
+        type="direct"
+        acceptedMessageRequest
         i18n={i18n}
         title="(202) 555-0011"
         about="👍 Free to chat"
@@ -132,6 +163,12 @@ storiesOf('Components/ContactListItem', module)
   })
   .add('No name, no profile, no number', () => {
     return (
-      <ContactListItem i18n={i18n} title="Unknown contact" onClick={onClick} />
+      <ContactListItem
+        type="direct"
+        acceptedMessageRequest
+        i18n={i18n}
+        title="Unknown contact"
+        onClick={onClick}
+      />
     );
   });

ts/components/ContactListItem.tsx

@@ -28,6 +28,7 @@ type Props = {
   | 'profileName'
   | 'sharedGroupNames'
   | 'title'
+  | 'type'
   | 'unblurredAvatarPath'
 >;
 
@@ -43,6 +44,7 @@ export class ContactListItem extends React.Component<Props> {
       profileName,
       sharedGroupNames,
       title,
+      type,
       unblurredAvatarPath,
     } = this.props;
 
@@ -51,7 +53,7 @@ export class ContactListItem extends React.Component<Props> {
         acceptedMessageRequest={acceptedMessageRequest}
         avatarPath={avatarPath}
         color={color}
-        conversationType="direct"
+        conversationType={type}
         i18n={i18n}
         name={name}
         phoneNumber={phoneNumber}

ts/components/ForwardMessageModal.tsx

@@ -250,13 +250,11 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
             </button>
           ) : (
             <button
-              aria-label={i18n('cancel')}
-              className="module-ForwardMessageModal__header--cancel"
+              aria-label={i18n('close')}
+              className="module-ForwardMessageModal__header--close"
               onClick={onClose}
               type="button"
-            >
-              {i18n('cancel')}
-            </button>
+            />
           )}
           <h1>{i18n('forwardMessage')}</h1>
         </div>

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -151,6 +151,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
             {selectedContacts.map(contact => (
               <ContactPill
                 key={contact.id}
+                acceptedMessageRequest={contact.acceptedMessageRequest}
                 avatarPath={contact.avatarPath}
                 color={contact.color}
                 firstName={contact.firstName}

ts/components/conversationList/ContactCheckbox.tsx

@@ -32,6 +32,7 @@ export type PropsDataType = {
   | 'profileName'
   | 'sharedGroupNames'
   | 'title'
+  | 'type'
   | 'unblurredAvatarPath'
 >;
 
@@ -64,6 +65,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
     sharedGroupNames,
     style,
     title,
+    type,
     unblurredAvatarPath,
   }) => {
     const disabled = Boolean(disabledReason);
@@ -99,7 +101,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
         avatarPath={avatarPath}
         checked={isChecked}
         color={color}
-        conversationType="direct"
+        conversationType={type}
         disabled={disabled}
         headerName={headerName}
         i18n={i18n}

ts/views/conversation_view.ts

@@ -2365,9 +2365,8 @@ Whisper.ConversationView = Whisper.View.extend({
       })
     );
 
-    if (linkPreview) {
-      this.resetLinkPreview();
-    }
+    // Cancel any link still pending, even if it didn't make it into the message
+    this.resetLinkPreview();
 
     return true;
   },