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

@@ -21,7 +21,7 @@ interface IProps {
     members: RoomMember[];
 }
 
-export default function PollResultsDialog (props: IProps): JSX.Element {
+export default function PollResultsDialog(props: IProps): JSX.Element {
     return (
         <BaseDialog
             title={props.pollEvent.question.text}
@@ -30,7 +30,7 @@ export default function PollResultsDialog (props: IProps): JSX.Element {
             {
                 props.pollEvent.answers.map((answer) => {
                     const votes = props.votes.get(answer.id) || [];
-                    if(votes.length === 0) return;
+                    if (votes.length === 0) return;
 
                     return <AnswerEntry
                         key={answer.id}
@@ -49,26 +49,30 @@ function AnswerEntry(props: {
     members: RoomMember[];
     votes: UserVote[];
 }): JSX.Element {
-    const {answer, members, votes} = props;
+    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>
     );
 }
 
-function VoterEntry(props: {vote: UserVote; member: RoomMember}): JSX.Element {
+function VoterEntry(props: { vote: UserVote; member: RoomMember }): JSX.Element {
-    const {vote, member} = props;
+    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}