theme--overlay class

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>

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}

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>

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,

app/ui/css/components/dropdown.less

@@ -23,7 +23,6 @@
   top: 0;
   bottom: 0;
   content: ' ';
-  //background: rgba(255, 0, 0, 0.1);
 }
 
 .dropdown__menu {

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;
+      }
     }
   }
 

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;
   }