From f991c2d9499063423b8e140e9e31aa59d1e2e6bb Mon Sep 17 00:00:00 2001
From: Lowhearth <hearthisinyourmind@gmail.com>
Date: Tue, 7 Apr 2020 07:03:51 +0200
Subject: [PATCH] Swap yes/no (voting) to Toggle (#2519)

* Swap yes/no voting to Toggle #1624

* Ordering Imports

* Explicit vote Button label

* Modal opening Vote Buttons with default background
---
 packages/page-council/src/Motions/Voting.tsx  |  1 +
 .../page-democracy/src/Overview/Voting.tsx    |  9 ++++---
 .../page-tech-comm/src/Proposals/Voting.tsx   |  2 +-
 .../page-treasury/src/Overview/Voting.tsx     |  2 +-
 packages/react-components/src/VoteActions.tsx |  7 ++++--
 packages/react-components/src/VoteToggle.tsx  | 25 ++++++++++---------
 6 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/page-council/src/Motions/Voting.tsx b/packages/page-council/src/Motions/Voting.tsx
index b8becdd1ac..f82510203b 100644
--- a/packages/page-council/src/Motions/Voting.tsx
+++ b/packages/page-council/src/Motions/Voting.tsx
@@ -62,6 +62,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
           </Modal.Content>
           <VoteActions
             accountId={accountId}
+            aye={voteValue}
             onClick={toggleVoting}
             params={[hash, idNumber, voteValue]}
             tx='council.vote'
diff --git a/packages/page-democracy/src/Overview/Voting.tsx b/packages/page-democracy/src/Overview/Voting.tsx
index e813a0e8a4..1f7f13af48 100644
--- a/packages/page-democracy/src/Overview/Voting.tsx
+++ b/packages/page-democracy/src/Overview/Voting.tsx
@@ -78,10 +78,6 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
                 onChange={setBalance}
               />
             )}
-            <VoteToggle
-              onChange={_onChangeVote}
-              value={aye}
-            />
             <Dropdown
               help={t('The conviction to use for this vote, with an appropriate lock period.')}
               label={t('conviction')}
@@ -89,9 +85,14 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
               options={convictionOpts}
               value={conviction}
             />
+            <VoteToggle
+              onChange={_onChangeVote}
+              value={aye}
+            />
           </Modal.Content>
           <VoteActions
             accountId={accountId}
+            aye={aye}
             isDisabled={isCurrentVote ? !balance : false}
             onClick={toggleVoting}
             params={
diff --git a/packages/page-tech-comm/src/Proposals/Voting.tsx b/packages/page-tech-comm/src/Proposals/Voting.tsx
index 1721c67b73..68a4660fa5 100644
--- a/packages/page-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/page-tech-comm/src/Proposals/Voting.tsx
@@ -53,6 +53,7 @@ function Voting ({ hash, prime, proposalId }: Props): React.ReactElement<Props>
           </Modal.Content>
           <VoteActions
             accountId={accountId}
+            aye={voteValue}
             onClick={toggleVoting}
             params={[hash, proposalId, voteValue]}
             tx='technicalCommittee.vote'
@@ -61,7 +62,6 @@ function Voting ({ hash, prime, proposalId }: Props): React.ReactElement<Props>
       )}
       <Button
         icon='check'
-        isPrimary
         label={t('Vote')}
         onClick={toggleVoting}
       />
diff --git a/packages/page-treasury/src/Overview/Voting.tsx b/packages/page-treasury/src/Overview/Voting.tsx
index ed6f0f43b7..2bba4e8d81 100644
--- a/packages/page-treasury/src/Overview/Voting.tsx
+++ b/packages/page-treasury/src/Overview/Voting.tsx
@@ -91,6 +91,7 @@ function Voting ({ councilProposals, isDisabled }: Props): React.ReactElement<Pr
           </Modal.Content>
           <VoteActions
             accountId={accountId}
+            aye={voteValue}
             isDisabled={!councilHash}
             onClick={toggleOpen}
             params={[councilHash, councilId, voteValue]}
@@ -101,7 +102,6 @@ function Voting ({ councilProposals, isDisabled }: Props): React.ReactElement<Pr
       <Button
         icon='check'
         isDisabled={isDisabled}
-        isPrimary
         label={t('Vote')}
         onClick={toggleOpen}
       />
diff --git a/packages/react-components/src/VoteActions.tsx b/packages/react-components/src/VoteActions.tsx
index 6b509dc390..4152f249fa 100644
--- a/packages/react-components/src/VoteActions.tsx
+++ b/packages/react-components/src/VoteActions.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from './translate';
 
 interface Props {
   accountId: string | null;
+  aye: boolean;
   className?: string;
   isDisabled?: boolean;
   onClick: () => void;
@@ -17,7 +18,7 @@ interface Props {
   tx: string;
 }
 
-function VoteActions ({ accountId, className, isDisabled, onClick, params, tx }: Props): React.ReactElement<Props> {
+function VoteActions ({ accountId, aye, className, isDisabled, onClick, params, tx }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -30,7 +31,9 @@ function VoteActions ({ accountId, className, isDisabled, onClick, params, tx }:
         icon='check'
         isDisabled={!accountId || isDisabled}
         isPrimary
-        label={t('Vote')}
+        label={aye
+          ? t('Vote Aye')
+          : t('Vote Nay')}
         onStart={onClick}
         params={params}
         tx={tx}
diff --git a/packages/react-components/src/VoteToggle.tsx b/packages/react-components/src/VoteToggle.tsx
index eb9e62912c..996509ecd0 100644
--- a/packages/react-components/src/VoteToggle.tsx
+++ b/packages/react-components/src/VoteToggle.tsx
@@ -2,9 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useMemo } from 'react';
+import React from 'react';
+import styled from 'styled-components';
 
-import Dropdown from './Dropdown';
+import Toggle from './Toggle';
 import { useTranslation } from './translate';
 
 interface Props {
@@ -15,21 +16,21 @@ interface Props {
 
 function VoteToggle ({ className, onChange, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const voteOpts = useMemo(() => [
-    { text: t('Aye, I approve'), value: true },
-    { text: t('Nay, I do not approve'), value: false }
-  ], [t]);
 
   return (
-    <Dropdown
-      className={className}
-      help={t('Select your vote preferences for this proposal, either to approve or disapprove')}
-      label={t('record my vote as')}
+    <Toggle
+      className={`${className}`}
+      label={value
+        ? t('Aye, I approve')
+        : t('Nay, I do not approve')
+      }
       onChange={onChange}
-      options={voteOpts}
       value={value}
     />
   );
 }
 
-export default React.memo(VoteToggle);
+export default React.memo(styled(VoteToggle)`
+  margin: 0.5rem;
+  text-align: right;
+`);