From e73fe319cffb8409fcf05c0032327006841fa362 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sat, 29 May 2021 21:50:31 +0200
Subject: More contrast for settings dialog badges

Makes the service and workspace count badges more readable in the
settings dialog.
---
 src/styles/badge.scss    |  1 -
 src/styles/settings.scss | 23 ++++++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 728200d03..69879de31 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -4,7 +4,6 @@
   background: $dark-theme-gray;
   border-radius: $theme-border-radius-small;
   color: $dark-theme-gray-lightest;
-  margin-right: 10px;
 
   &.badge--primary,
   &.badge--premium {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index e4f6f3937..1bd0ae63d 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -79,16 +79,16 @@
       }
 
       .badge {
-        background: $dark-theme-gray-lighter;
-        color: $dark-theme-gray-smoke;
+        background: $dark-theme-gray;
+        color: $dark-theme-gray-lightest;
       }
 
       &:hover {
         background: darken($dark-theme-gray-darker, 5%);
 
         .badge {
-          background: $dark-theme-gray-lighter;
-          color: $dark-theme-gray-smoke;
+          background: $dark-theme-gray;
+          color: $dark-theme-gray-lightest;
         }
       }
 
@@ -98,11 +98,11 @@
 
       &.is-active {
         background: $dark-theme-gray;
-        color: $dark-theme-gray-smoke;
+        color: $dark-theme-gray-lightest;
 
         .badge {
           background: $dark-theme-gray-lighter;
-          color: $dark-theme-gray-smoke;
+          color: #000;
         }
       }
     }
@@ -466,11 +466,17 @@
     transition: background $theme-transition-time, color $theme-transition-time;
     border-bottom: 1px solid darken($theme-gray-lightest, 3%);
 
+    .badge {
+      background: $theme-gray-light;
+      color: #FFF;
+    }
+
     &:hover {
-      background: darken($theme-gray-lightest, 5%);
+      background: darken($theme-gray-lightest, 8%);
 
       .badge {
-        background: #FFF;
+        background: $theme-gray-light;
+        color: #FFF;
       }
     }
 
@@ -488,7 +494,6 @@
   .settings-navigation__expander { flex: 1; }
 
   .badge {
-
     display: initial;
     transition: background $theme-transition-time, color $theme-transition-time;
   }
-- 
cgit v1.2.3-54-g00ecf