Voting app: clarify polls

apps/voting/app/src/components/NewVotePanelContent.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Button, Info, Text, TextInput, Field } from '@aragon/ui'
+import { TabBar, Button, Info, Text, TextInput, Field } from '@aragon/ui'
 
 const initialState = {
   question: '',
+  screenIndex: 0,
 }
 
 class NewVotePanelContent extends React.Component {
@@ -23,6 +24,9 @@ class NewVotePanelContent extends React.Component {
       this.setState({ ...initialState })
     }
   }
+  handleTabChange = screenIndex => {
+    this.setState({ screenIndex })
+  }
   handleQuestionChange = event => {
     this.setState({ question: event.target.value })
   }
@@ -31,30 +35,61 @@ class NewVotePanelContent extends React.Component {
     this.props.onCreateVote(this.state.question.trim())
   }
   render() {
-    const { question } = this.state
+    const { question, screenIndex } = this.state
     return (
       <div>
-        <Info.Action title="Votes are informative">
-          They don’t have any direct repercussion on the organization.
-        </Info.Action>
-        <Form onSubmit={this.handleSubmit}>
-          <Field label="Question">
-            <TextInput
-              ref={question => (this.questionInput = question)}
-              value={question}
-              onChange={this.handleQuestionChange}
-              required
-              wide
-            />
-          </Field>
-          <Button mode="strong" type="submit" wide>
-            Begin vote
-          </Button>
-          <Warning>
-            If you are allowed to directly create this vote, you will
-            automatically vote yes for it.
-          </Warning>
-        </Form>
+        <div css="margin: 0 -30px 30px">
+          <TabBar
+            items={['Question', 'Action']}
+            selected={screenIndex}
+            onChange={this.handleTabChange}
+          />
+        </div>
+        {screenIndex === 0 && (
+          <Form onSubmit={this.handleSubmit}>
+            <Field label="Question">
+              <TextInput
+                ref={question => (this.questionInput = question)}
+                value={question}
+                onChange={this.handleQuestionChange}
+                required
+                wide
+              />
+            </Field>
+            <Button mode="strong" type="submit" wide>
+              Begin question
+            </Button>
+            <div css="margin-top: 20px">
+              <Info.Action title="These votes are informative">
+                <div
+                  css={`
+                    margin-top: 5px;
+                    font-size: 14px;
+                  `}
+                >
+                  Questions are used for signaling and don’t have any direct
+                  repercussions on the organization.
+                </div>
+              </Info.Action>
+            </div>
+          </Form>
+        )}
+        {screenIndex === 1 && (
+          <div>
+            <Info.Action title="These votes are binding">
+              <div
+                css={`
+                  margin-top: 5px;
+                  font-size: 14px;
+                `}
+              >
+                Any actions that require <strong>consensus</strong>, such as
+                withdrawing funds or minting tokens, will automatically create a
+                binding vote.
+              </div>
+            </Info.Action>
+          </div>
+        )}
       </div>
     )
   }
@@ -64,10 +99,4 @@ const Form = styled.form`
   margin-top: 20px;
 `
 
-const Warning = styled(Text.Paragraph).attrs({
-  size: 'xsmall',
-})`
-  margin-top: 10px;
-`
-
 export default NewVotePanelContent

apps/voting/app/src/components/VoteStatus.js

@@ -8,7 +8,7 @@ import {
   VOTE_STATUS_ACCEPTED,
   VOTE_STATUS_EXECUTED,
 } from '../vote-types'
-import { getVoteStatus } from '../vote-utils'
+import { isVoteAction, getVoteStatus } from '../vote-utils'
 
 const ATTRIBUTES = {
   [VOTE_STATUS_ONGOING]: {
@@ -40,7 +40,14 @@ const ATTRIBUTES = {
 const VoteStatus = ({ cardStyle, vote }) => {
   const settings = useSettings()
   const status = getVoteStatus(vote, settings.pctBase)
-  const { label, Icon, color, bold } = ATTRIBUTES[status]
+  const { Icon, color, bold } = ATTRIBUTES[status]
+
+  const label =
+    !isVoteAction(vote) &&
+    (status === VOTE_STATUS_EXECUTED || status === VOTE_STATUS_ACCEPTED)
+      ? 'Accepted'
+      : ATTRIBUTES[status].label
+
   return (
     <Main
       fontSize={cardStyle ? 13 : 15}

apps/voting/app/src/components/VotingCard/VotingCard.js

@@ -7,6 +7,7 @@ import { VOTE_YEA, VOTE_NAY } from '../../vote-types'
 import VotingOptions from './VotingOptions'
 import VoteText from '../VoteText'
 import VoteStatus from '../VoteStatus'
+import { isVoteAction } from '../../vote-utils.js'
 
 function getOptions(yea, nay, connectedAccountVote) {
   return [
@@ -48,6 +49,8 @@ const VotingCard = React.memo(
       connectedAccountVote,
     ])
 
+    const action = isVoteAction(vote)
+
     return (
       <Main>
         <Header>
@@ -73,9 +76,25 @@ const VotingCard = React.memo(
             </Label>
             <VotingOptions options={options} votingPower={votingPower} />
           </Content>
-          <Footer>
-            <SecondaryButton onClick={handleOpen}>View vote</SecondaryButton>
-          </Footer>
+          <div
+            css={`
+              display: flex;
+              justify-content: space-between;
+              flex-shrink: 0;
+            `}
+          >
+            <div
+              css={`
+                display: flex;
+                align-items: center;
+              `}
+            >
+              {action ? <BadgeAction /> : <BadgeInformative />}
+            </div>
+            <Button compact mode="outline" onClick={handleOpen}>
+              View vote
+            </Button>
+          </div>
         </Card>
       </Main>
     )
@@ -102,6 +121,18 @@ VotingCard.defaultProps = {
   onOpen: () => {},
 }
 
+const BadgeInformative = () => (
+  <Badge background="rgba(37, 49, 77, 0.16)" foreground="rgba(37, 49, 77, 1)">
+    Informative
+  </Badge>
+)
+
+const BadgeAction = () => (
+  <Badge background="rgba(245, 166, 35, 0.1)" foreground="rgba(156, 99, 7, 1)">
+    Action
+  </Badge>
+)
+
 const OptionLabel = ({ label, isConnectedAccount }) => (
   <span>
     <span>{label}</span>
@@ -121,15 +152,6 @@ const Header = styled.div`
   padding-left: 5px;
 `
 
-const SecondaryButton = styled(Button).attrs({
-  mode: 'secondary',
-  compact: true,
-})`
-  background: ${color(theme.secondaryBackground)
-    .alpha(0.8)
-    .cssa()};
-`
-
 const Card = styled.div`
   display: flex;
   flex-direction: column;
@@ -159,12 +181,6 @@ const PastDate = styled.time`
   color: #98a0a2;
 `
 
-const Footer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  flex-shrink: 0;
-`
-
 const You = styled(Badge.Identity).attrs({ children: 'Your vote' })`
   margin-left: 5px;
   font-size: 9px;

apps/voting/app/src/vote-utils.js

@@ -9,8 +9,15 @@ import {
   VOTE_STATUS_EXECUTED,
 } from './vote-types'
 
-export const getAccountVote = (account, voters) =>
-  voters[account] || VOTE_ABSENT
+const EMPTY_SCRIPT = '0x00000001'
+
+export function isVoteAction(vote) {
+  return vote.data && vote.data.script && vote.data.script !== EMPTY_SCRIPT
+}
+
+export function getAccountVote(account, voters) {
+  return voters[account] || VOTE_ABSENT
+}
 
 export function isVoteOpen(vote, date) {
   const { executed, endDate } = vote.data