From fec92c2957b8a69f11954c3d23b9afd980a56ca7 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 29 Mar 2020 16:08:51 +0300
Subject: [PATCH] discover filters modal styles updated

---
 src/routes/Discover/Discover.js |  6 ++--
 src/routes/Discover/styles.less | 54 +++++++++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index b7ea5e7ef..84d269eea 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -168,13 +168,13 @@ const Discover = ({ urlParams, queryParams }) => {
                 inputsModalOpen ?
                     <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal-container']} onCloseRequest={closeInputsModal}>
                         {selectInputs.map(({ title, isRequired, options, selected, renderLabelText, onSelect }, index) => (
-                            <div key={index} className={styles['selectable-inputs-container']}>
-                                <div className={styles['select-input-label-container']} title={title}>
+                            <div key={index} className={styles['selectable-input-container']}>
+                                <div className={styles['select-input-label']} title={title}>
                                     {title}
                                     {isRequired ? '*' : null}
                                 </div>
                                 <Multiselect
-                                    className={styles['select-input-container']}
+                                    className={styles['select-input']}
                                     mode={'modal'}
                                     title={title}
                                     options={options}
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index bc4596b7e..4034674c4 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -4,6 +4,9 @@
 :import('~stremio/common/Multiselect/styles.less') {
     multiselect-menu-container: menu-container;
     multiselect-modal-container: modal-container;
+    multiselect-option-container: option-container;
+    multiselect-icon: icon;
+    multiselect-label: label;
 }
 
 :import('~stremio/common/PaginationInput/styles.less') {
@@ -217,7 +220,7 @@
 }
 
 .selectable-inputs-modal-container {
-    .selectable-inputs-container {
+    .selectable-input-container {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -226,18 +229,37 @@
             margin-bottom: 1rem;
         }
 
-        .select-input-label-container {
+        .select-input-label {
             flex: none;
             width: 10rem;
             max-height: 2.4em;
-            padding-right: 0.5rem;
-            color: @color-background-dark5;
+            margin-right: 1.5rem;
+            font-size: 1.1rem;
+            color: @color-background-dark2-90;
         }
 
-        .select-input-container {
+        .select-input {
             flex: none;
             width: 15rem;
-            height: 3rem;
+            height: 3.5rem;
+            background-color: @color-surface-light2;
+
+            &:hover, &:focus {
+                background-color: @color-surface-light3;
+            }
+
+            &:focus {
+                outline-color: @color-background-dark2;
+            }
+
+            .multiselect-label {
+                font-weight: normal;
+                color: @color-background-dark2-90;
+            }
+
+            .multiselect-icon {
+                fill: @color-background-dark2-90;
+            }
         }
     }
 }
@@ -247,6 +269,26 @@
         width: 15rem;
         max-height: calc(3.2rem * 7);
         overflow-y: auto;
+
+        .multiselect-option-container {
+            background: none;
+
+            &:hover, &:focus {
+                background-color: @color-surface-light3;
+            }
+
+            &:focus {
+                outline-color: @color-background-dark2;
+            }
+
+            .multiselect-label {
+                color: @color-background-dark2-90;
+            }
+
+            .multiselect-icon {
+                fill: @color-background-dark2-90;
+            }
+        }
     }
 }