Change sending->sent state to match new designs

For element-hq/element-web#16424

res/css/views/rooms/_EventTile.scss

@@ -213,21 +213,34 @@ $left-gutter: 64px;
     color: $accent-fg-color;
 }
 
-.mx_EventTile_encrypting {
-    color: $event-encrypting-color !important;
+.mx_EventTile_notSent {
+    color: $event-notsent-color;
 }
 
-.mx_EventTile_sending {
-    color: $event-sending-color;
-}
+.mx_EventTile_receiptSent,
+.mx_EventTile_receiptSending {
+    // We don't use `position: relative` on the element because then it won't line
+    // up with the other read receipts
 
-.mx_EventTile_sending .mx_UserPill,
-.mx_EventTile_sending .mx_RoomPill {
-    opacity: 0.5;
+    &::before {
+        background-color: $tertiary-fg-color;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 14px;
+        width: 14px;
+        height: 14px;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
 }
-
-.mx_EventTile_notSent {
-    color: $event-notsent-color;
+.mx_EventTile_receiptSent::before {
+    mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+}
+.mx_EventTile_receiptSending::before {
+    mask-image: url('$(res)/img/element-icons/circle-sending.svg');
 }
 
 .mx_EventTile_contextual {

res/themes/dark/css/_dark.scss

@@ -137,9 +137,6 @@ $panel-divider-color: transparent;
 $widget-menu-bar-bg-color: $header-panel-bg-color;
 $widget-body-bg-color: rgba(141, 151, 165, 0.2);
 
-// event tile lifecycle
-$event-sending-color: $text-secondary-color;
-
 // event redaction
 $event-redacted-fg-color: #606060;
 $event-redacted-border-color: #000000;

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -132,9 +132,6 @@ $panel-divider-color: $header-panel-border-color;
 $widget-menu-bar-bg-color: $header-panel-bg-color;
 $widget-body-bg-color: #1A1D23;
 
-// event tile lifecycle
-$event-sending-color: $text-secondary-color;
-
 // event redaction
 $event-redacted-fg-color: #606060;
 $event-redacted-border-color: #000000;

res/themes/legacy-light/css/_legacy-light.scss

@@ -222,8 +222,6 @@ $widget-body-bg-color: #fff;
 $yellow-background: #fff8e3;
 
 // event tile lifecycle
-$event-encrypting-color: #abddbc;
-$event-sending-color: #ddd;
 $event-notsent-color: #f44;
 
 $event-highlight-fg-color: $warning-color;

res/themes/light/css/_light.scss

@@ -222,8 +222,6 @@ $widget-body-bg-color: #FFF;
 $yellow-background: #fff8e3;
 
 // event tile lifecycle
-$event-encrypting-color: #abddbc;
-$event-sending-color: #ddd;
 $event-notsent-color: #f44;
 
 $event-highlight-fg-color: $warning-color;

src/components/views/messages/EditHistoryMessage.js

@@ -158,6 +158,7 @@ export default class EditHistoryMessage extends React.PureComponent {
         const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
         const classes = classNames({
             "mx_EventTile": true,
+            // Note: we keep these sending state classes for tests, not for our styles
             "mx_EventTile_sending": isSending,
             "mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
         });

src/components/views/rooms/EventTile.js

@@ -454,8 +454,26 @@ export default class EventTile extends React.Component {
     };
 
     getReadAvatars() {
-        // return early if there are no read receipts
+        // return early if there are no read receipts, with our message state if applicable
         if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
+            const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+            const myUserId = MatrixClientPeg.get().getUserId();
+            if (this.props.mxEvent.getSender() === myUserId && room) {
+                // We only search for the most recent 50 events because surely someone will have
+                // sent *something* in that time, even if it is a membership event or something.
+                const readUsers = room.getUsersWhoHaveRead(this.props.mxEvent, 50);
+                const hasBeenRead = readUsers.length === 0 || readUsers.some(u => u !== myUserId);
+                console.log(room.getUsersReadUpTo(this.props.mxEvent));
+                let receipt = null;
+                if (!this.props.eventSendStatus || this.props.eventSendStatus === 'sent') {
+                    if (!hasBeenRead) {
+                        receipt = <span className='mx_EventTile_receiptSent' />;
+                    }
+                } else {
+                    receipt = <span className='mx_EventTile_receiptSending' />;
+                }
+                return <span className="mx_EventTile_readAvatars">{receipt}</span>;
+            }
             return (<span className="mx_EventTile_readAvatars" />);
         }
 
@@ -692,6 +710,7 @@ export default class EventTile extends React.Component {
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,
             mx_EventTile_12hr: this.props.isTwelveHour,
+            // Note: we keep these sending state classes for tests, not for our styles
             mx_EventTile_encrypting: this.props.eventSendStatus === 'encrypting',
             mx_EventTile_sending: !isEditing && isSending,
             mx_EventTile_notSent: this.props.eventSendStatus === 'not_sent',