Merge branch 'master' of github.com:mperham/sidekiq

Changes.md

@@ -5,6 +5,8 @@
 Unreleased
 ---------
 
+- Web UI - Dark Mode fixes [#4543, natematykiewicz]
+- Ensure `Rack::ContentLength` is loaded as middleware for correct Web UI responses [#4541]
 - Avoid exception dumping SSL store in Redis connection logging [#4532]
 
 6.0.7

lib/sidekiq/web.rb

@@ -12,6 +12,7 @@ require "sidekiq/web/action"
 require "sidekiq/web/application"
 
 require "rack/protection"
+require "rack/content_length"
 
 require "rack/builder"
 require "rack/file"
@@ -172,6 +173,13 @@ module Sidekiq
 
         middlewares.unshift [[::Rack::Session::Cookie, options], nil]
       end
+
+      # Since Sidekiq::WebApplication no longer calculates its own
+      # Content-Length response header, we must ensure that the Rack middleware
+      # that does this is loaded
+      unless using? ::Rack::ContentLength
+        middlewares.unshift [[::Rack::ContentLength], nil]
+      end
     end
 
     def build

web/assets/stylesheets/application-dark.css

@@ -1,5 +1,5 @@
-body {
-  background-color: #000;
+html, body {
+  background-color: #070707 !important;
   color: #ccc;
 }
 
@@ -51,7 +51,7 @@ table.table-white {
 }
 
 .alert-success {
-  background-color: #000;
+  background-color: #182d11;
 }
 
 a:link,
@@ -66,8 +66,12 @@ a.btn {
 }
 
 .summary_bar .summary {
-  background-color: #000;
+  background-color: #111;
   border: 1px solid #333;
+
+  -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
 }
 
 .navbar-default {
@@ -116,6 +120,13 @@ a.btn {
   color: #333;
 }
 
+.rickshaw_graph .detail {
+  background: rgba(255, 255, 255, .1)
+}
+.rickshaw_graph .x_tick {
+  border-color: rgba(255, 255, 255, .2);
+}
+
 .rickshaw_graph .y_ticks.glow text {
   fill: #ccc;
   color: #ccc;

web/assets/stylesheets/application.css

@@ -469,6 +469,11 @@ span.current-interval {
 
 div.interval-slider input {
   width: 160px;
+  -webkit-appearance: none;
+  height: 3px;
+  margin-top: 5px;
+  border-radius: 2px;
+  background: currentcolor;
 }
 
 #realtime-legend,