Update to new message bubble reactions design

2020-02-03 15:02:49 -05:00 · 2020-02-03 15:02:49 -05:00 · 01d4aa0772
parent 682ac656c6
commit 01d4aa0772
7 changed files with 482 additions and 460 deletions
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -1152,6 +1152,40 @@
      }
    }
  },
+  "notificationReactionMessage": {
+    "message": "$sender$ reacted $emoji$ to: $message$",
+    "placeholders": {
+      "sender": {
+        "content": "$1",
+        "example": "John"
+      },
+      "emoji": {
+        "content": "$2",
+        "example": "👍"
+      },
+      "message": {
+        "content": "$3",
+        "example": "Sounds good."
+      }
+    }
+  },
+  "notificationReactionMessageMostRecent": {
+    "message": "Most recent: $sender$ reacted $emoji$ to: $message$",
+    "placeholders": {
+      "sender": {
+        "content": "$1",
+        "example": "John"
+      },
+      "emoji": {
+        "content": "$2",
+        "example": "👍"
+      },
+      "message": {
+        "content": "$3",
+        "example": "Sounds good."
+      }
+    }
+  },
  "sendFailed": {
    "message": "Send failed",
    "description": "Shown on outgoing message if it fails to send"
--- a/js/notifications.js
+++ b/js/notifications.js
@ -126,9 +126,10 @@
            // eslint-disable-next-line prefer-destructuring
            title = last.title;
            if (last.reaction) {
-              message = i18n('notificationReaction', [
+              message = i18n('notificationReactionMessage', [
                last.title,
                last.reaction.emoji,
+                last.message,
              ]);
            } else {
              // eslint-disable-next-line prefer-destructuring
@ -136,9 +137,10 @@
            }
          } else if (last.reaction) {
            title = newMessageCountLabel;
-            message = i18n('notificationReactionMostRecent', [
+            message = i18n('notificationReactionMessageMostRecent', [
              last.title,
              last.reaction.emoji,
+              last.message,
            ]);
          } else {
            title = newMessageCountLabel;
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@ -90,16 +90,10 @@

 .module-message__buttons--incoming {
  left: calc(100% + 8px);
-  &.module-message__buttons--has-reactions {
-    padding-left: 40px - 12px; // Adjust 40px by 12px margin on the button
-  }
 }
 .module-message__buttons--outgoing {
  right: calc(100% + 8px);
  flex-direction: row-reverse;
-  &.module-message__buttons--has-reactions {
-    padding-right: 40px - 12px; // Adjust 40px by 12px margin on the button
-  }
 }

 .module-message__buttons__download {
@ -1096,6 +1090,14 @@
  align-items: center;
  margin-top: 3px;
  margin-bottom: -3px;
+
+  &--outgoing {
+    justify-content: flex-end;
+  }
+
+  &--with-reactions {
+    margin-bottom: -2px;
+  }
 }

 // With an image and no caption, this section needs to be on top of the image overlay
@ -1171,10 +1173,6 @@
  }
 }

-.module-message__metadata__spacer {
-  flex-grow: 1;
-}
-
 .module-message__metadata__status-icon {
  width: 12px;
  height: 12px;
@ -1342,43 +1340,57 @@

 .module-message__reactions {
  position: absolute;
-  top: 0;
+  bottom: 0px;
  z-index: 2;
-  height: 100%;
-
-  &--incoming {
-    right: -28px;
-  }
-
-  &--outgoing {
-    left: -28px;
-  }
+  height: 22px;
+  display: flex;
 }

 .module-message__reactions__reaction {
  @include button-reset;

-  width: 33px;
-  height: 33px;
+  min-width: 28px;
+  height: 22px;
  border: 1px solid;
  border-radius: 33px;
  display: flex;
  justify-content: center;
  align-items: center;

-  position: absolute;
-  top: 0;
-
-  &:first-of-type {
-    z-index: 2;
+  &--with-count {
+    min-width: 40px;
  }

-  &--incoming {
-    right: 0;
-  }
+  &__count {
+    @include font-caption-bold;

-  &--outgoing {
-    left: 0;
+    margin-left: 4px;
+
+    &--no-emoji {
+      margin-left: 0px;
+    }
+
+    @include light-theme {
+      color: $color-gray-60;
+    }
+
+    @include dark-theme {
+      color: $color-gray-25;
+    }
+
+    &--is-me {
+      @include light-theme {
+        color: $color-gray-75;
+      }
+
+      @include dark-theme {
+        color: $color-gray-15;
+      }
+
+      @include ios-theme {
+        color: $color-white-alpha-90;
+      }
+    }
  }

  &:focus {
@ -7633,6 +7645,10 @@ button.module-image__border-overlay:focus {
 .module-message__container {
  // 2px to allow for 1px border
  max-width: 302px;
+
+  &--with-reactions {
+    margin-bottom: 12px;
+  }
 }

 /* Spec: container > 438px and container < 593px */
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@ -449,369 +449,253 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean

 ### Reactions

-#### One Reaction
-
 ```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
+<util.ConversationContext>
+  {[
+    { reactions: [{ emoji: '👍', from: { id: '+14155552671' } }] },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Jack Sparrow' } },
        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-      ]}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-      ]}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### One Reaction - Ours
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', isMe: true, name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-      ]}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', isMe: true, name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-      ]}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Multiple reactions, ordered by most common then most recent
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Joel Ferrari' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
+          emoji: '😂',
+          from: { id: '+14155552672', profileName: 'Davy Jones' },
        },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Jack Sparrow' } },
+        { emoji: '😂', from: { id: '+14155552672', name: 'Amelia Briggs' } },
        {
          emoji: '😮',
-          from: { id: '+14155552671', name: 'Rick Owens' },
-          timestamp: 2,
+          from: { id: '+14155552673', profileName: 'Joel Ferrari' },
        },
-      ]}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Jack Sparrow' } },
+        { emoji: '😂', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '😮', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '😮', from: { id: '+14155552677', name: 'Amelia Briggs' } },
+        { emoji: '😮', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+        { emoji: '😮', from: { id: '+14155552679', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      short: true,
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552677', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      short: true,
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      short: true,
+      reactions: [],
+    },
+    {
+      reactions: [
        {
          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
+          from: { isMe: true, id: '+14155552671', name: 'Amelia Briggs' },
        },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Joel Ferrari' },
-          timestamp: 1,
+          emoji: '😂',
+          from: { isMe: true, id: '+14155552674', name: 'Amelia Briggs' },
        },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
        {
          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
+          from: { isMe: true, id: '+14155552677', name: 'Amelia Briggs' },
        },
+        { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      outgoing: true,
+      reactions: [
+        { emoji: '😂', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      outgoing: true,
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      outgoing: true,
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
        {
-          emoji: '😮',
-          from: { id: '+14155552671', name: 'Rick Owens' },
-          timestamp: 2,
+          emoji: '😂',
+          from: { isMe: true, id: '+14155552674', name: 'Amelia Briggs' },
        },
-      ]}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Multiple reactions, ours is most recent/common
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', isMe: true, name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Joel Ferrari' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😮',
-          from: { id: '+14155552671', name: 'Rick Owens' },
-          timestamp: 2,
-        },
-      ]}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', isMe: true, name: 'Joel Ferrari' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😮',
-          from: { id: '+14155552671', name: 'Rick Owens' },
-          timestamp: 2,
-        },
-      ]}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Multiple reactions, ours not on top
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Joel Ferrari' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😮',
-          from: { id: '+14155552671', isMe: true, name: 'Rick Owens' },
-          timestamp: 2,
-        },
-      ]}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Joel Ferrari' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😮',
-          from: { id: '+14155552671', isMe: true, name: 'Rick Owens' },
-          timestamp: 2,
-        },
-      ]}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-#### Small message
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
-  <div className="module-message-container">
-    <Message
-      direction="incoming"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="Burgertime!"
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Joel Ferrari' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😮',
-          from: { id: '+14155552671', name: 'Rick Owens' },
-          timestamp: 2,
-        },
-      ]}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="red"
-      timestamp={Date.now()}
-      text="Burgertime!"
-      i18n={util.i18n}
-      reactions={[
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Amelia Briggs' },
-          timestamp: 1,
-        },
-        {
-          emoji: '👍',
-          from: { id: '+14155552671', name: 'Joel Ferrari' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😡',
-          from: { id: '+14155552671', name: 'Adam Burrell' },
-          timestamp: 1,
-        },
-        {
-          emoji: '😮',
-          from: { id: '+14155552671', name: 'Rick Owens' },
-          timestamp: 2,
-        },
-      ]}
-    />
-  </div>
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      outgoing: true,
+      short: true,
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+        { emoji: '😡', from: { id: '+14155552677', name: 'Amelia Briggs' } },
+        { emoji: '👎', from: { id: '+14155552678', name: 'Amelia Briggs' } },
+        { emoji: '❤️', from: { id: '+14155552679', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      outgoing: true,
+      short: true,
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552674', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552675', name: 'Amelia Briggs' } },
+        { emoji: '😂', from: { id: '+14155552676', name: 'Amelia Briggs' } },
+      ],
+    },
+    {
+      outgoing: true,
+      short: true,
+      reactions: [
+        { emoji: '👍', from: { id: '+14155552671', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552672', name: 'Amelia Briggs' } },
+        { emoji: '👍', from: { id: '+14155552673', name: 'Amelia Briggs' } },
+      ],
+    },
+  ].map((spec, i) => (
+    <div key={i} className="module-message-container">
+      <Message
+        direction={spec.outgoing ? 'outgoing' : 'incoming'}
+        status="delivered"
+        authorColor="light_green"
+        timestamp={Date.now()}
+        text={
+          spec.short
+            ? 'hahaha'
+            : "I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
+        }
+        reactions={spec.reactions}
+        i18n={util.i18n}
+      />
+    </div>
+  ))}
 </util.ConversationContext>
 ```

--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import Measure from 'react-measure';
-import { clamp, groupBy, orderBy, take } from 'lodash';
+import { drop, groupBy, orderBy, take } from 'lodash';
 import { Manager, Popper, Reference } from 'react-popper';

 import { Avatar } from '../Avatar';
@ -161,11 +161,12 @@ interface State {
  isSelected: boolean;
  prevSelectedCounter: number;

-  reactionsHeight: number;
  reactionViewerRoot: HTMLDivElement | null;
  reactionPickerRoot: HTMLDivElement | null;

  isWide: boolean;
+
+  containerWidth: number;
 }

 const EXPIRATION_CHECK_MINIMUM = 2000;
@ -199,11 +200,12 @@ export class Message extends React.PureComponent<Props, State> {
      isSelected: props.isSelected,
      prevSelectedCounter: props.isSelectedCounter,

-      reactionsHeight: 0,
      reactionViewerRoot: null,
      reactionPickerRoot: null,

      isWide: this.wideMl.matches,
+
+      containerWidth: 0,
    };
  }

@ -370,6 +372,7 @@ export class Message extends React.PureComponent<Props, State> {
    }
  }

+  // tslint:disable-next-line cyclomatic-complexity
  public renderMetadata() {
    const {
      collapseMetadata,
@ -379,6 +382,7 @@ export class Message extends React.PureComponent<Props, State> {
      i18n,
      isSticker,
      isTapToViewExpired,
+      reactions,
      status,
      text,
      textPending,
@ -391,6 +395,7 @@ export class Message extends React.PureComponent<Props, State> {

    const isShowingImage = this.isShowingImage();
    const withImageNoCaption = Boolean(!isSticker && !text && isShowingImage);
+    const withReactions = reactions && reactions.length > 0;
    const showError = status === 'error' && direction === 'outgoing';
    const metadataDirection = isSticker ? undefined : direction;

@ -398,12 +403,13 @@ export class Message extends React.PureComponent<Props, State> {
      <div
        className={classNames(
          'module-message__metadata',
+          `module-message__metadata--${direction}`,
+          withReactions ? 'module-message__metadata--with-reactions' : null,
          withImageNoCaption
            ? 'module-message__metadata--with-image-no-caption'
            : null
        )}
      >
-        <span className="module-message__metadata__spacer" />
        {showError ? (
          <span
            className={classNames(
@ -991,9 +997,7 @@ export class Message extends React.PureComponent<Props, State> {
      return null;
    }

-    const { reactions } = this.props;
    const { reactionPickerRoot, isWide } = this.state;
-    const hasReactions = reactions && reactions.length > 0;

    const multipleAttachments = attachments && attachments.length > 1;
    const firstAttachment = attachments && attachments[0];
@ -1093,8 +1097,7 @@ export class Message extends React.PureComponent<Props, State> {
        <div
          className={classNames(
            'module-message__buttons',
-            `module-message__buttons--${direction}`,
-            hasReactions ? 'module-message__buttons--has-reactions' : null
+            `module-message__buttons--${direction}`
          )}
        >
          {ENABLE_REACTION_SEND ? reactButton : null}
@ -1524,16 +1527,43 @@ export class Message extends React.PureComponent<Props, State> {
      ['length', ([{ timestamp }]) => timestamp],
      ['desc', 'desc']
    );
-    // Take the first two groups for rendering
-    const toRender = take(ordered, 2).map(res => ({
+    // Take the first three groups for rendering
+    const toRender = take(ordered, 3).map(res => ({
      emoji: res[0].emoji,
+      count: res.length,
      isMe: res.some(re => Boolean(re.from.isMe)),
    }));
+    const someNotRendered = ordered.length > 3;
+    // We only drop two here because the third emoji would be replaced by the
+    // more button
+    const maybeNotRendered = drop(ordered, 2);
+    const maybeNotRenderedTotal = maybeNotRendered.reduce(
+      (sum, res) => sum + res.length,
+      0
+    );
+    const notRenderedIsMe =
+      someNotRendered &&
+      maybeNotRendered.some(res => res.some(re => Boolean(re.from.isMe)));

-    const reactionHeight = 32;
-    const { reactionsHeight: height, reactionViewerRoot } = this.state;
+    const { reactionViewerRoot, containerWidth } = this.state;

-    const offset = clamp((height - reactionHeight) / toRender.length, 4, 28);
+    // Calculate the width of the reactions container
+    const reactionsWidth = toRender.reduce((sum, res, i, arr) => {
+      if (someNotRendered && i === arr.length - 1) {
+        return sum + 28;
+      }
+
+      if (res.count > 1) {
+        return sum + 40;
+      }
+
+      return sum + 28;
+    }, 0);
+
+    const reactionsXAxisOffset = Math.max(
+      containerWidth - reactionsWidth - 6,
+      6
+    );

    const popperPlacement = outgoing ? 'bottom-end' : 'bottom-start';

@ -1541,58 +1571,83 @@ export class Message extends React.PureComponent<Props, State> {
      <Manager>
        <Reference>
          {({ ref: popperRef }) => (
-            <Measure
-              bounds={true}
-              onResize={({ bounds = { height: 0 } }) => {
-                this.setState({ reactionsHeight: bounds.height });
+            <div
+              ref={mergeRefs(this.reactionsContainerRef, popperRef)}
+              className={classNames(
+                'module-message__reactions',
+                outgoing
+                  ? 'module-message__reactions--outgoing'
+                  : 'module-message__reactions--incoming'
+              )}
+              style={{
+                [outgoing ? 'right' : 'left']: `${reactionsXAxisOffset}px`,
              }}
            >
-              {({ measureRef }) => (
-                <div
-                  ref={mergeRefs(
-                    this.reactionsContainerRef,
-                    measureRef,
-                    popperRef
-                  )}
-                  className={classNames(
-                    'module-message__reactions',
-                    outgoing
-                      ? 'module-message__reactions--outgoing'
-                      : 'module-message__reactions--incoming'
-                  )}
-                >
-                  {toRender.map((re, i) => (
-                    <button
-                      key={`${re.emoji}-${i}`}
-                      className={classNames(
-                        'module-message__reactions__reaction',
-                        outgoing
-                          ? 'module-message__reactions__reaction--outgoing'
-                          : 'module-message__reactions__reaction--incoming',
-                        re.isMe
-                          ? 'module-message__reactions__reaction--is-me'
-                          : null
-                      )}
-                      style={{
-                        top: `${i * offset}px`,
-                      }}
-                      onClick={e => {
+              {toRender.map((re, i) => {
+                const isLast = i === toRender.length - 1;
+                const isMore = isLast && someNotRendered;
+                const isMoreWithMe = isMore && notRenderedIsMe;
+
+                return (
+                  <button
+                    key={`${re.emoji}-${i}`}
+                    className={classNames(
+                      'module-message__reactions__reaction',
+                      re.count > 1
+                        ? 'module-message__reactions__reaction--with-count'
+                        : null,
+                      outgoing
+                        ? 'module-message__reactions__reaction--outgoing'
+                        : 'module-message__reactions__reaction--incoming',
+                      isMoreWithMe || (re.isMe && !isMoreWithMe)
+                        ? 'module-message__reactions__reaction--is-me'
+                        : null
+                    )}
+                    onClick={e => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      this.toggleReactionViewer();
+                    }}
+                    onKeyDown={e => {
+                      // Prevent enter key from opening stickers/attachments
+                      if (e.key === 'Enter') {
                        e.stopPropagation();
-                        this.toggleReactionViewer();
-                      }}
-                      onKeyDown={e => {
-                        // Prevent enter key from opening stickers/attachments
-                        if (e.key === 'Enter') {
-                          e.stopPropagation();
-                        }
-                      }}
-                    >
-                      <Emoji size={18} emoji={re.emoji} />
-                    </button>
-                  ))}
-                </div>
-              )}
-            </Measure>
+                      }
+                    }}
+                  >
+                    {isMore ? (
+                      <span
+                        className={classNames(
+                          'module-message__reactions__reaction__count',
+                          'module-message__reactions__reaction__count--no-emoji',
+                          isMoreWithMe
+                            ? 'module-message__reactions__reaction__count--is-me'
+                            : null
+                        )}
+                      >
+                        +{maybeNotRenderedTotal}
+                      </span>
+                    ) : (
+                      <React.Fragment>
+                        <Emoji size={16} emoji={re.emoji} />
+                        {re.count > 1 ? (
+                          <span
+                            className={classNames(
+                              'module-message__reactions__reaction__count',
+                              re.isMe
+                                ? 'module-message__reactions__reaction__count--is-me'
+                                : null
+                            )}
+                          >
+                            {re.count}
+                          </span>
+                        ) : null}
+                      </React.Fragment>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
          )}
        </Reference>
        {reactionViewerRoot &&
@ -1604,14 +1659,6 @@ export class Message extends React.PureComponent<Props, State> {
                  style={{
                    ...style,
                    zIndex: 2,
-                    marginTop: -(height - reactionHeight * 0.75),
-                    ...(outgoing
-                      ? {
-                          marginRight: reactionHeight * -0.375,
-                        }
-                      : {
-                          marginLeft: reactionHeight * -0.375,
-                        }),
                  }}
                  reactions={reactions}
                  i18n={i18n}
@ -1816,6 +1863,7 @@ export class Message extends React.PureComponent<Props, State> {
      isTapToView,
      isTapToViewExpired,
      isTapToViewError,
+      reactions,
    } = this.props;
    const { isSelected } = this.state;

@ -1844,6 +1892,9 @@ export class Message extends React.PureComponent<Props, State> {
        : null,
      isTapToViewError
        ? 'module-message__container--with-tap-to-view-error'
+        : null,
+      reactions && reactions.length > 0
+        ? 'module-message__container--with-reactions'
        : null
    );
    const containerStyles = {
@ -1851,11 +1902,24 @@ export class Message extends React.PureComponent<Props, State> {
    };

    return (
-      <div className={containerClassnames} style={containerStyles}>
-        {this.renderAuthor()}
-        {this.renderContents()}
-        {this.renderAvatar()}
-      </div>
+      <Measure
+        bounds={true}
+        onResize={({ bounds = { width: 0 } }) => {
+          this.setState({ containerWidth: bounds.width });
+        }}
+      >
+        {({ measureRef }) => (
+          <div
+            ref={measureRef}
+            className={containerClassnames}
+            style={containerStyles}
+          >
+            {this.renderAuthor()}
+            {this.renderContents()}
+            {this.renderAvatar()}
+          </div>
+        )}
+      </Measure>
    );
  }

--- a/ts/state/ducks/conversations.ts
+++ b/ts/state/ducks/conversations.ts
@ -61,6 +61,20 @@ export type MessageType = {
      pending: boolean;
    };
  };
+  unread: boolean;
+  reactions?: Array<{
+    emoji: string;
+    timestamp: number;
+    from: {
+      id: string;
+      color?: string;
+      avatarPath?: string;
+      name?: string;
+      profileName?: string;
+      isMe?: boolean;
+      phoneNumber?: string;
+    };
+  }>;

  // No need to go beyond this; unused at this stage, since this goes into
  //   a reducer still in plain JavaScript and comes out well-formed
@ -573,6 +587,14 @@ function hasMessageHeightChanged(
    return true;
  }

+  const currentReactions = message.reactions || [];
+  const lastReactions = previous.reactions || [];
+  const reactionsChanged =
+    (currentReactions.length === 0) !== (lastReactions.length === 0);
+  if (reactionsChanged) {
+    return true;
+  }
+
  return false;
 }

--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@ -9250,17 +9250,17 @@
    "rule": "React-createRef",
    "path": "ts/components/conversation/Message.tsx",
    "line": "  public audioRef: React.RefObject<HTMLAudioElement> = React.createRef();",
-    "lineNumber": 176,
+    "lineNumber": 177,
    "reasonCategory": "usageTrusted",
-    "updated": "2020-01-21T23:01:37.636Z"
+    "updated": "2020-02-03T17:18:39.600Z"
  },
  {
    "rule": "React-createRef",
    "path": "ts/components/conversation/Message.tsx",
    "line": "  > = React.createRef();",
-    "lineNumber": 180,
+    "lineNumber": 181,
    "reasonCategory": "usageTrusted",
-    "updated": "2020-01-21T23:01:37.636Z"
+    "updated": "2020-02-03T17:18:39.600Z"
  },
  {
    "rule": "React-createRef",