refactor: props & styles

src/common/MultiselectMenu/Dropdown/Dropdown.tsx

@@ -14,7 +14,7 @@ type Props = {
     menuOpen: boolean | (() => void);
     level: number;
     setLevel: (level: number) => void;
-    onSelect: (event: any) => void;
+    onSelect: (value: number) => void;
 };
 
 const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => {
@@ -25,11 +25,11 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
     };
 
     return (
-        <div className={classNames(styles['dropdown'], { [styles['open']]: menuOpen })} role='listbox'>
+        <div className={classNames(styles['dropdown'], { [styles['open']]: menuOpen })} role={'listbox'}>
             {
                 level > 0 ?
                     <Button className={styles['back-button']} onClick={onBackButtonClick}>
-                        <Icon name={'chevron-left'} className={styles['back-button-icon']} />
+                        <Icon name={'caret-left'} className={styles['back-button-icon']} />
                         {t('BACK')}
                     </Button>
                 : null

src/common/MultiselectMenu/Dropdown/Option/Option.less

@@ -15,7 +15,6 @@
     
     .icon {
         flex: none;
-        // display: none;
         width: 0.5rem;
         height: 0.5rem;
         border-radius: 100%;

src/common/MultiselectMenu/Dropdown/Option/Option.tsx

@@ -9,7 +9,7 @@ import Icon from '@stremio/stremio-icons/react';
 type Props = {
     option: MultiselectMenuOption;
     selectedOption?: MultiselectMenuOption | null;
-    onSelect: (value: string) => void;
+    onSelect: (value: number) => void;
 };
 
 const Option = ({ option, selectedOption, onSelect }: Props) => {
@@ -32,7 +32,7 @@ const Option = ({ option, selectedOption, onSelect }: Props) => {
             }
             {
                 option.level ?
-                    <Icon name={'chevron-right'} className={styles['option-chevron']} />
+                    <Icon name={'caret-right'} className={styles['option-caret']} />
                     : null
             }
         </Button>

src/common/MultiselectMenu/MultiselectMenu.less

@@ -3,11 +3,11 @@
 @border-radius: 2.75rem;
 
 .multiselect-menu {
-    background-color: var(--overlay-color);
     position: relative;
-    min-width: 150px;
+    min-width: 8.5rem;
     overflow: visible;
     border-radius: @border-radius;
+
     &.disabled {
         pointer-events: none;
         opacity: 0.3;
@@ -15,7 +15,6 @@
 
     .multiselect-button {
         color: var(--primary-foreground-color);
-        background-color: rgba(255, 255, 255, 0.05);
         padding: 0.75rem 1.5rem;
         display: flex;
         justify-content: space-between;
@@ -24,12 +23,17 @@
         border-radius: @border-radius;
 
         .icon {
-            width: 1.5rem;
+            width: 1rem;
             color: var(--primary-foreground-color);
+            opacity: 0.6;
 
             &.open {
                 transform: rotate(180deg);
             }
         }
     }
+
+    &:hover {
+        background-color: var(--overlay-color);
+    }
 }

src/common/MultiselectMenu/MultiselectMenu.tsx

@@ -14,7 +14,7 @@ type Props = {
     title?: string;
     options: MultiselectMenuOption[];
     selectedOption?: MultiselectMenuOption;
-    onSelect: (event: any) => void;
+    onSelect: (value: number) => void;
 };
 
 const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
@@ -22,9 +22,8 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
     const multiselectMenuRef = useOutsideClick(() => closeMenu());
     const [level, setLevel] = React.useState<number>(0);
 
-    const onOptionSelect = (event: any) => {
+    const onOptionSelect = (value: number) => {
-        console.log(event.value);
+        level ? setLevel(level + 1) : onSelect(value), closeMenu();
-        level ? setLevel(level + 1) : onSelect(event), closeMenu();
     };
     
     return (
@@ -37,7 +36,7 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
                 aria-expanded={menuOpen}
             >
                 {title}
-                <Icon name={'chevron-down'} className={classNames(styles['icon'], { [styles['open']]: menuOpen })} />
+                <Icon name={'caret-down'} className={classNames(styles['icon'], { [styles['open']]: menuOpen })} />
             </Button>
             {
                 menuOpen ?

src/common/MultiselectMenu/types.d.ts

@@ -1,7 +1,7 @@
 type MultiselectMenuOption = {
     id?: number;
     label: string;
-    value: string;
+    value: number;
     destination?: string;
     default?: boolean;
     hidden?: boolean;

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js

@@ -36,8 +36,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
             });
         }
     }, [season, seasons, onSelect]);
-    const seasonOnSelect = React.useCallback((event) => {
+    const seasonOnSelect = React.useCallback((value) => {
-        const value = parseFloat(event.value);
         if (typeof onSelect === 'function') {
             onSelect({
                 type: 'select',