From 84d5becf2a7ab3c54a0dad632045fdffbd7ee423 Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Sun, 20 Jan 2019 05:41:52 -0200
Subject: [PATCH] Update form text colors (#3296)

* Create ant variables and update form colors

* Remove less extension from imports in ant.less

* Update font-weight for labels

* Add percy snapshot for create data source page

* Remove bold in labels only for checkboxes and radio buttons
---
 client/app/assets/less/ant.less               | 48 ++++++++-----------
 client/app/assets/less/inc/ant-variables.less | 29 +++++++++++
 client/app/assets/less/inc/variables.less     |  2 +-
 .../data-source/create_data_source_spec.js    |  1 +
 4 files changed, 50 insertions(+), 30 deletions(-)
 create mode 100644 client/app/assets/less/inc/ant-variables.less

diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
index 960769651..e5c131169 100644
--- a/client/app/assets/less/ant.less
+++ b/client/app/assets/less/ant.less
@@ -1,33 +1,23 @@
-@import '~antd/lib/style/core/iconfont.less';
-@import '~antd/lib/style/core/motion.less';
-@import '~antd/lib/input/style/index.less';
-@import '~antd/lib/input-number/style/index.less';
-@import '~antd/lib/date-picker/style/index.less';
-@import '~antd/lib/modal/style/index.less';
-@import '~antd/lib/tooltip/style/index.less';
-@import '~antd/lib/select/style/index.less';
-@import '~antd/lib/checkbox/style/index.less';
-@import '~antd/lib/upload/style/index.less';
-@import '~antd/lib/form/style/index.less';
-@import '~antd/lib/button/style/index.less';
-@import '~antd/lib/radio/style/index.less';
-@import '~antd/lib/time-picker/style/index.less';
+@import '~antd/lib/style/core/iconfont';
+@import '~antd/lib/style/core/motion';
+@import '~antd/lib/input/style/index';
+@import '~antd/lib/input-number/style/index';
+@import '~antd/lib/date-picker/style/index';
+@import '~antd/lib/modal/style/index';
+@import '~antd/lib/tooltip/style/index';
+@import '~antd/lib/select/style/index';
+@import '~antd/lib/checkbox/style/index';
+@import '~antd/lib/upload/style/index';
+@import '~antd/lib/form/style/index';
+@import '~antd/lib/button/style/index';
+@import '~antd/lib/radio/style/index';
+@import '~antd/lib/time-picker/style/index';
+@import 'inc/ant-variables';
 
-// Overwritting Ant Design defaults to fit into Redash current style
-@redash-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
-@font-family-no-number  : @redash-font;
-@font-family            : @redash-font;
-@code-family            : @redash-font;
-@font-size-base         : 13px;
-@text-color             : #767676;
-
-@input-height-base      : 35px;
-@input-color            : #9E9E9E;
-@border-radius-base     : 2px;
-@border-color-base      : #e8e8e8;
-
-@primary-color          : #2196F3;
+// Remove bold in labels for Ant checkboxes and radio buttons
+.ant-checkbox-wrapper, .ant-radio-wrapper {
+  font-weight: normal;
+}
 
 // Fix for disabled button styles inside Tooltip component.
 // Tooltip wraps disabled buttons with `<span>` and moves all styles
diff --git a/client/app/assets/less/inc/ant-variables.less b/client/app/assets/less/inc/ant-variables.less
new file mode 100644
index 000000000..adebc76f9
--- /dev/null
+++ b/client/app/assets/less/inc/ant-variables.less
@@ -0,0 +1,29 @@
+/* --------------------------------------------------------
+    Colors
+-----------------------------------------------------------*/
+@primary-color:                        #2196F3;
+
+
+/* --------------------------------------------------------
+    Font
+-----------------------------------------------------------*/
+@redash-font:                          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+@font-family-no-number:                @redash-font;
+@font-family:                          @redash-font;
+@code-family:                          @redash-font;
+@font-size-base:                       13px;
+
+
+/* --------------------------------------------------------
+    Typograpgy
+-----------------------------------------------------------*/
+@text-color:                           #595959;
+
+
+/* --------------------------------------------------------
+    Form
+-----------------------------------------------------------*/
+@input-height-base:                    35px;
+@input-color:                          #595959;
+@border-radius-base: 2px;
+@border-color-base:                    #E8E8E8;
diff --git a/client/app/assets/less/inc/variables.less b/client/app/assets/less/inc/variables.less
index 702041d2a..f93cf2522 100755
--- a/client/app/assets/less/inc/variables.less
+++ b/client/app/assets/less/inc/variables.less
@@ -55,7 +55,7 @@
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
-@input-color:                           #9E9E9E;
+@input-color:                           #595959;
 @input-color-placeholder:               #b4b4b4;
 @input-border:                          #e8e8e8;
 @input-border-radius:                   0;
diff --git a/cypress/integration/data-source/create_data_source_spec.js b/cypress/integration/data-source/create_data_source_spec.js
index 52adef85f..1ae4be039 100644
--- a/cypress/integration/data-source/create_data_source_spec.js
+++ b/cypress/integration/data-source/create_data_source_spec.js
@@ -14,5 +14,6 @@ describe('Create Data Source', () => {
     cy.getByTestId('Database Name').type('postgres{enter}');
 
     cy.contains('Saved.');
+    cy.percySnapshot('Create Data Source page');
   });
 });