Adjust poll wording (#3176)

* Adjust poll wording

* Poll header

* Adjust column widths

* Result adjustment

packages/page-poll/src/index.tsx

@@ -7,6 +7,7 @@ import { ITuple } from '@polkadot/types/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import { Button, Columar, InputAddress, Progress, Spinner, Toggle, TxButton } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@@ -47,26 +48,33 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
 
   const blocksLeft = (api.consts.poll.end as BlockNumber).sub(bestNumber);
   const canVote = blocksLeft.gt(BN_ZERO);
-  const options: [string, boolean, (value: boolean) => void][] = [
-    [t('10 million DOTs; status quo'), opt10m, setOpt10m],
-    [t('100 million DOTs; 11 decimals'), opt100m, setOpt100m],
-    [t('1 billion DOTs; 10 decimals'), opt1b, setOpt1b],
-    [t('10 billion DOTs; 9 decimals'), opt10b, setOpt10b]
+  const options: [string, string, boolean, (value: boolean) => void][] = [
+    [t('No change'), t('No change from the original 2017 sale definitions; will mean a total of 10m DOT from genesis.'), opt10m, setOpt10m],
+    [t('Split of 10x'), t('Split of 10x from the original sale; will mean a total of 100m DOT from genesis. Apparent DOT price would be 10x lower.'), opt100m, setOpt100m],
+    [t('Split of 100x'), t('Split of 100x from the original sale; will mean a total of 1b DOT from genesis. Apparent DOT price would be 100x lower.'), opt1b, setOpt1b],
+    [t('Split of 1000x'), t('Split of 1,000x from the original sale; will mean a total of 10b DOT from genesis. Apparent DOT price would be 1000x lower.'), opt10b, setOpt10b]
   ];
   const hasValue = opt10m || opt100m || opt1b || opt10b;
 
+  /* eslint-disable react/jsx-max-props-per-line */
+
   return (
     <main className={className}>
       <div className='pollContainer'>
-        <h1>{t('poll on token decimals')}</h1>
+        <h1>{t('denomination vote')}</h1>
         <article className='keepAlive'>
-          <p>{t('This poll is setup to judge the sentiment of the Polkadot token holders in adjusting the number of decimals that is used to identify one full DOT. It does not change the overall supply, but rather just allows for a different representation of the current supply.')}</p>
-          <p>{t('You can indicate your vote for any combination of the options laid out below.')}</p>
+          <p><Trans key='poll1'>The Polkadot DOT denomination vote: Seventy-two hours after the DOT token becomes transferable, the most popular option from this poll will decide the denomination used for the DOT token.</Trans></p>
+          <p><Trans key='poll2'>This is an <a href='https://en.wikipedia.org/wiki/Approval_voting' rel='noreferrer' target='_blank'>approval vote</a>. There are four options and you may select any combination of them. The most popular of the four will be selected as the final DOT denomination three days after DOT token transfers are enabled.</Trans></p>
+          <p><Trans key='poll2'>Please see the <a href='https://medium.com/polkadot-network/the-first-polkadot-vote-1fc1b8bd357b' rel='noreferrer' target='_blank'>Medium article </a> for more information</Trans></p>
           <div className={`options ${canVote ? 'canVote' : ''}`}>
-            {options.map(([label, value, onChange], index) =>
-              <Columar key={index}>
+            {options.map(([label, desc, value, onChange], index) =>
+              <Columar
+                is60
+                key={index}
+              >
                 <Columar.Column className='option'>
                   <div className='optionName'>{label}</div>
+                  <div className='optionDesc'>{desc}</div>
                   <Toggle
                     className='pollToggle'
                     isDisabled={!canVote}
@@ -135,7 +143,7 @@ export default React.memo(styled(PollApp)`
 
   .pollContainer {
     margin: 2rem auto;
-    max-width: 50rem;
+    max-width: 60rem;
   }
 
   .options {
@@ -158,6 +166,7 @@ export default React.memo(styled(PollApp)`
       font-size: 1.2rem;
       font-weight: 100;
       line-height: 1;
+      margin-bottom: 0.75rem;
     }
 
     .pollToggle {
@@ -177,7 +186,7 @@ export default React.memo(styled(PollApp)`
   }
 
   .result {
-    margin: 1rem 0 0 0;
+    margin: 2.2rem 0 0 0;
     text-align: right;
 
     .ui--Progress {

packages/react-components/src/Columar.tsx

@@ -10,15 +10,16 @@ import Column from './Column';
 interface Props {
   children: React.ReactNode;
   className?: string;
+  is60?: boolean;
 }
 
 type ColumarType = React.ComponentType<Props> & {
   Column: React.ComponentType<Props>;
 };
 
-function Columar ({ children, className = '' }: Props): React.ReactElement<Props> {
+function Columar ({ children, className = '', is60 }: Props): React.ReactElement<Props> {
   return (
-    <div className={`ui--Columnar ${className}`}>
+    <div className={`ui--Columnar ${is60 ? 'is60' : 'is50'} ${className}`}>
       {children}
     </div>
   );
@@ -28,10 +29,28 @@ const ColumarExp = React.memo(styled(Columar)`
   display: flex;
   flex-wrap: wrap;
 
-  .ui--Column {
-    @media (min-width: 1025px) {
-      max-width: 50%;
-      min-width: 50%;
+  &.is50 {
+    .ui--Column {
+      @media (min-width: 1025px) {
+        max-width: 50%;
+        min-width: 50%;
+      }
+    }
+  }
+
+  &.is60 {
+    .ui--Column:first-child {
+      @media (min-width: 1025px) {
+        max-width: 60%;
+        min-width: 60%;
+      }
+    }
+
+    .ui--Column:last-child {
+      @media (min-width: 1025px) {
+        max-width: 40%;
+        min-width: 40%;
+      }
     }
   }
 `) as unknown as ColumarType;