From d58aa09cf2b9c5d55e207efd065b0a9847698bb3 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Wed, 19 Sep 2018 11:43:29 +0100
Subject: [PATCH] modify voting button and graph colors (#328)

---
 packages/app-democracy/src/Referendum.tsx       |  8 ++++++--
 packages/app-democracy/src/VotingButtons.tsx    | 16 ++++++++--------
 .../src/styles/theme/_colors-polkadot.css       |  5 +++++
 packages/ui-app/src/styles/theme/polkadot.css   | 17 ++++++++++++-----
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/app-democracy/src/Referendum.tsx b/packages/app-democracy/src/Referendum.tsx
index 01a52306d1..67aa957042 100644
--- a/packages/app-democracy/src/Referendum.tsx
+++ b/packages/app-democracy/src/Referendum.tsx
@@ -19,8 +19,12 @@ import Item from './Item';
 import Voting from './Voting';
 import translate from './translate';
 
-const COLORS_YAY = ['#4d4', '#4e4'];
-const COLORS_NAY = ['#d44', '#e44'];
+const COLORS_YAY = process.env.UI_THEME === 'substrate'
+  ? ['#4d4', '#4e4']
+  : ['#64bebe', '#5badad'];
+const COLORS_NAY = process.env.UI_THEME === 'substrate'
+  ? ['#d44', '#e44']
+  : ['#d75ea1', '#e189ba'];
 
 type Props = I18nProps & {
   bestNumber?: BN,
diff --git a/packages/app-democracy/src/VotingButtons.tsx b/packages/app-democracy/src/VotingButtons.tsx
index 6d0f520586..8b1a43e4fb 100644
--- a/packages/app-democracy/src/VotingButtons.tsx
+++ b/packages/app-democracy/src/VotingButtons.tsx
@@ -29,20 +29,20 @@ class VotingButton extends React.PureComponent<Props> {
       <Button.Group>
         <Button
           isDisabled={!publicKey}
-          isPositive
-          text={t('votebtn.aye', {
-            defaultValue: 'aye'
+          isNegative
+          text={t('votebtn.nay', {
+            defaultValue: 'Nay'
           })}
-          onClick={this.onClickYes}
+          onClick={this.onClickNo}
         />
         <Button.Or />
         <Button
           isDisabled={!publicKey}
-          isNegative
-          text={t('votebtn.nay', {
-            defaultValue: 'nay'
+          isPositive
+          text={t('votebtn.aye', {
+            defaultValue: 'Aye'
           })}
-          onClick={this.onClickNo}
+          onClick={this.onClickYes}
         />
       </Button.Group>
     );
diff --git a/packages/ui-app/src/styles/theme/_colors-polkadot.css b/packages/ui-app/src/styles/theme/_colors-polkadot.css
index 443ef7c818..e08ba015a0 100644
--- a/packages/ui-app/src/styles/theme/_colors-polkadot.css
+++ b/packages/ui-app/src/styles/theme/_colors-polkadot.css
@@ -17,10 +17,15 @@ $middle-purple: #e189ba;
 
 $light-slate-gray: #718d94;
 
+$moonstone-blue: #64bebe;
+$verdigris: #5badad;
+
 $button-primary-color: $dark-sky-blue;
 $button-primary-color-hover: $pewter-blue;
 $button-color: $silver-chalice;
 $button-color-hover: $cadet-grey;
+$button-positive-color: $moonstone-blue;
+$button-positive-color-hover: $verdigris;
 $button-negative-color: $wild-orchid;
 $button-negative-color-hover: $middle-purple;
 $anchor-color: $light-slate-gray;
diff --git a/packages/ui-app/src/styles/theme/polkadot.css b/packages/ui-app/src/styles/theme/polkadot.css
index 010ca4a0af..a6152bb0c5 100644
--- a/packages/ui-app/src/styles/theme/polkadot.css
+++ b/packages/ui-app/src/styles/theme/polkadot.css
@@ -25,21 +25,28 @@
   .ui.button:active,
   .ui.buttons .button:active,
   .ui.button:focus,
-  .ui.buttons .button:focus,
+  .ui.buttons .button:focus{
+    background-color: $button-color;
+    color: white;
+  }
+
   .ui.positive.button,
   .ui.buttons .positive.button,
   .ui.positive.button:active,
   .ui.buttons .positive.button:active,
   .ui.positive.button:focus,
   .ui.buttons .positive.button:focus {
-    background-color: $button-color;
+    background-color: $button-positive-color;
+    color: white;
+  }
+  .ui.positive.button:hover,
+  .ui.buttons .positive.button:hover {
+    background-color: $button-positive-color-hover;
     color: white;
   }
 
   .ui.button:hover,
-  .ui.buttons .button:hover,
-  .ui.positive.button:hover,
-  .ui.buttons .positive.button:hover {
+  .ui.buttons .button:hover {
     background-color: $button-color-hover;
     color: white;
   }