From ba19e8be5b5757ca88d2f0c4e86140162db2fb95 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Tue, 11 Aug 2020 14:23:45 -0500
Subject: [PATCH] darken based color changes, badge color white to grey

---
 client/src/App.vue                      |  2 +-
 client/src/assets/scss/_variables.scss  |  2 +-
 client/src/components/CharacterList.vue |  4 +++-
 client/src/components/QuoteList.vue     |  1 +
 client/src/components/SeasonList.vue    | 18 +++++++++++-------
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index e20da2a..a85471e 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -26,7 +26,7 @@
     @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
-    body { background-color: #0a0a0a; font-family: 'Roboto', sans-serif; }
+    body { background-color: $grey-0; font-family: 'Roboto', sans-serif; }
 
     .ais-SearchBox-form {
         border: none;
diff --git a/client/src/assets/scss/_variables.scss b/client/src/assets/scss/_variables.scss
index 9bda837..2eb78ed 100644
--- a/client/src/assets/scss/_variables.scss
+++ b/client/src/assets/scss/_variables.scss
@@ -6,7 +6,7 @@ $grey-7: #565656;
 $grey-6: #3e3e3e;
 $grey-5: #292929;
 $grey-4: #242424;
-$grey-3: #1d1d1d;
+$grey-3: #191919;
 $grey-2: #131313;
 $grey-1: #0e0e0e;
 $grey-0: #070707;
diff --git a/client/src/components/CharacterList.vue b/client/src/components/CharacterList.vue
index 76266ea..d6860a6 100644
--- a/client/src/components/CharacterList.vue
+++ b/client/src/components/CharacterList.vue
@@ -15,7 +15,6 @@
 
     .btn {
         box-shadow: none;
-
         &:focus { box-shadow: none; }
     }
 
@@ -23,6 +22,9 @@
         color: $grey-10;
         background-color: $grey-4;
         border-color: $grey-3;
+        .badge {
+            color: lighten($grey-11, 8%);
+        }
     }
 
     .character-button {
diff --git a/client/src/components/QuoteList.vue b/client/src/components/QuoteList.vue
index 3b588e9..d61cfd7 100644
--- a/client/src/components/QuoteList.vue
+++ b/client/src/components/QuoteList.vue
@@ -24,6 +24,7 @@
     }
 
     .quote-speaker {
+        color: darken($grey-10, 1.75%);
         min-width: 100px;
         padding-right: 1em;
         font-weight: 600;
diff --git a/client/src/components/SeasonList.vue b/client/src/components/SeasonList.vue
index bb7e960..97ebc48 100644
--- a/client/src/components/SeasonList.vue
+++ b/client/src/components/SeasonList.vue
@@ -65,20 +65,24 @@
 
     // Dark theme popover
     .popover-header {
-        background-color: $grey-3;
-        border-color: $grey-2;
+        background-color: darken($grey-2, 2.1%);
+        border-color: $grey-1;
         color: $grey-11;
     }
 
     // Dark theme popover, arrow-right fix
     .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
-        border-right-color: $grey-2;
+        border-right-color: darken($grey-3, 2%);
+    }
+
+    .season-item .list-group-item:first-child {
+        border-radius: 0;
     }
 
     // Dark theme popover body
     .popover-body {
         color: $grey-10;
-        background-color: $grey-2;
+        background-color: darken($grey-3, 2%);
     }
 
     .season-title { color: $grey-8; cursor: pointer; }
@@ -89,7 +93,7 @@
             padding: 0;
         }
         .card-header {
-            background-color: $grey-2;
+            background-color: darken($grey-2, 1.5%);
             color: $grey-9;
             border-bottom: 1px solid $grey-0;
             font-family: 'Montserrat', sans-serif;
@@ -98,12 +102,12 @@
 
     .episode-item {
         border-color: $grey-2;
-        background-color: $grey-2;
+        background-color: darken($grey-3, 2%);
         color: $grey-8;
         border-left-width: 0;
         border-right-width: 0;
 
-        &:hover { background-color: $grey-2; }
+        &:hover { background-color: darken($grey-3, 1%); }
     }
 
     .no-link {