From 6fed932a614927b2726e64a9cfd5fe261d338074 Mon Sep 17 00:00:00 2001
From: Taloth Saldono <Taloth@users.noreply.github.com>
Date: Fri, 18 Jan 2019 23:50:08 +0100
Subject: [PATCH] Tweaked Color-Impaired styling for Series Index.

---
 frontend/postcss.config.js                      | 1 +
 frontend/src/Components/ProgressBar.css         | 8 ++------
 frontend/src/Series/Index/SeriesIndexFooter.css | 8 ++------
 frontend/src/Styles/Variables/colors.js         | 1 -
 package.json                                    | 1 +
 5 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index f82554ba8..54a56b172 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -14,6 +14,7 @@ module.exports = (ctx, configPath, options) => {
             return Object.assign(acc, reload(vars));
           }, {})
       },
+      'postcss-color-function': {},
       'postcss-nested': {},
       autoprefixer: {
         browsers: [
diff --git a/frontend/src/Components/ProgressBar.css b/frontend/src/Components/ProgressBar.css
index e6bdaf190..777187eec 100644
--- a/frontend/src/Components/ProgressBar.css
+++ b/frontend/src/Components/ProgressBar.css
@@ -43,17 +43,13 @@
 
 .primary {
   background-color: $primaryColor;
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
-  }
 }
 
 .danger {
   background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
   }
 }
 
@@ -69,7 +65,7 @@
   background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }
 
diff --git a/frontend/src/Series/Index/SeriesIndexFooter.css b/frontend/src/Series/Index/SeriesIndexFooter.css
index 390c265f4..71d0439b6 100644
--- a/frontend/src/Series/Index/SeriesIndexFooter.css
+++ b/frontend/src/Series/Index/SeriesIndexFooter.css
@@ -22,10 +22,6 @@
   composes: legendItemColor;
 
   background-color: $primaryColor;
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
-  }
 }
 
 .ended {
@@ -40,7 +36,7 @@
   background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
   }
 }
 
@@ -50,7 +46,7 @@
   background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }
 
diff --git a/frontend/src/Styles/Variables/colors.js b/frontend/src/Styles/Variables/colors.js
index e3d02ffa0..4ded49029 100644
--- a/frontend/src/Styles/Variables/colors.js
+++ b/frontend/src/Styles/Variables/colors.js
@@ -62,7 +62,6 @@ module.exports = {
   inputWarningBorderColor: '#ffa500',
   inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
   colorImpairedGradient: '#fcfcfc',
-  colorImpairedAlternateGradient: '#b0b0b0',
 
   //
   // Buttons
diff --git a/package.json b/package.json
index 85dd8eb59..fc38e6d77 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "moment": "2.22.2",
     "mousetrap": "1.6.2",
     "normalize.css": "8.0.0",
+    "postcss-color-function": "4.0.1",
     "postcss-loader": "3.0.0",
     "postcss-mixins": "6.2.0",
     "postcss-nested": "4.1.0",