Fixed: Finetuned color-impaired mode styling in Calendar

Co-Authored-By: taloth <taloth@users.noreply.github.com>
Lidarr · Aug 10, 2019 · 413819a · 413819a
1 parent 5e3a0e2
commit 413819a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -5,6 +5,10 @@
   border-bottom: 1px solid $borderColor;
   border-left: 4px solid $borderColor;
   font-size: 12px;
+
+  &:global(.colorImpaired) {
+    border-left-width: 5px;
+  }
 }
 
 .info,
@@ -38,37 +42,38 @@
  */
 
 .downloaded {
-  border-left-color: $successColor;
-}
+  border-left-color: $successColor !important;
 
-.partial {
-  border-left-color: $yellow;
+  &:global(.colorImpaired) {
+    border-left-color: color($successColor, saturation(+15%)) !important;
+  }
 }
 
 .downloading {
-  border-left-color: $purple;
+  border-left-color: $purple !important;
 }
 
 .unmonitored {
-  border-left-color: $gray;
+  border-left-color: $gray !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
 .missing {
-  border-left-color: $dangerColor;
+  border-left-color: $dangerColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    border-left-color: color($dangerColor saturation(+15%)) !important;
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
 .unreleased {
-  border-left-color: $blue;
+  border-left-color: $primaryColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
diff --git a/frontend/src/Styles/Variables/colors.js b/frontend/src/Styles/Variables/colors.js
@@ -63,7 +63,8 @@ module.exports = {
   inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
   inputWarningBorderColor: '#ffa500',
   inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
-  colorImpairedGradient: '#fcfcfc',
+  colorImpairedGradient: '#ffffff',
+  colorImpairedGradientDark: '#f4f5f6',
 
   //
   // Buttons