From 3730cb4653c8535aee9d07502b4e4f36570d4726 Mon Sep 17 00:00:00 2001
From: Tim Vahlbrock <tim@vahlbrock.de>
Date: Fri, 1 Nov 2024 12:47:14 +0100
Subject: [PATCH] Move poll option styling to css file

---
 .../components/views/polls/_PollOption.pcss   |  8 +++++++
 src/components/views/polls/PollOption.tsx     | 23 +++++++++----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss
index 4ef6c22522..0060906e30 100644
--- a/res/css/components/views/polls/_PollOption.pcss
+++ b/res/css/components/views/polls/_PollOption.pcss
@@ -35,6 +35,14 @@ Please see LICENSE files in the repository root for full details.
     justify-content: space-between;
 }
 
+.mx_PollOption_votesWrapper {
+    display: flex;
+}
+
+.mx_PollOption_facePile {
+    margin-right: $spacing-8
+}
+
 .mx_PollOption_optionVoteCount {
     color: $secondary-content;
     font-size: $font-12px;
diff --git a/src/components/views/polls/PollOption.tsx b/src/components/views/polls/PollOption.tsx
index 47c805e718..a2030a78ac 100644
--- a/src/components/views/polls/PollOption.tsx
+++ b/src/components/views/polls/PollOption.tsx
@@ -33,22 +33,21 @@ const PollOptionContent: React.FC<PollOptionContentProps> = ({ isWinner, answer,
     return (
         <div className="mx_PollOption_content">
             <div className="mx_PollOption_optionText">{answer.text}</div>
-            <div>
-                <div style={{ display: "flex" }}>
-                    {displayVoteCount
-                        && members.length <= MAXIMUM_MEMBERS_FOR_FACE_PILE
-                        && <FacePile
+            <div className="mx_PollOption_votesWrapper">
+                {displayVoteCount
+                    && members.length <= MAXIMUM_MEMBERS_FOR_FACE_PILE
+                    && <div className="mx_PollOption_facePile">
+                        <FacePile
                             members={members.filter((m) => votes.some((v) => v.sender === m.userId))}
                             size="24px"
                             overflow={false}
-                            style={{ marginRight: "10px" }}
                         />
-                    }
-                    <span className="mx_PollOption_optionVoteCount">
-                        {isWinner && <TrophyIcon className="mx_PollOption_winnerIcon" />}
-                        {votesText}
-                    </span>
-                </div>
+                    </div>
+                }
+                <span className="mx_PollOption_optionVoteCount">
+                    {isWinner && <TrophyIcon className="mx_PollOption_winnerIcon" />}
+                    {votesText}
+                </span>
             </div>
         </div>
     );