From 48a16b0b4b38bcf1d61138e25a73df881e01d468 Mon Sep 17 00:00:00 2001
From: Stephen Finucane <sfinucan@redhat.com>
Date: Thu, 21 Feb 2019 14:42:40 +0000
Subject: [PATCH] Use white'ish text for "eol", "obsolete" deprecated badges

The deprecated badge (which should really be called version banner or
something, given that it's not really a "badge" and appears for
non-deprecated releases too) is a simple div with some text, a close
button, and a Bootstrap dropdowns [1] to switch between versions.
This div has three classes, 'deprecated-badge', 'fixed', and
'deprecated-badge-X', where 'X' is the series status (i.e.
'deprecated-badge-current').

We were setting the background color of the div using the
'.deprecated-badge' selector and then overriding this using the
version-specific class selector. This background color was inherited by
the dropdown.

This had the end result of giving a unique color to the overall div for
different releases but the dropdown, which wasn't being overridden on a
per-version basis, stayed the same, yielding a consistent blue dropdown
regardless of the background.

We fix this by setting the background-color attributes on the dropdown
buttons explicitly, removing the background-color from the
'deprecated-badge' class. While we're at it, we also fix the text color
for the main div, so that we're not trying to read dark blue text on a
dark red background.

[1] https://getbootstrap.com/docs/4.0/components/dropdowns/

Change-Id: I8dbf54ff90164b2c2945ba74fee4bcf51eaecabb
Signed-off-by: Stephen Finucane <sfinucan@redhat.com>
---
 www/static/common/css/deprecated-badge.css | 67 ++++++++++++----------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/www/static/common/css/deprecated-badge.css b/www/static/common/css/deprecated-badge.css
index 7f370c9cff..11b04aff10 100644
--- a/www/static/common/css/deprecated-badge.css
+++ b/www/static/common/css/deprecated-badge.css
@@ -1,7 +1,6 @@
 /* deprecated badge css */
 
 .deprecated-badge {
-    background: #2A4E68;
     padding: 5px;
     box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.46);
     -webkit-font-smoothing: subpixel-antialiased;
@@ -60,41 +59,51 @@ a.deprecated-badge-right {
   margin-top: 50px !important;
 }
 
-.deprecated-badge-obsolete {
-  background: #b33a3a !important;
-}
-
+.deprecated-badge-obsolete,
 .deprecated-badge-eol {
-   background: #b33a3a !important;
+  background: #b33a3a;
 }
 
-.deprecated-badge-current {
-   background: #30739C !important;
-}
-
-.deprecated-badge-maintained {
-   background: #eaeaea !important;
-}
-
-.deprecated-badge-development {
-   background: #eaeaea !important;
-}
-
-.deprecated-badge-development a, .deprecated-badge-development p {
-
-}
-
-.deprecated-badge-maintained a, .deprecated-badge-maintained p {
-
-}
-
-.deprecated-badge-current a, .deprecated-badge-current p {
+.deprecated-badge-obsolete a,
+.deprecated-badge-obsolete p,
+.deprecated-badge-eol a,
+.deprecated-badge-eol p {
   color: #edf2f7;
 }
 
-.deprecated-badge .container
-{
+.deprecated-badge-obsolete .docs-dropdown,
+.deprecated-badge-eol .docs-dropdown {
+  background: #922f2f;
+}
 
+.deprecated-badge-maintained,
+.deprecated-badge-development {
+  background: #eaeaea;
+}
+
+.deprecated-badge-maintained .docs-dropdown,
+.deprecated-badge-development .docs-dropdown {
+  background: #cfcfcf;
+}
+
+.deprecated-badge-development a,
+.deprecated-badge-development p,
+.deprecated-badge-maintained a,
+.deprecated-badge-maintained p {
+  /* use default */
+}
+
+.deprecated-badge-current {
+  background: #30739c;
+}
+
+.deprecated-badge-current .docs-dropdown {
+  background: #2a4e68;
+}
+
+.deprecated-badge-current a,
+.deprecated-badge-current p {
+  color: #edf2f7;
 }
 
 .deprecated-badge .deprecated-badge-close-button{