diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json index 6994476..b77fbb1 100644 --- a/packages/concordia-app/public/locales/en/translation.json +++ b/packages/concordia-app/public/locales/en/translation.json @@ -90,8 +90,8 @@ "topic.poll.invalid.data.header": "This topic has a poll but the data are untrusted!", "topic.poll.invalid.data.sub.header": "The poll data downloaded from the poster have been tampered with.", "topic.poll.tab.graph.title": "Results", - "topic.poll.tab.results.votes.count": "Total votes: {{totalVotes}}", - "topic.poll.tab.results.user.vote": "You voted: {{userVote}}", + "topic.poll.tab.results.votes": "Votes", + "topic.poll.tab.results.user.vote": "You voted: ", "topic.poll.tab.vote.no.changes": "This poll does not allow vote changes.", "topic.poll.tab.vote.form.button.submit": "Submit", "topic.poll.tab.vote.form.button.unvote": "Remove Vote", diff --git a/packages/concordia-app/src/components/PollView/PollGraph/PollChartDonut/index.jsx b/packages/concordia-app/src/components/PollView/PollGraph/PollChartDonut/index.jsx index 2f7ddbe..03acf4f 100644 --- a/packages/concordia-app/src/components/PollView/PollGraph/PollChartDonut/index.jsx +++ b/packages/concordia-app/src/components/PollView/PollGraph/PollChartDonut/index.jsx @@ -9,6 +9,12 @@ const PollChartDonut = (props) => { const chartOptions = useMemo(() => ({ chart: { id: 'chart-donut', + toolbar: { + show: true, + tools: { + download: true, + }, + }, }, theme: { palette: 'palette8', diff --git a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx index 7b77ec5..4d3c530 100644 --- a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx +++ b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx @@ -1,5 +1,5 @@ import React, { useMemo } from 'react'; -import { Grid, Header, Tab } from 'semantic-ui-react'; +import { Grid, Statistic, Tab } from 'semantic-ui-react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import PollChartBar from './PollChartBar'; @@ -12,19 +12,18 @@ const PollGraph = (props) => { const footer = useMemo(() => ( <> - {' '} -
- {t('topic.poll.tab.results.votes.count', { - totalVotes: voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0), - })} -
+ + + {voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0)} + + {t('topic.poll.tab.results.votes')} + {userVoteIndex !== -1 && ( -
- {t('topic.poll.tab.results.user.vote', { - userVote: pollOptions[userVoteIndex], - })} -
+
+ {t('topic.poll.tab.results.user.vote')} + {pollOptions[userVoteIndex]} +
)} ), [pollOptions, t, userVoteIndex, voteCounts]); diff --git a/packages/concordia-app/src/components/PollView/PollGraph/styles.css b/packages/concordia-app/src/components/PollView/PollGraph/styles.css index 3e86acd..a2c3d42 100644 --- a/packages/concordia-app/src/components/PollView/PollGraph/styles.css +++ b/packages/concordia-app/src/components/PollView/PollGraph/styles.css @@ -2,7 +2,3 @@ box-shadow: none; border: none; } - -#topic-poll-container h4 { - margin-top: 0.5rem; -} diff --git a/packages/concordia-app/src/components/PollView/PollVote/index.jsx b/packages/concordia-app/src/components/PollView/PollVote/index.jsx index b1ac786..66e55d8 100644 --- a/packages/concordia-app/src/components/PollView/PollVote/index.jsx +++ b/packages/concordia-app/src/components/PollView/PollVote/index.jsx @@ -1,11 +1,12 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; -import { Button, Form, Header } from 'semantic-ui-react'; +import { Button, Form } from 'semantic-ui-react'; import { useTranslation } from 'react-i18next'; import { VOTING_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames'; import { drizzle } from '../../../redux/store'; import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../../constants/TransactionStatus'; +import './styles.css'; const { contracts: { [VOTING_CONTRACT]: { methods: { vote } } } } = drizzle; @@ -52,11 +53,10 @@ const PollVote = (props) => { if (hasUserVoted && !enableVoteChanges) { return ( <> -
- {t('topic.poll.tab.results.user.vote', { - userVote: pollOptions[userVoteIndex], - })} -
+
+ {t('topic.poll.tab.results.user.vote')} + {pollOptions[userVoteIndex]} +
{t('topic.poll.tab.vote.no.changes')}
@@ -73,6 +73,7 @@ const PollVote = (props) => { key={pollOption} label={pollOption} value={index} + className={index === userVoteIndex ? 'poll-voted-option' : null} checked={index === selectedOptionIndex} disabled={voting} onChange={onOptionSelected} diff --git a/packages/concordia-app/src/components/PollView/PollVote/styles.css b/packages/concordia-app/src/components/PollView/PollVote/styles.css new file mode 100644 index 0000000..2d06c43 --- /dev/null +++ b/packages/concordia-app/src/components/PollView/PollVote/styles.css @@ -0,0 +1,3 @@ +.poll-voted-option{ + font-weight: bold; +}