extract poll option display components

cypress/e2e/polls/polls.spec.ts

@@ -54,12 +54,12 @@ describe("Polls", () => {
     };
 
     const getPollOption = (pollId: string, optionText: string): Chainable<JQuery> => {
-        return getPollTile(pollId).contains(".mx_MPollBody_option .mx_StyledRadioButton", optionText);
+        return getPollTile(pollId).contains(".mx_PollOption .mx_StyledRadioButton", optionText);
     };
 
     const expectPollOptionVoteCount = (pollId: string, optionText: string, votes: number): void => {
         getPollOption(pollId, optionText).within(() => {
-            cy.get(".mx_MPollBody_optionVoteCount").should("contain", `${votes} vote`);
+            cy.get(".mx_PollOption_optionVoteCount").should("contain", `${votes} vote`);
         });
     };
 

res/css/_components.pcss

@@ -33,6 +33,7 @@
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
 @import "./components/views/pips/_WidgetPip.pcss";
+@import "./components/views/polls/_PollOption.pcss";
 @import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
 @import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";

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

@@ -0,0 +1,109 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_PollOption {
+    border: 1px solid $quinary-content;
+    border-radius: 8px;
+    padding: 6px 12px;
+    max-width: 550px;
+    background-color: $background;
+
+    .mx_StyledRadioButton_content,
+    .mx_PollOption_endedOption {
+        padding-top: 2px;
+        margin-right: 0px;
+    }
+
+    .mx_StyledRadioButton_spacer {
+        display: none;
+    }
+}
+
+.mx_PollOption,
+/* label has cursor: default in user-agent stylesheet */
+/* override */
+.mx_PollOption_live-option {
+    cursor: pointer;
+}
+
+.mx_PollOption_content {
+    display: flex;
+    justify-content: space-between;
+}
+
+.mx_PollOption_optionVoteCount {
+    color: $secondary-content;
+    font-size: $font-12px;
+    white-space: nowrap;
+}
+
+.mx_PollOption_winnerIcon {
+    height: 12px;
+    width: 12px;
+    color: $accent;
+    margin-right: $spacing-4;
+    vertical-align: middle;
+}
+
+.mx_PollOption_checked {
+    border-color: $accent;
+
+    .mx_PollOption_popularityBackground {
+        .mx_PollOption_popularityAmount {
+            background-color: $accent;
+        }
+    }
+
+    // override checked radio button styling
+    // to show checkmark instead
+    .mx_StyledRadioButton_checked {
+        input[type="radio"] + div {
+            border-width: 2px;
+            border-color: $accent;
+            background-color: $accent;
+            background-image: url("$(res)/img/element-icons/check-white.svg");
+            background-size: 12px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            div {
+                visibility: hidden;
+            }
+        }
+    }
+}
+
+/* options not actionable in these states */
+.mx_PollOption_checked,
+.mx_PollOption_ended {
+    pointer-events: none;
+}
+
+.mx_PollOption_popularityBackground {
+    width: 100%;
+    height: 8px;
+    margin-right: 12px;
+    border-radius: 8px;
+    background-color: $system;
+    margin-top: $spacing-8;
+
+    .mx_PollOption_popularityAmount {
+        width: 0%;
+        height: 8px;
+        border-radius: 8px;
+        background-color: $quaternary-content;
+    }
+}

res/css/views/messages/_MPollBody.pcss

@@ -47,108 +47,6 @@ limitations under the License.
         mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
     }
 
-    .mx_MPollBody_option {
-        border: 1px solid $quinary-content;
-        border-radius: 8px;
-        margin-bottom: 16px;
-        padding: 6px 12px;
-        max-width: 550px;
-        background-color: $background;
-
-        .mx_StyledRadioButton,
-        .mx_MPollBody_endedOption {
-            margin-bottom: 8px;
-        }
-
-        .mx_StyledRadioButton_content,
-        .mx_MPollBody_endedOption {
-            padding-top: 2px;
-            margin-right: 0px;
-        }
-
-        .mx_StyledRadioButton_spacer {
-            display: none;
-        }
-
-        .mx_MPollBody_optionDescription {
-            display: flex;
-            justify-content: space-between;
-
-            .mx_MPollBody_optionVoteCount {
-                color: $secondary-content;
-                font-size: $font-12px;
-                white-space: nowrap;
-            }
-        }
-
-        .mx_MPollBody_popularityBackground {
-            width: 100%;
-            height: 8px;
-            margin-right: 12px;
-            border-radius: 8px;
-            background-color: $system;
-
-            .mx_MPollBody_popularityAmount {
-                width: 0%;
-                height: 8px;
-                border-radius: 8px;
-                background-color: $quaternary-content;
-            }
-        }
-    }
-
-    .mx_MPollBody_option:last-child {
-        margin-bottom: 8px;
-    }
-
-    .mx_MPollBody_option_checked {
-        border-color: $accent;
-
-        .mx_MPollBody_popularityBackground {
-            .mx_MPollBody_popularityAmount {
-                background-color: $accent;
-            }
-        }
-    }
-
-    /* options not actionable in these states */
-    .mx_MPollBody_option_checked,
-    .mx_MPollBody_option_ended {
-        pointer-events: none;
-    }
-
-    .mx_StyledRadioButton_checked,
-    .mx_MPollBody_endedOptionWinner {
-        input[type="radio"] + div {
-            border-width: 2px;
-            border-color: $accent;
-            background-color: $accent;
-            background-image: url("$(res)/img/element-icons/check-white.svg");
-            background-size: 12px;
-            background-repeat: no-repeat;
-            background-position: center;
-
-            div {
-                visibility: hidden;
-            }
-        }
-    }
-
-    .mx_MPollBody_endedOptionWinner .mx_MPollBody_optionDescription .mx_MPollBody_optionVoteCount::before {
-        content: "";
-        position: relative;
-        display: inline-block;
-        margin-right: 4px;
-        top: 2px;
-        height: 12px;
-        width: 12px;
-        background-color: $accent;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-        mask-image: url("$(res)/img/element-icons/trophy.svg");
-    }
-
     .mx_MPollBody_totalVotes {
         display: flex;
         flex-direction: inline;
@@ -168,9 +66,8 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_MPollBody_option,
-/* label has cursor: default in user-agent stylesheet */
-/* override */
-.mx_MPollBody_live-option {
-    cursor: pointer;
+.mx_MPollBody_allOptions {
+    display: grid;
+    grid-gap: $spacing-16;
+    margin-bottom: $spacing-8;
 }