From 5b568dc5ddef77c996aa1fdfddd4dbcaa6b79dcc Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 16 Jun 2017 15:31:22 -0700
Subject: [PATCH] theme--overlay class

---
 app/ui/components/base/dropdown/dropdown.js |  2 +-
 app/ui/components/base/modal.js             |  2 +-
 app/ui/components/response-timer.js         |  2 +-
 app/ui/components/tooltip.js                |  2 +-
 app/ui/css/components/dropdown.less         |  1 -
 app/ui/css/components/tabs.less             | 16 ++++++++++------
 app/ui/css/constants/colors.less            | 18 +++++++++---------
 7 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/ui/components/base/dropdown/dropdown.js b/app/ui/components/base/dropdown/dropdown.js
index 529ef774db..e53be0dc8c 100644
--- a/app/ui/components/base/dropdown/dropdown.js
+++ b/app/ui/components/base/dropdown/dropdown.js
@@ -213,7 +213,7 @@ class Dropdown extends PureComponent {
       finalChildren = [
         dropdownButtons[0],
         <div key="item" className={menuClasses} ref={this._addDropdownMenuRef}>
-          <div className="dropdown__backdrop"></div>
+          <div className="dropdown__backdrop theme--overlay"></div>
           <ul ref={this._addDropdownListRef}>
             {dropdownItems}
           </ul>
diff --git a/app/ui/components/base/modal.js b/app/ui/components/base/modal.js
index 1c454868a3..0ab253a336 100644
--- a/app/ui/components/base/modal.js
+++ b/app/ui/components/base/modal.js
@@ -145,7 +145,7 @@ class Modal extends PureComponent {
            className={classes}
            style={styles}
            onClick={this._handleClick}>
-        <div className="modal__backdrop overlay" data-close-modal></div>
+        <div className="modal__backdrop overlay theme--overlay" data-close-modal></div>
         <div className="modal__content__wrapper">
           <div className="modal__content" key={forceRefreshCounter}>
             {children}
diff --git a/app/ui/components/response-timer.js b/app/ui/components/response-timer.js
index 6d1a8fd40b..a1fea3bf82 100644
--- a/app/ui/components/response-timer.js
+++ b/app/ui/components/response-timer.js
@@ -36,7 +36,7 @@ class ResponseTimer extends PureComponent {
     const {show, elapsedTime} = this.state;
 
     return (
-      <div className={classnames('overlay', {'overlay--hidden': !show})}>
+      <div className={classnames('overlay theme--overlay', {'overlay--hidden': !show})}>
         {elapsedTime > REQUEST_TIME_TO_SHOW_COUNTER
           ? <h2>{elapsedTime.toFixed(1)} seconds...</h2>
           : <h2>Loading...</h2>
diff --git a/app/ui/components/tooltip.js b/app/ui/components/tooltip.js
index a6572f2487..4e4703649e 100644
--- a/app/ui/components/tooltip.js
+++ b/app/ui/components/tooltip.js
@@ -81,7 +81,7 @@ class Tooltip extends PureComponent {
       {'tooltip--visible': visible}
     );
 
-    const bubbleClasses = classnames('tooltip__bubble', 'overlay');
+    const bubbleClasses = classnames('tooltip__bubble', 'theme--overlay');
 
     const bubbleStyles = {
       left: left ? `${left}px` : null,
diff --git a/app/ui/css/components/dropdown.less b/app/ui/css/components/dropdown.less
index f211cdce3e..b974846e18 100644
--- a/app/ui/css/components/dropdown.less
+++ b/app/ui/css/components/dropdown.less
@@ -23,7 +23,6 @@
   top: 0;
   bottom: 0;
   content: ' ';
-  //background: rgba(255, 0, 0, 0.1);
 }
 
 .dropdown__menu {
diff --git a/app/ui/css/components/tabs.less b/app/ui/css/components/tabs.less
index c55cad0802..8ebeb0fe5c 100644
--- a/app/ui/css/components/tabs.less
+++ b/app/ui/css/components/tabs.less
@@ -86,14 +86,18 @@
         padding-right: @padding-md;
       }
     }
-  }
 
-  .ReactTabs__Tab--selected {
-    border: 1px solid @border-color;
-    border-bottom-color: transparent;
+    &:not(.ReactTabs__Tab--selected) i.fa {
+      opacity: @opacity-super-subtle;
+    }
 
-    * {
-      color: inherit;
+    &.ReactTabs__Tab--selected {
+      border: 1px solid @border-color;
+      border-bottom-color: transparent;
+
+      * {
+        color: inherit;
+      }
     }
   }
 
diff --git a/app/ui/css/constants/colors.less b/app/ui/css/constants/colors.less
index 0bceafdfe1..b7f2018b93 100644
--- a/app/ui/css/constants/colors.less
+++ b/app/ui/css/constants/colors.less
@@ -28,7 +28,7 @@ body {
   --color-bg: #fff;
   --color-font: #555;
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(30, 30, 30, 0.8);
     --color-font: #ddd;
   }
@@ -169,7 +169,7 @@ body {
     --color-font: #666;
   }
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(243, 242, 250, 0.8);
     --color-font: #555;
   }
@@ -203,7 +203,7 @@ body {
     --color-info: #329fbf;
   }
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(20, 20, 20, 0.8);
     --color-font: #ddd;
   }
@@ -243,7 +243,7 @@ body {
   --hl-xl: rgba(130, 130, 130, 0.8);
   --hl: rgba(130, 130, 130, 1);
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(255, 255, 255, 0.8);
     --color-font: #333;
   }
@@ -268,7 +268,7 @@ body {
   --hl-xl: rgba(142, 149, 146, 0.8);
   --hl: rgb(142, 149, 146);
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(238, 231, 213, 0.8);
     --color-font: #657b83;
   }
@@ -298,7 +298,7 @@ body {
   --hl-xl: rgba(91, 118, 133, 0.8);
   --hl: rgb(91, 118, 133);
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(0, 31, 41, 0.8);
     --color-font: #8ea0a2;
   }
@@ -396,7 +396,7 @@ body {
     --hl-xl: rgba(114, 145, 143, 0.2);
   }
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(29, 39, 44, 0.8);
   }
 }
@@ -420,7 +420,7 @@ body {
   --hl-xl: rgba(142, 149, 146, 0.8);
   --hl: rgb(142, 149, 146);
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(238, 231, 213, 0.8);
   }
 
@@ -472,7 +472,7 @@ body {
   --hl-xl: rgba(120, 120, 120, 0.7);
   --hl: rgba(130, 130, 130, 1);
 
-  .overlay {
+  .theme--overlay {
     --color-bg: rgba(30, 30, 30, 0.8);
     --color-font: #e1deda;
   }