diff --git a/res/css/_components.pcss b/res/css/_components.pcss index c0dd2ee0b0..15dededcd3 100644 --- a/res/css/_components.pcss +++ b/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"; diff --git a/res/css/components/views/dialogs/polls/_PollResultsDialog.pcss b/res/css/components/views/dialogs/polls/_PollResultsDialog.pcss new file mode 100644 index 0000000000..3e349c33ea --- /dev/null +++ b/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; +} diff --git a/src/components/views/dialogs/PollResultsDialog.tsx b/src/components/views/dialogs/PollResultsDialog.tsx index f1c57fac17..9367c143c2 100644 --- a/src/components/views/dialogs/PollResultsDialog.tsx +++ b/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 ( { const votes = props.votes.get(answer.id) || []; - if(votes.length === 0) return; + if (votes.length === 0) return; return -
- {answer.text} +
+
+ {answer.text} {votes.length} votes
{votes.length === 0 &&
No one voted for this.
} {votes.map((vote) => { const member = members.find(m => m.userId === vote.sender); - if(member) return ; + if (member) return ; })}
); } -function VoterEntry(props: {vote: UserVote; member: RoomMember}): JSX.Element { - const {vote, member} = props; - return
-
+function VoterEntry(props: { vote: UserVote; member: RoomMember }): JSX.Element { + const { vote, member } = props; + return
+
{member.name}