From 209dad82beebaca7d1f753feb011a99e2ee0e7b7 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 4 Mar 2020 11:59:37 +0200
Subject: [PATCH] color theme applied to multiselect

---
 src/common/Multiselect/styles.less | 34 ++++++++++--------------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index bb1589483..54138b0d3 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;
 }
@@ -7,24 +9,12 @@
     flex-direction: row;
     align-items: center;
     padding: 0 1rem;
-    background-color: var(--color-backgroundlighter);
-
-    &:global(.active) {
-        background-color: var(--color-surfacelight);
-
-        .label {
-            color: var(--color-backgrounddarker);
-        }
-
-        .icon {
-            fill: var(--color-backgrounddarker);
-        }
-    }
+    background-color: @color-background;
 
     .label {
         flex: 1;
         max-height: 2.4em;
-        color: var(--color-surfacelighter);
+        color: @color-surface-light5;
     }
 
     .icon {
@@ -32,7 +22,7 @@
         width: 1rem;
         height: 1rem;
         margin-left: 1rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
     }
 
     .popup-menu-container {
@@ -47,24 +37,22 @@
             flex-direction: row;
             align-items: center;
             padding: 1rem;
-            background-color: var(--color-backgroundlighter);
+            background-color: @color-background;
 
             &:global(.selected) {
-                background-color: var(--color-surfacedarker);
-
                 .icon {
                     display: block;
                 }
             }
 
             &:hover, &:focus {
-                background-color: var(--color-surfacedark);
+                background-color: @color-background-light2;
             }
 
             .label {
                 flex: 1;
                 max-height: 4.8em;
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
             }
 
             .icon {
@@ -73,7 +61,7 @@
                 width: 1rem;
                 height: 1rem;
                 margin-left: 1rem;
-                fill: var(--color-surfacelighter);
+                fill: @color-surface-light5;
             }
         }
 
@@ -83,7 +71,7 @@
             align-items: center;
             justify-content: center;
             padding: 1rem;
-            background-color: var(--color-backgroundlighter);
+            background-color: @color-background;
 
             .label {
                 flex-grow: 0;
@@ -91,7 +79,7 @@
                 flex-basis: auto;
                 font-size: 1.2rem;
                 text-align: center;
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
             }
         }
     }