From 00f1d9b4fac3ab443d35a0632a4270f036a81af8 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 20 Jan 2017 14:06:26 -0800
Subject: [PATCH] Fixed response pane loading background for themes

---
 app/ui/css/components/responsepane.less | 12 ++++++------
 app/ui/css/constants/colors.less        |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/ui/css/components/responsepane.less b/app/ui/css/components/responsepane.less
index 97cbea937..79ddfbab6 100644
--- a/app/ui/css/components/responsepane.less
+++ b/app/ui/css/components/responsepane.less
@@ -9,7 +9,7 @@
     right: 0;
     left: 0;
     bottom: 0;
-    background: rgba(30, 30, 30, 0.8);
+    background-color: @bg-super-dark-overlay;
     z-index: 100;
     display: flex;
     flex-direction: column;
@@ -17,6 +17,7 @@
     justify-content: center;
     overflow: hidden;
     text-align: center;
+    color: @font-super-dark-bg;
 
     &.response-pane__overlay--under {
       background: none;
@@ -27,17 +28,16 @@
       max-width: 30rem;
     }
 
-    .btn--outlined {
-      background: @bg-super-dark;
+    .btn {
+      background: @bg-super-dark-overlay;
 
       &:hover {
-        background: @bg-dark;
+        background: @bg-super-dark;
       }
     }
 
     i.fa {
-      color: @font-dark-bg;
-      font-size: 6rem;
+      font-size: 4rem;
     }
   }
 }
diff --git a/app/ui/css/constants/colors.less b/app/ui/css/constants/colors.less
index ca9422436..b5a861737 100644
--- a/app/ui/css/constants/colors.less
+++ b/app/ui/css/constants/colors.less
@@ -13,6 +13,7 @@ body[theme="default"] {
   --bg-super-light: #fff;
   --bg-dark: #2c2d29;
   --bg-super-dark: #252622;
+  --bg-super-dark-overlay: rgba(37, 38, 34, 0.8);
 
   --font-light-bg: #444;
   --font-super-light-bg: #666;
@@ -34,6 +35,7 @@ body[theme="dark"] {
   --bg-super-light: #2a2b27;
   --bg-super-dark: #252622;
   --bg-dark: #252622;
+  --bg-super-dark-overlay: rgba(37, 38, 34, 0.8);
 
   --font-light-bg: #ccc;
   --font-super-light-bg: #ccc;
@@ -55,6 +57,7 @@ body[theme="light"] {
   --bg-super-light: #f9f9f9;
   --bg-dark: #fff;
   --bg-super-dark: #fff;
+  --bg-super-dark-overlay: rgba(255, 255, 255, 0.7);
 
   --font-light-bg: #333;
   --font-super-light-bg: #333;
@@ -71,6 +74,7 @@ body[theme="light"] {
 @bg-super-light: var(--bg-super-light);
 @bg-dark: var(--bg-dark);
 @bg-super-dark: var(--bg-super-dark);
+@bg-super-dark-overlay: var(--bg-super-dark-overlay);
 @bg-brand: var(--bg-brand);
 
 @opacity-subtle: 0.7;