From 299e60f720df7d813337dabcbfda1ac54393efa6 Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Wed, 7 Apr 2021 15:14:53 +0300
Subject: [PATCH] fix: minor poll view improvements

---
 .../public/locales/en/translation.json        |  4 ++--
 .../PollGraph/PollChartDonut/index.jsx        |  6 +++++
 .../components/PollView/PollGraph/index.jsx   | 23 +++++++++----------
 .../components/PollView/PollGraph/styles.css  |  4 ----
 .../components/PollView/PollVote/index.jsx    | 13 ++++++-----
 .../components/PollView/PollVote/styles.css   |  3 +++
 6 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 packages/concordia-app/src/components/PollView/PollVote/styles.css

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