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

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

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={

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

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

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}

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;
+`);