Move styling of results dialog to css

res/css/_components.pcss

@@ -18,6 +18,7 @@
 @import "./components/views/dialogs/polls/_PollDetailHeader.pcss";
 @import "./components/views/dialogs/polls/_PollListItem.pcss";
 @import "./components/views/dialogs/polls/_PollListItemEnded.pcss";
+@import "./components/views/dialogs/polls/_PollResultsDialog.pcss";
 @import "./components/views/elements/_AppPermission.pcss";
 @import "./components/views/elements/_AppWarning.pcss";
 @import "./components/views/elements/_FilterDropdown.pcss";

res/css/components/views/dialogs/polls/_PollResultsDialog.pcss

@@ -0,0 +1,24 @@
+.mx_AnswerEntry:not(:last-child) {
+    margin-bottom: $spacing-8;
+}
+
+.mx_AnswerEntry_Header {
+    display: flex;
+    align-items: center;
+    margin-bottom: $spacing-8;
+}
+
+.mx_AnswerEntry_Header_answerName {
+    font-weight: bolder;
+    flex-grow: 1
+}
+
+.mx_VoterEntry {
+    display: flex;
+    align-items: center;
+    margin-left: $spacing-16;
+}
+
+.mx_VoterEntry_AvatarWrapper {
+    margin-right: $spacing-8;
+}

src/components/views/dialogs/PollResultsDialog.tsx

@@ -51,15 +51,19 @@ function AnswerEntry(props: {
 }): JSX.Element {
     const { answer, members, votes } = props;
     return (
-        <div key={answer.id}>
+        <div key={answer.id} className="mx_AnswerEntry">
-            <div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
+            <div className="mx_AnswerEntry_Header">
-                <span style={{fontWeight: "bolder", flexGrow: 1}}>{answer.text}</span>
+                <span className="mx_AnswerEntry_Header_answerName">{answer.text}</span>
                 <span>{votes.length} votes</span>
             </div>
             {votes.length === 0 && <div>No one voted for this.</div>}
             {votes.map((vote) => {
                 const member = members.find(m => m.userId === vote.sender);
-                if(member) return <VoterEntry key={vote.sender} vote={vote} member={member} />;
+                if (member) return <VoterEntry
+                    key={vote.sender}
+                    vote={vote}
+                    member={member}
+                />;
             })}
         </div>
     );
@@ -67,8 +71,8 @@ function AnswerEntry(props: {
 
 function VoterEntry(props: { vote: UserVote; member: RoomMember }): JSX.Element {
     const { vote, member } = props;
-    return <div key={vote.sender} style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
+    return <div key={vote.sender} className="mx_VoterEntry">
-        <div style={{marginRight: "10px"}}>
+        <div className="mx_VoterEntry_AvatarWrapper">
             <MemberAvatar member={member} size="36px" aria-hidden="true" />
         </div>
         {member.name}