fix settings page

.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee

@@ -0,0 +1 @@
+{"value":{"success":true,"data":{"latest":{"version":"4.0.0","info":{"plain":"- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs"}}},"time":1541422002878},"type":"Object"}

.storybook/webpack.config.js

@@ -27,7 +27,7 @@ module.exports = {
                         loader: 'css-loader',
                         options: {
                             modules: true,
-                            localIdentName: '[hash:base64:5]',
+                            localIdentName: '[path][name]_[local]_[hash:base64:5]',
                             importLoaders: 2
                         }
                     },

src/common/UserPanel/UserPanel.js

@@ -33,22 +33,22 @@ const UserPanel = (props) => {
                 <Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'} />Fullscreen mode
             </div>
             <div className={styles['options']}>
-                <a href={'#settings'} target="_blank" className={styles['settings-option']}>
+                <a href={'#settings'} className={styles['settings-option']}>
                     <Icon className={styles['settings-icon']} icon={'ic_settings'} />Settings
                 </a>
-                <a href={'#addons'} target="_blank" className={styles['addons-option']}>
+                <a href={'#addons'} className={styles['addons-option']}>
                     <Icon className={styles['addons-icon']} icon={'ic_addons'} />Add-ons
                 </a>
                 <div onClick={props.playMagnetLink} className={styles['magnet-option']}>
                     <Icon className={styles['magnet-icon']} icon={'ic_magnet'} />Play Magnet Link
                 </div>
-                <a href={'https://stremio.zendesk.com'} target="_blank" className={styles['help-option']}>
+                <a href={'https://stremio.zendesk.com'} target={'_blank'} className={styles['help-option']}>
                     <Icon className={styles['help-icon']} icon={'ic_help'} />Help & Feedback
                 </a>
             </div>
             <div className={styles['footer']}>
-                <a href={'https://www.stremio.com/tos'} target="_blank" className={styles['terms-label']}>Terms of Service</a>
-                <a href={'https://www.stremio.com'} target="_blank" className={styles['about-label']}>About Stremio</a>
+                <a href={'https://www.stremio.com/tos'} target={'_blank'} className={styles['terms-label']}>Terms of Service</a>
+                <a href={'https://www.stremio.com'} target={'_blank'} className={styles['about-label']}>About Stremio</a>
             </div>
         </div>
     );

src/routes/Settings/Settings.js

@@ -1,41 +1,92 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';
-import SettingsExpanded from './SettingsExpanded';
 
 class Settings extends Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            selectedMenu: 'player_preferences'
+            selectedMenu: 'player_preferences',
+            selectedMenuId: 0
         }
-
-        this.changeSettings = this.changeSettings.bind(this);
     }
 
-    changeSettings(selectedMenu) {
-        this.setState({ selectedMenu });
+    changeSettings = (selectedMenu, id) => {
+        this.setState({ selectedMenu, selectedMenuId: id });
     }
 
-    render() {
+    renderPlayerPreferences = () => {
+        const preferences = ["Hardware-accelerated decoding", "Auto-play next episode", "Data saver"];
+
         return (
-            <div className={styles['settings']}>
-                <div className={styles['options']}>
-                    <span onClick={() => { this.changeSettings('player_preferences') }} className={styles['option']}>Player Preferences</span>
-                    <span onClick={() => { this.changeSettings('language') }} className={styles['option']}>Language</span>
-                    <span className={styles['option']}>Account Setttings</span>
-                    <span className={styles['option']}>Notifications</span>
-                    <span className={styles['option']}>Data Caching</span>
-                </div>
-                <SettingsExpanded selectedMenu={this.state.selectedMenu} />
+            <div className={styles['player-preferences-menu']}>
+                {preferences.map((item, key) => {
+                    return (
+                        <label key={key} className={styles['preference-container']}>
+                            <input type='checkbox' className={styles['default-checkbox']} />
+                            <span className={styles['preference']}>{item}</span>
+                            <p className={styles['checkbox']}>
+                                <Icon className={styles['checkmark']} icon={'ic_check'} />
+                            </p>
+                        </label>
+                    );
+                })}
             </div>
         );
     }
+
+    renderLanguage = () => {
+        return (
+            <div className={styles['language-menu']}>
+                <div className={styles['interface-language']}>
+                    <span className={styles['headline']}>INTERFACE LANGUAGE</span>
+                    <div className={styles['name']}>English
+                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
+                    </div>
+                </div>
+                <div className={styles['default-subtitles-language']}>
+                    <span className={styles['headline']}>DEFAULT SUBTITLES LANGUAGE</span>
+                    <div className={styles['name']}>Portugese - BR
+                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    renderSelectedMenu = () => {
+        const { selectedMenuId } = this.state;
+
+        if (selectedMenuId == 0) {
+            this.selectedMenu = 'player-preferences';
+            return (
+                <div> {this.renderPlayerPreferences()} </div>
+            );
+        } else if (selectedMenuId == 1) {
+            this.selectedMenu = 'language';
+            return (
+                <div>{this.renderLanguage()} </div>
+            );
+        }
+    }
+
+    render() {
+        const { selectedMenu } = this.state;
+        const options = ["Player Preferences", "Language", "Account Settings", "Notifications", "Data Caching"];
+
+        return (
+            <div className={styles['settings']}>
+                <div className={styles['options']}>
+                    {options.map((key, index) =>
+                        <div key={key} className={styles[index === this.state.selectedMenuId ? 'selected-menu' : 'option']} onClick={() => this.changeSettings(selectedMenu, index)}>{options[index]}</div>
+                    )}
+                </div>
+                {this.renderSelectedMenu()}
+            </div>
+        )
+    }
 }
 
-Settings.propTypes = {
-    changeSettings: PropTypes.func
-};
-
 export default Settings;

src/routes/Settings/SettingsExpanded.js

@@ -1,79 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'stremio-icons/dom';
-import styles from './styles';
-
-class SettingsExpanded extends Component {
-    constructor(props) {
-        super(props);
-
-        this.renderPlayerPreferences = this.renderPlayerPreferences.bind(this);
-        this.renderLanguage = this.renderLanguage.bind(this);
-    }
-
-    renderPlayerPreferences = () => {
-        const preferences = ["Auto-play next episode", "Data saver"];
-
-        return (
-            <div className={styles['player-preferences']}>
-                <label className={styles['preference-container']}>
-                    <input type='checkbox' className={styles['default-checkbox']} />
-                    <span className={styles['preference']}>Hardware-accelerated decoding</span>
-                    <p className={styles['checkbox']}>
-                        <Icon className={styles['checkmark']} icon={'ic_check'} />
-                    </p>
-                </label>
-                {preferences.map((item, key) => {
-                    return (
-                        <label key={key} className={styles['preference-container1']}>
-                            <input type="checkbox" />
-                            <span className={styles['slider']}></span>
-                            <div className={styles['preference']}>{item}</div>
-                        </label>
-                    );
-                })}
-            </div>
-        );
-    }
-
-    renderLanguage = () => {
-        return (
-            <div className={styles['language']}>
-                <div className={styles['interface-language']}>
-                    <span className={styles['headline']}>INTERFACE LANGUAGE</span>
-                    <div className={styles['name']}>English
-                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
-                    </div>
-                </div>
-                <div className={styles['default-subtitles-language']}>
-                    <span className={styles['headline']}>DEFAULT SUBTITLES LANGUAGE</span>
-                    <div className={styles['name']}>Portugese - BR
-                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const { selectedMenu } = this.props;
-        
-        if (selectedMenu == "player_preferences") {
-            return (
-                <div> {this.renderPlayerPreferences()} </div>
-            );
-        } else if (selectedMenu == "language") {
-            return (
-                <div>{this.renderLanguage()} </div>
-            );
-        }
-    }
-}
-
-SettingsExpanded.propTypes = {
-    selectedMenu: PropTypes.string,
-    renderPlayerPreferences: PropTypes.func,
-    renderLanguage: PropTypes.func
-};
-
-export default SettingsExpanded;

src/routes/Settings/styles.less

@@ -20,13 +20,20 @@
                 background: @colorglass;
             }
         }
+        .selected-menu {
+            padding: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            color: @colorwhite;
+            background: @colorglass;
+        }
         .selected {
             cursor: pointer;
             color: @colorwhite;
             background: @colorglass;
         }
     }
-    .player-preferences {
+    .player-preferences-menu {
         height: 150px;
         margin: 60px 50px;
         border-bottom: 1px solid @colormedium;
@@ -34,7 +41,6 @@
             display: flex;
             cursor: pointer;
             margin: 30px 0px;
-            justify-content: space-between;
             align-items: center;
             .preference {
                 width: 280px;
@@ -65,47 +71,8 @@
                 color: @colorwhite;
             }
         }
-        .preference-container1 {
-            display: flex;
-            cursor: pointer;
-            margin: 30px 0px;
-            align-items: center;
-            flex-direction: row-reverse;
-            .preference {
-                width: 280px;
-            }
-            input { 
-                visibility: hidden;
-            }
-            .slider {
-                cursor: pointer;
-                position: absolute;
-                border-radius: 50px;
-                width: 22px;
-                height: 10px;
-                background-color: @colorneutral;
-            }
-            .slider:before {
-                position: absolute;
-                border-radius: 50%;
-                content: "";
-                height: 14px;
-                width: 14px;
-                bottom: -2px;
-                transition: .4s;
-                -webkit-transition: .4s;
-                background-color: @colorwhite;
-            }
-            input:checked + .slider:before {
-                transform: translateX(8px);
-                background-color: @colorsignal5;
-            }
-            input:checked ~ .preference {
-                color: @colorwhite;
-            }
-        }
     }
-    .language {
+    .language-menu {
         margin: 40px 50px;
         .interface-language {
             margin-bottom: 30px;