Change sending->sent state to match new designs

For https://github.com/vector-im/element-web/issues/16424

res/css/views/rooms/_EventTile.scss

@@ -213,23 +213,36 @@ $left-gutter: 64px;
     color: $accent-fg-color;
 }
 
-.mx_EventTile_encrypting {
-    color: $event-encrypting-color !important;
-}
-
-.mx_EventTile_sending {
-    color: $event-sending-color;
-}
-
-.mx_EventTile_sending .mx_UserPill,
-.mx_EventTile_sending .mx_RoomPill {
-    opacity: 0.5;
-}
-
 .mx_EventTile_notSent {
     color: $event-notsent-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
+
+    &::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_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 {
     opacity: 0.4;
 }

res/img/element-icons/circle-sending.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7.5" stroke="#8D99A5"/>
+</svg>

res/img/element-icons/circle-sent.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" fill="#8D99A5"/>
+<path d="M11.8697 4.95309C11.6784 4.7576 11.3597 4.74731 11.1578 4.93251L6.62066 9.04804L4.95244 7.91627C4.7293 7.77223 4.42116 7.77223 4.20865 7.95742C3.95363 8.1632 3.93238 8.5336 4.14489 8.78053L6.06813 10.9206C6.1 10.9515 6.13188 10.9926 6.17438 11.0132C6.53565 11.3013 7.07756 11.2498 7.37508 10.9L7.40695 10.8589L11.891 5.60128C12.0397 5.41608 12.0397 5.13828 11.8697 4.95309Z" fill="#8D99A5"/>
+</svg>

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',