fix: minor poll view improvements

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.votes": "Votes",
-  "topic.poll.tab.results.user.vote": "You voted: {{userVote}}",
+  "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",

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',

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(() => (
       <>
-          {' '}
+          <Statistic size="mini">
-          <Header as="h4">
+              <Statistic.Value>
-              {t('topic.poll.tab.results.votes.count', {
+                  {voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0)}
-                totalVotes: voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0),
+              </Statistic.Value>
-              })}
+              <Statistic.Label>{t('topic.poll.tab.results.votes')}</Statistic.Label>
-          </Header>
+          </Statistic>
           {userVoteIndex !== -1
           && (
-              <Header as="h4">
+              <div>
-                  {t('topic.poll.tab.results.user.vote', {
+                  {t('topic.poll.tab.results.user.vote')}
-                    userVote: pollOptions[userVoteIndex],
+                  <span className="poll-voted-option">{pollOptions[userVoteIndex]}</span>
-                  })}
+              </div>
-              </Header>
           )}
       </>
   ), [pollOptions, t, userVoteIndex, voteCounts]);

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;
-}

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 (
         <>
-            <Header as="h4">
+            <div>
-                {t('topic.poll.tab.results.user.vote', {
+                {t('topic.poll.tab.results.user.vote')}
-                  userVote: pollOptions[userVoteIndex],
+                <span className="poll-voted-option">{pollOptions[userVoteIndex]}</span>
-                })}
+            </div>
-            </Header>
             <div>
                 {t('topic.poll.tab.vote.no.changes')}
             </div>
@@ -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}

packages/concordia-app/src/components/PollView/PollVote/styles.css

@@ -0,0 +1,3 @@
+.poll-voted-option{
+    font-weight: bold;
+}