Update polls UX to match EX Mobile

res/css/_components.pcss

@@ -238,7 +238,6 @@
 @import "./views/messages/_MLocationBody.pcss";
 @import "./views/messages/_MNoticeBody.pcss";
 @import "./views/messages/_MPollBody.pcss";
-@import "./views/messages/_MPollEndBody.pcss";
 @import "./views/messages/_MStickerBody.pcss";
 @import "./views/messages/_MTextBody.pcss";
 @import "./views/messages/_MVideoBody.pcss";

res/css/components/views/polls/_PollOption.pcss

@@ -50,20 +50,18 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_PollOption_checked {
-    border-color: var(--cpd-color-border-interactive-hovered);
-
     .mx_PollOption_popularityBackground {
         .mx_PollOption_popularityAmount {
-            background-color: var(--cpd-color-icon-accent-tertiary);
+            background-color: var(--cpd-color-icon-primary);
         }
     }
 
     /* override checked radio button styling to show checkmark instead */
     .mx_StyledRadioButton_checked {
         input[type="radio"]:checked + div {
             border-width: 2px;
-            border-color: var(--cpd-color-icon-accent-tertiary);
-            background-color: var(--cpd-color-icon-accent-tertiary);
+            border-color: var(--cpd-color-icon-primary);
+            background-color: var(--cpd-color-icon-primary);
             background-image: url("@vector-im/compound-design-tokens/icons/check.svg");
             background-size: 12px;
             background-repeat: no-repeat;
@@ -76,6 +74,22 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+.mx_PollOption_ended.mx_PollOption_checked {
+    .mx_PollOption_popularityBackground {
+        .mx_PollOption_popularityAmount {
+            background-color: var(--cpd-color-icon-accent-tertiary);
+        }
+    }
+
+    /* override checked radio button styling to show checkmark instead */
+    .mx_StyledRadioButton_checked {
+        input[type="radio"]:checked + div {
+            border-color: var(--cpd-color-icon-accent-tertiary);
+            background-color: var(--cpd-color-icon-accent-tertiary);
+        }
+    }
+}
+
 /* options not actionable in these states */
 .mx_PollOption_checked,
 .mx_PollOption_ended {
@@ -94,6 +108,6 @@ Please see LICENSE files in the repository root for full details.
         width: 0%;
         height: 8px;
         border-radius: 8px;
-        background-color: $quaternary-content;
+        background-color: var(--cpd-color-icon-primary);
     }
 }

res/css/views/messages/_MPollBody.pcss

@@ -6,8 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+$poll-max-width: 550px;
+
 .mx_MPollBody {
-    margin-top: 8px;
+    margin-top: var(--cpd-space-2x);
     min-width: 0; /* Override fieldset default min-width: min-content */
     width: 100%; /* Ensure fieldset takes full available width */
     border: none; /* Remove default fieldset border */
@@ -18,8 +20,16 @@ Please see LICENSE files in the repository root for full details.
         font-size: $font-15px;
         line-height: $font-24px;
         margin-top: 0;
-        margin-bottom: 8px;
+        margin-bottom: var(--cpd-space-2x);
         letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
+        display: flex;
+        align-items: center;
+        gap: var(--cpd-space-3x);
+
+        svg {
+            flex-shrink: 0;
+            color: var(--cpd-color-icon-primary);
+        }
 
         .mx_MPollBody_edited {
             color: $roomtopic-color;
@@ -28,28 +38,13 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    legend::before {
-        content: "";
-        position: relative;
-        display: inline-block;
-        margin-right: 12px;
-        top: 3px;
-        left: 3px;
-        height: 20px;
-        width: 20px;
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-        mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
-    }
-
     .mx_MPollBody_totalVotes {
         display: flex;
         flex-direction: inline;
-        justify-content: start;
+        justify-content: end;
         color: $secondary-content;
         font-size: $font-12px;
+        max-width: $poll-max-width;
 
         .mx_Spinner {
             flex: 0;
@@ -67,5 +62,5 @@ Please see LICENSE files in the repository root for full details.
     display: grid;
     gap: $spacing-16;
     margin-bottom: $spacing-8;
-    max-width: 550px;
+    max-width: $poll-max-width;
 }

res/css/views/rooms/_EventBubbleTile.pcss

@@ -355,11 +355,6 @@ Please see LICENSE files in the repository root for full details.
             /* Keep height equal to text for shield alignment, additional 2px because of 1px padding on text */
             height: calc($font-18px + 2px);
         }
-
-        .mx_MPollEndBody {
-            /* Prevent the poll end body from exceeding the tile width */
-            width: 100%;
-        }
     }
 
     &:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {

src/components/views/messages/MPollBody.tsx

@@ -22,6 +22,8 @@ import {
 import { RelatedRelations } from "matrix-js-sdk/src/models/related-relations";
 import { type PollStartEvent, type PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollResponseEvent";
+import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
+import PollsEndIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls-end";
 
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -324,14 +326,18 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
             <span className="mx_MPollBody_edited"> ({_t("common|edited")})</span>
         ) : null;
 
+        const PollIcon = poll.isEnded ? PollsEndIcon : PollsIcon;
+        const pollLabel = poll.isEnded ? _t("poll|ended_poll_label") : _t("poll|poll_label");
+
         return (
             <fieldset className="mx_MPollBody">
                 <legend data-testid="pollQuestion">
+                    <PollIcon width="20" height="20" aria-label={pollLabel} />
                     {pollEvent.question.text}
                     {editedSpan}
                 </legend>
                 <div className="mx_MPollBody_allOptions">
-                    {pollEvent.answers.map((answer: PollAnswerSubevent) => {
+                    {pollEvent.answers.map((answer: PollAnswerSubevent, index: number) => {
                         let answerVotes = 0;
 
                         if (showResults) {
@@ -346,6 +352,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
                                 key={answer.id}
                                 pollId={pollId}
                                 answer={answer}
+                                optionNumber={index + 1}
                                 isChecked={checked}
                                 isEnded={poll.isEnded}
                                 voteCount={answerVotes}

src/components/views/messages/MessageEvent.tsx

@@ -15,7 +15,6 @@ import {
     MatrixEventEvent,
     M_BEACON_INFO,
     M_LOCATION,
-    M_POLL_END,
     M_POLL_START,
     type IContent,
 } from "matrix-js-sdk/src/matrix";
@@ -34,7 +33,6 @@ import MVoiceOrAudioBody from "./MVoiceOrAudioBody";
 import MVideoBody from "./MVideoBody";
 import MStickerBody from "./MStickerBody";
 import MPollBody from "./MPollBody";
-import { MPollEndBody } from "./MPollEndBody";
 import MLocationBody from "./MLocationBody";
 import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
@@ -75,8 +73,6 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
     [EventType.Sticker, MStickerBody],
     [M_POLL_START.name, MPollBody],
     [M_POLL_START.altName, MPollBody],
-    [M_POLL_END.name, MPollEndBody],
-    [M_POLL_END.altName, MPollEndBody],
     [M_BEACON_INFO.name, MBeaconBody],
     [M_BEACON_INFO.altName, MBeaconBody],
 ]);