Settings looking good

package.json

@@ -87,7 +87,7 @@
     "promise": "7.1.1",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
-    "quran-components": "^0.0.62",
+    "quran-components": "^0.0.65",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",

src/components/ContentDropdown/index.js

@@ -1,11 +1,12 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
-import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
-import DropdownButton from 'react-bootstrap/lib/DropdownButton';
-import MenuItem from 'react-bootstrap/lib/MenuItem';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import { loadTranslations } from 'redux/actions/options';
 import { contentType } from 'types';
+import Menu, { MenuItem } from 'quran-components/lib/Menu';
+import Checkbox from 'quran-components/lib/Checkbox';
+import Loader from 'quran-components/lib/Loader';
+import Icon from 'quran-components/lib/Icon';
 
 const style = require('./style.scss');
 
@@ -31,8 +32,7 @@ class ContentDropdown extends Component {
     onOptionChange: PropTypes.func.isRequired,
     translations: PropTypes.arrayOf(PropTypes.number).isRequired,
     translationOptions: PropTypes.arrayOf(contentType),
-    loadTranslations: PropTypes.func.isRequired,
-    className: PropTypes.string
+    loadTranslations: PropTypes.func.isRequired
   };
 
   componentDidMount() {
@@ -43,16 +43,6 @@ class ContentDropdown extends Component {
     return false;
   }
 
-  getTitle() {
-    const { translationOptions, translations } = this.props;
-
-    return translationOptions.filter(slug => translations.includes(slug.id)).map((slug) => {
-      if (slug.languageName === 'English') return slug.authorName;
-
-      return slug.languageName;
-    }).join(', ');
-  }
-
   handleRemoveContent = () => {
     const { onOptionChange } = this.props;
 
@@ -76,19 +66,16 @@ class ContentDropdown extends Component {
       const checked = translations.find(option => option === translation.id);
 
       return (
-        <li key={translation.id} className={style.item}>
-          <input
-            type="checkbox"
-            className={style.checkbox}
+        <MenuItem key={translation.id} className={style.item}>
+          <Checkbox
             id={translation.id + translation.languageName}
-            onChange={() => this.handleOptionSelected(translation.id)}
+            name="translation"
             checked={checked}
-          />
-
-          <label htmlFor={translation.id + translation.languageName} className={style.label}>
+            handleChange={() => this.handleOptionSelected(translation.id)}
+          >
             {render(translation)}
-          </label>
-        </li>
+          </Checkbox>
+        </MenuItem>
       );
     });
   }
@@ -110,33 +97,34 @@ class ContentDropdown extends Component {
   }
 
   render() {
-    const { className, translations } = this.props;
+    const { translations, translationOptions } = this.props;
 
     return (
-      <ButtonToolbar>
-        <DropdownButton
-          block
-          id="content-dropdown"
-          className={`dropdown ${className} ${style.dropdown}`}
-          title={this.getTitle()}
-        >
-          {
-            translations && translations.length &&
-              <MenuItem onClick={this.handleRemoveContent}>
-                <LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
+      <MenuItem
+        icon={<Icon type="list" />}
+        menu={
+          translationOptions.length ?
+            <Menu>
+              {
+                translations && translations.length &&
+                  <MenuItem onClick={this.handleRemoveContent}>
+                    <LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
+                  </MenuItem>
+              }
+              <MenuItem divider>
+                <LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
+              </MenuItem>
+              {this.renderEnglishList()}
+              <MenuItem divider>
+                <LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
               </MenuItem>
-          }
-          <MenuItem header>
-            <LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
-          </MenuItem>
-          {this.renderEnglishList()}
-          <MenuItem divider />
-          <MenuItem header>
-            <LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
-          </MenuItem>
-          {this.renderLanguagesList()}
-        </DropdownButton>
-      </ButtonToolbar>
+              {this.renderLanguagesList()}
+            </Menu> :
+            <Loader isActive />
+        }
+      >
+        <LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />
+      </MenuItem>
     );
   }
 }

src/components/GlobalNav/Surah/index.js

@@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react';
 import { connect } from 'react-redux';
 import Link from 'react-router/lib/Link';
 import Drawer from 'quran-components/lib/Drawer';
-import Menu, { MenuItem } from 'quran-components/lib/Menu';
+import Menu from 'quran-components/lib/Menu';
 
 import { surahType, optionsType } from 'types';
 import * as OptionsActions from 'redux/actions/options.js';
@@ -23,6 +23,8 @@ import { load } from 'redux/actions/verses.js';
 
 import GlobalNav from '../index';
 
+const styles = require('../style.scss');
+
 class GlobalNavSurah extends Component {
   static propTypes = {
     chapter: surahType.isRequired,
@@ -54,10 +56,14 @@ class GlobalNavSurah extends Component {
     this.setState({ drawerOpen: open });
   }
 
-  renderDrawerToggle() {
+  renderDrawerToggle(visibleXs) {
     return (
       <li>
-        <a tabIndex="-1" className="pointer" onClick={() => this.handleDrawerToggle(true)}>
+        <a
+          tabIndex="-1"
+          className={`pointer ${visibleXs && 'visible-xs visible-sm'}`}
+          onClick={() => this.handleDrawerToggle(true)}
+        >
           <i className="ss-icon ss-settings text-align" />
           <LocaleFormattedMessage id="setting.title" defaultMessage="Settings" />
         </a>
@@ -80,17 +86,18 @@ class GlobalNavSurah extends Component {
             <Link to="/search">
               <i className="ss-icon ss-search" style={{ verticalAlign: 'sub' }} />
             </Link>
-          </li>
-        ]}
-        rightControls={[
-          this.renderDrawerToggle(),
+          </li>,
+          this.renderDrawerToggle(true),
           <Drawer
             right
             drawerClickClose={false}
             open={this.state.drawerOpen}
             handleOpen={this.handleDrawerToggle}
             toggle={<noscript />}
           >
+            <div style={{ padding: 15 }}>
+              <h4>Settings</h4>
+            </div>
             <Menu>
               <InformationToggle
                 onToggle={setOption}
@@ -104,34 +111,35 @@ class GlobalNavSurah extends Component {
                 isNightMode={options.isNightMode}
                 onToggle={setOption}
               />
-              <MenuItem divider />
-              <FontSizeDropdown
-                fontSize={options.fontSize}
-                onOptionChange={setOption}
+              <hr />
+              <ReciterDropdown
+                onOptionChange={this.handleOptionChange}
               />
-              <MenuItem divider />
-              <div style={{ paddingLeft: 15, paddingRight: 15 }}>
-                <LocaleFormattedMessage id="setting.reciters.title" defaultMessage="Reciters" />
-                <ReciterDropdown
-                  onOptionChange={this.handleOptionChange}
-                />
-                <br />
-                <LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />
-                <ContentDropdown
-                  onOptionChange={this.handleOptionChange}
-                />
-              </div>
-              <MenuItem divider />
-              <div style={{ paddingLeft: 15, paddingRight: 15 }}>
+              <ContentDropdown
+                onOptionChange={this.handleOptionChange}
+              />
+              <hr />
+              <div className={styles.title}>
                 <LocaleFormattedMessage id="setting.tooltip.title" defaultMessage="Tooltip Content" />
               </div>
               <TooltipDropdown
                 tooltip={options.tooltip}
                 onOptionChange={setOption}
               />
+              <hr />
+              <div className={styles.title}>
+                <LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font Size" />
+              </div>
+              <FontSizeDropdown
+                fontSize={options.fontSize}
+                onOptionChange={setOption}
+              />
             </Menu>
           </Drawer>
         ]}
+        rightControls={[
+          this.renderDrawerToggle()
+        ]}
       />
     );
   }

src/components/GlobalNav/index.js

@@ -112,7 +112,7 @@ class GlobalNav extends Component {
             leftControls.map(((control, index) => React.cloneElement(control, { key: index })))
           }
         </Nav>
-        <Nav pullRight>
+        <Nav pullRight className="hidden-xs hidden-sm">
           {
             this.renderRightControls()
             .map(((control, index) => React.cloneElement(control, { key: index })))

src/components/GlobalNav/style.scss

@@ -18,3 +18,7 @@
     margin-right: 5px;
   }
 }
+
+.title{
+  padding: 10px 15px;
+}

src/components/GlobalSidebar/index.js

@@ -3,7 +3,6 @@ import React, { PropTypes, Component } from 'react';
 import Link from 'react-router/lib/Link';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import SettingsModal from 'components/SettingsModal';
 
 const styles = require('./style.scss');
 
@@ -44,7 +43,7 @@ class GlobalSidebar extends Component {
   }
 
   render() {
-    const { open, handleOpen, settingsModalProps, children } = this.props;
+    const { open, handleOpen, children } = this.props;
 
     return (
       <div
@@ -61,12 +60,6 @@ class GlobalSidebar extends Component {
         </Navbar>
         <ul className={styles.list}>
           {children}
-          <li>
-            <a tabIndex="-1" className="pointer" onClick={() => this.setState({ settingsModalOpen: true }, handleOpen(false))}>
-              <i className="ss-icon ss-settings vertical-align-middle" />{' '}
-              <LocaleFormattedMessage id="nav.settings" defaultMessage="Settings" />
-            </a>
-          </li>
           <li>
             <a href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="Sidebar:Link:Help">
               <i className="ss-icon ss-help vertical-align-middle" />{' '}
@@ -76,7 +69,6 @@ class GlobalSidebar extends Component {
               />
             </a>
           </li>
-          <hr />
           <li>
             <Link to="/apps" data-metrics-event-name="Sidebar:Link:Mobile">
               <i className="ss-icon ss-cell vertical-align-middle" />{' '}
@@ -119,11 +111,6 @@ class GlobalSidebar extends Component {
             </a>
           </li>
         </ul>
-        <SettingsModal
-          {...settingsModalProps}
-          open={this.state.settingsModalOpen}
-          handleHide={() => this.setState({ settingsModalOpen: false })}
-        />
       </div>
     );
   }

src/components/NightModeToggle/index.js

@@ -30,8 +30,6 @@ class NightModeToggle extends Component {
   }
 
   render() {
-    const { isNightMode } = this.props;
-
     return (
       <MenuItem
         icon={<i className="ss-icon ss-lightbulb vertical-align-middle" />}