From ff8fc237e25881506ba8f758c038bfffbbac8b64 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 4 Jul 2019 19:59:11 -0700
Subject: [PATCH] Darker border for calendar

---
 frontend/src/Calendar/Day/CalendarDay.css     |  6 ++--
 frontend/src/Calendar/Day/CalendarDays.css    |  2 +-
 .../src/Calendar/Events/CalendarEvent.css     | 32 ++++++++++++++++---
 .../Calendar/Events/CalendarEventGroup.css    | 12 +++----
 frontend/src/Styles/Variables/colors.js       |  1 +
 5 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/frontend/src/Calendar/Day/CalendarDay.css b/frontend/src/Calendar/Day/CalendarDay.css
index 1c7694f0b..79eb67ae7 100644
--- a/frontend/src/Calendar/Day/CalendarDay.css
+++ b/frontend/src/Calendar/Day/CalendarDay.css
@@ -2,8 +2,8 @@
   flex: 1 0 14.28%;
   overflow: hidden;
   min-height: 70px;
-  border-bottom: 1px solid $borderColor;
-  border-left: 1px solid $borderColor;
+  border-bottom: 1px solid $calendarBorderColor;
+  border-left: 1px solid $calendarBorderColor;
 }
 
 .isSingleDay {
@@ -12,7 +12,7 @@
 
 .dayOfMonth {
   padding-right: 5px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid $calendarBorderColor;
   text-align: right;
 }
 
diff --git a/frontend/src/Calendar/Day/CalendarDays.css b/frontend/src/Calendar/Day/CalendarDays.css
index 22005e3e6..b6dd2100c 100644
--- a/frontend/src/Calendar/Day/CalendarDays.css
+++ b/frontend/src/Calendar/Day/CalendarDays.css
@@ -1,6 +1,6 @@
 .days {
   display: flex;
-  border-right: 1px solid $borderColor;
+  border-right: 1px solid $calendarBorderColor;
 }
 
 .day,
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
index 4ebc8bc12..5189a3aac 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -57,7 +57,13 @@
   border-left-color: $gray !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(
+      45deg,
+      $colorImpairedGradientDark,
+      $colorImpairedGradientDark 5px,
+      $colorImpairedGradient 5px,
+      $colorImpairedGradient 10px
+    );
   }
 }
 
@@ -65,7 +71,13 @@
   border-left-color: $warningColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(
+      90deg,
+      $colorImpairedGradientDark,
+      $colorImpairedGradientDark 5px,
+      $colorImpairedGradient 5px,
+      $colorImpairedGradient 10px
+    );
   }
 }
 
@@ -74,7 +86,13 @@
 
   &:global(.colorImpaired) {
     border-left-color: color($dangerColor saturation(+15%)) !important;
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(
+      90deg,
+      $colorImpairedGradientDark,
+      $colorImpairedGradientDark 5px,
+      $colorImpairedGradient 5px,
+      $colorImpairedGradient 10px
+    );
   }
 }
 
@@ -82,6 +100,12 @@
   border-left-color: $primaryColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(
+      90deg,
+      $colorImpairedGradientDark,
+      $colorImpairedGradientDark 5px,
+      $colorImpairedGradient 5px,
+      $colorImpairedGradient 10px
+    );
   }
 }
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.css b/frontend/src/Calendar/Events/CalendarEventGroup.css
index ae259153b..25c57fc02 100644
--- a/frontend/src/Calendar/Events/CalendarEventGroup.css
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.css
@@ -58,25 +58,25 @@
  */
 
 .downloaded {
-  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
+  composes: downloaded from "~Calendar/Events/CalendarEvent.css";
 }
 
 .downloading {
-  composes: downloading from '~Calendar/Events/CalendarEvent.css';
+  composes: downloading from "~Calendar/Events/CalendarEvent.css";
 }
 
 .unmonitored {
-  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
+  composes: unmonitored from "~Calendar/Events/CalendarEvent.css";
 }
 
 .onAir {
-  composes: onAir from '~Calendar/Events/CalendarEvent.css';
+  composes: onAir from "~Calendar/Events/CalendarEvent.css";
 }
 
 .missing {
-  composes: missing from '~Calendar/Events/CalendarEvent.css';
+  composes: missing from "~Calendar/Events/CalendarEvent.css";
 }
 
 .premiere {
-  composes: premiere from '~Calendar/Events/CalendarEvent.css';
+  composes: premiere from "~Calendar/Events/CalendarEvent.css";
 }
diff --git a/frontend/src/Styles/Variables/colors.js b/frontend/src/Styles/Variables/colors.js
index 75e140db7..8a381eae2 100644
--- a/frontend/src/Styles/Variables/colors.js
+++ b/frontend/src/Styles/Variables/colors.js
@@ -174,6 +174,7 @@ module.exports = {
   // Calendar
 
   calendarTodayBackgroundColor: '#ddd',
+  calendarBorderColor: '#cecece',
 
   //
   // Table