From b720488f7bf6bf9e080d225ea150f9dfccb3ed54 Mon Sep 17 00:00:00 2001
From: Stephen Humphries <stephen.humphries@shopify.com>
Date: Thu, 18 Feb 2021 12:34:54 -0500
Subject: [PATCH] Change the background colour for the RSS info badge to be
 less eye-catching

    The red badge beside the RSS column header in the processes table is quite
    eye-catching.  The bold red colour might be appropriate for a notification
    badge indicating that the user needs to do something, but, for a "more info"
    badge, something that stands out less from
    the background is nicer.
---
 web/assets/stylesheets/application-dark.css | 11 +++++++++++
 web/assets/stylesheets/application.css      |  7 +++----
 web/views/busy.erb                          |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/assets/stylesheets/application-dark.css b/web/assets/stylesheets/application-dark.css
index 2c4265cd4..8d6ac48f5 100644
--- a/web/assets/stylesheets/application-dark.css
+++ b/web/assets/stylesheets/application-dark.css
@@ -147,3 +147,14 @@ input {
   fill: #ddd;
   color: #ddd;
 }
+
+.info-circle {
+  color: #282828;
+  background-color: #555555;
+  border-radius: 50%;
+  text-align: center;
+  vertical-align: middle;
+  padding: 3px 7px;
+  font-size: 0.7em;
+  margin-left: 5px;
+}
diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
index da900408e..ceff1dbf3 100644
--- a/web/assets/stylesheets/application.css
+++ b/web/assets/stylesheets/application.css
@@ -1153,10 +1153,9 @@ div.interval-slider input {
   width: 20%;
 }
 
-.circled {
-  border-color: #333;
-  color: #eee;
-  background-color: #b1003e;
+.info-circle {
+  color: #f3f3f3;
+  background-color: #dddddd;
   border-radius: 50%;
   text-align: center;
   vertical-align: middle;
diff --git a/web/views/busy.erb b/web/views/busy.erb
index ea89987d9..c1487cffa 100644
--- a/web/views/busy.erb
+++ b/web/views/busy.erb
@@ -18,7 +18,7 @@
     <thead>
       <th><%= t('Name') %></th>
       <th><%= t('Started') %></th>
-      <th><%= t('RSS') %><a href="https://github.com/mperham/sidekiq/wiki/Memory#rss"><span class="circled" title="Click to learn more about RSS">?</span></a></th>
+      <th><%= t('RSS') %><a href="https://github.com/mperham/sidekiq/wiki/Memory#rss"><span class="info-circle" title="Click to learn more about RSS">?</span></a></th>
       <th><%= t('Threads') %></th>
       <th><%= t('Busy') %></th>
       <th>&nbsp;</th>