From 413819ae284ba478a5aa80a93a43c5cd31e4b437 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sun, 4 Aug 2019 21:25:19 -0400
Subject: [PATCH] Fixed: Finetuned color-impaired mode styling in Calendar

Co-Authored-By: taloth <taloth@users.noreply.github.com>
---
 .../src/Calendar/Events/CalendarEvent.css     | 27 +++++++++++--------
 frontend/src/Styles/Variables/colors.js       |  3 ++-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
index c0153156b..055d51882 100644
--- 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
index 427cba0c3..c209b44b0 100644
--- 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