refactor(Discover): use modal to display filters instead of Filters component

src/routes/Discover/Discover.js

@@ -9,7 +9,6 @@ const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Mu
 const useDiscover = require('./useDiscover');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
-const { Filters } = require('stremio/common');
 
 const Discover = ({ urlParams, queryParams }) => {
     const { core } = useServices();
@@ -107,9 +106,6 @@ const Discover = ({ urlParams, queryParams }) => {
                                         :
                                         <PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
                                 }
-                                <Filters className={styles['filters']}>
-                                    { renderMultiselectsInputs() }
-                                </Filters>
                             </div>
                             :
                             null
@@ -194,24 +190,10 @@ const Discover = ({ urlParams, queryParams }) => {
             </div>
             {
                 inputsModalOpen && discover.defaultRequest ?
-                    <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal-container']} onCloseRequest={closeInputsModal}>
+                    <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
-                        {selectInputs.map(({ title, isRequired, options, selected, renderLabelText, onSelect }, index) => (
+                        <div className={styles['selectable-input-container']}>
-                            <div key={index} className={styles['selectable-input-container']}>
+                            { renderMultiselectsInputs() }
-                                <div className={styles['select-input-label']} title={title}>
+                        </div>
-                                    {title}
-                                    {isRequired ? '*' : null}
-                                </div>
-                                <Multiselect
-                                    className={styles['select-input']}
-                                    mode={'modal'}
-                                    title={title}
-                                    options={options}
-                                    selected={selected}
-                                    renderLabelText={renderLabelText}
-                                    onSelect={onSelect}
-                                />
-                            </div>
-                        ))}
                     </ModalDialog>
                     :
                     null

src/routes/Discover/styles.less

@@ -18,6 +18,11 @@
     pagination-label: label;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    selectable-inputs-modal-container: modal-dialog-container;
+    selectable-inputs-modal-content: modal-dialog-content;
+}
+
 .discover-container {
     width: 100%;
     height: 100%;
@@ -39,7 +44,7 @@
                 flex: none;
                 align-self: stretch;
                 display: flex;
-                flex-direction: row;
+                flex-direction: row-reverse;
                 padding: 1.5rem;
                 overflow: visible;
 
@@ -79,7 +84,6 @@
                     justify-content: center;
                     width: 3.5rem;
                     height: 3.5rem;
-                    margin-left: 1.5rem;
                     background-color: @color-background;
 
                     .filter-icon {
@@ -246,48 +250,25 @@
     }
 }
 
-.selectable-inputs-modal-container {
+.selectable-inputs-modal {
-    .selectable-input-container {
+    .selectable-inputs-modal-container {
-        display: flex;
+        overflow: visible;
-        flex-direction: row;
-        align-items: center;
 
-        &:not(:last-child) {
+        .selectable-inputs-modal-content {
-            margin-bottom: 1rem;
+            overflow-y: visible !important;
-        }
+            overflow: visible;
 
-        .select-input-label {
+            .selectable-input-container {
-            flex: none;
+                display: flex;
-            width: 10rem;
+                gap: 1em;
-            max-height: 2.4em;
+                flex-direction: column;
-            margin-right: 1.5rem;
+                overflow: visible;
-            font-size: 1.1rem;
-            color: @color-background-dark2-90;
-        }
 
-        .select-input {
+                .select-input {
-            flex: none;
+                    height: 3.5em;
-            width: 15rem;
+                }
-            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;
-            }
-        }
     }
 }
 
@@ -470,6 +451,10 @@
                         display: none;
                     }
 
+                    .filter-container {
+                        display: flex;
+                    }
+
                     .spacing {
                         display: none;
                     }
@@ -477,10 +462,6 @@
                     .pagination-input {
                         margin-left: 0;
                     }
-
-                    .filters {
-                        display: block;
-                    }
                 }
 
                 .meta-items-container {