#568 UI improvements

package.json

@@ -6,14 +6,14 @@
   "scripts": {
     "test": "npm run test:dev:unit",
     "test:ci:unit": "karma start --browsers PhantomJS --single-run",
-    "posttest:ci:unit": "npm run test:ci:lint",
+    "pretest:ci:unit": "npm run test:ci:lint",
     "test:ci:functional": "BROWSER=phantomjs ./tests/functional/test.sh start-ci",
     "posttest:ci:functional": "./tests/functional/test.sh stop",
     "test:dev:unit": "karma start",
-    "test:ci:lint": "./node_modules/eslint/bin/eslint.js ./src/**/*.js",
+    "test:ci:lint": "./node_modules/eslint/bin/eslint.js ./src",
     "test:dev:functional": "BROWSER=chrome ./tests/functional/test.sh start",
     "posttest:dev:functional": "./tests/functional/test.sh stop",
-    "test:dev:lint": "eslint ./src/scripts/**/*.js",
+    "test:dev:lint": "./node_modules/eslint/bin/eslint.js ./src",
     "test:stylelint": "stylelint './src/**/*.scss' --config ./webpack/.stylelintrc",
     "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node ./webpack/webpack-dev-server.js & env NODE_PATH='./src' PORT=8000 node ./bin/server.js",
     "start": "NODE_PATH='src' node ./start",

src/components/Ayah/index.js

@@ -99,7 +99,7 @@ export default class Ayah extends Component {
           <h4 className="montserrat">{content.name || content.resource.name}</h4>
           <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
             <small
-              dangerouslySetInnerHTML={{__html: content.text}}
+              dangerouslySetInnerHTML={{ __html: content.text }}
               className={`${lang || 'times-new'}`}
             />
           </h2>
@@ -148,20 +148,19 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    const { ayah, tooltip, currentAyah, isPlaying,  audioActions, isSearched} = this.props;
-
-    const text = ayah.words.map(word => {
-      return(
-        <Word
-          word={word}
-          currentAyah={currentAyah}
-          tooltip={tooltip}
-          isPlaying={isPlaying}
-          audioActions={audioActions}
-          isSearched={isSearched}
-        />
-      )
-    });
+    const { ayah, tooltip, currentAyah, isPlaying, audioActions, isSearched } = this.props;
+
+    const text = ayah.words.map(word => (
+      <Word
+        word={word}
+        key={`${word.position}-${word.code}-${word.lineNum}`}
+        currentAyah={currentAyah}
+        tooltip={tooltip}
+        isPlaying={isPlaying}
+        audioActions={audioActions}
+        isSearched={isSearched}
+      />
+    ));
 
     return (
       <h1 className={`${styles.font} text-right text-arabic`}>

src/components/ContentDropdown/index.js

@@ -3,7 +3,6 @@ import React, { Component, PropTypes } from 'react';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import { optionsType } from 'types';
 
 const style = require('./style.scss');
 
@@ -450,26 +449,22 @@ export const slugs = [
 export default class ContentDropdown extends Component {
   static propTypes = {
     onOptionChange: PropTypes.func.isRequired,
-    options: optionsType.isRequired,
+    content: PropTypes.arrayOf(PropTypes.number).isRequired,
     className: PropTypes.string
   };
 
   static defaultProps = {
     className: 'col-md-3'
   }
 
-  shouldComponentUpdate(nextProps) {
-    return this.props.options !== nextProps.options;
-  }
-
   handleRemoveContent = () => {
     const { onOptionChange } = this.props;
 
     onOptionChange({ content: [] });
   }
 
   handleOptionSelected(id) {
-    const { onOptionChange, options: { content } } = this.props;
+    const { onOptionChange, content } = this.props;
 
     if (content.find(option => option === id)) {
       onOptionChange({ content: content.filter(option => option !== id) });
@@ -479,7 +474,7 @@ export default class ContentDropdown extends Component {
   }
 
   renderItems(items) {
-    const { options: { content } } = this.props;
+    const { content } = this.props;
 
     return items.map((slug) => {
       const checked = content.find(option => option === slug.id);
@@ -515,7 +510,7 @@ export default class ContentDropdown extends Component {
   }
 
   render() {
-    const { className, options: { content } } = this.props;
+    const { className, content } = this.props;
 
     return (
       <DropdownButton

src/components/ContentDropdown/spec.js

@@ -12,7 +12,7 @@ describe('<ContentDropdown />', () => {
     onOptionChange = sinon.stub();
     wrapper = mountWithIntl(
       <ContentDropdown
-        options={{ content: [defaultOption] }}
+        content={[defaultOption]}
         onOptionChange={onOptionChange}
       />
     );

src/components/FontSizeDropdown/index.js

@@ -6,18 +6,19 @@ import Col from 'react-bootstrap/lib/Col';
 
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-import { optionsType } from 'types';
-
 const style = require('./style.scss');
 
 export default class FontSizeDropdown extends Component {
   static propTypes = {
     onOptionChange: PropTypes.func,
-    options: optionsType
+    fontSize: PropTypes.shape({
+      arabic: PropTypes.number,
+      translation: PropTypes.number
+    }).isRequired
   }
 
   handleOptionSelected = (type, direction) => {
-    const { onOptionChange, options: { fontSize } } = this.props;
+    const { onOptionChange, fontSize } = this.props;
     const changeFactor = {
       translation: 0.5,
       arabic: 0.5
@@ -94,15 +95,16 @@ export default class FontSizeDropdown extends Component {
 
   render() {
     return (
-      <OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose>
-        <a
-          tabIndex="-1"
-          className="text-color"
-          data-metrics-event-name="FontSizeDropdown"
-        >
-          <LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font size" />
-        </a>
-      </OverlayTrigger>
+      <div className={style.link}>
+        <OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose container={this} positionLeft={0}>
+          <a
+            tabIndex="-1"
+            data-metrics-event-name="FontSizeDropdown"
+          >
+            <LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font size" />
+          </a>
+        </OverlayTrigger>
+      </div>
     );
   }
 }

src/components/FontSizeDropdown/style.scss

@@ -1,6 +1,6 @@
 @import '../../styles/variables.scss';
 
-:local .popover{
+.popover{
   :global(.popover-title){
     font-family: $font-montserrat;
     text-transform: uppercase;
@@ -16,3 +16,9 @@
     }
   }
 }
+
+.link{
+  position: relative;
+  display: block;
+  cursor: pointer;
+}

src/components/Home/LastVisit/index.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import debug from 'helpers/debug';
 import Link from 'react-router/lib/Link';
+import { surahType } from 'types';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const styles = require('containers/Home/style.scss');
@@ -10,7 +11,7 @@ const LastVisit = (props) => {
   return (
     <div>
       <h4 className={`text-muted ${styles.title}`}>
-        <LocaleFormattedMessage id='surah.index.continue' defaultMessage={'Continue'}/>
+        <LocaleFormattedMessage id="surah.index.continue" defaultMessage="Continue" />
         <Link to={`/${props.surah.id}/${props.ayah}`}>
           <span>
             {props.surah.name.simple} ({props.surah.id}:{props.ayah})
@@ -22,7 +23,7 @@ const LastVisit = (props) => {
 };
 
 LastVisit.propTypes = {
-  surah: PropTypes.object.isRequired,
+  surah: surahType.isRequired,
   ayah: PropTypes.number.isRequired
 };
 

src/components/Home/QuickSurahs/index.js

@@ -14,7 +14,7 @@ export default () => {
   return (
     <div className="">
       <h4 className={`text-muted ${styles.title} ${styles.items}`}>
-        <LocaleFormattedMessage id='surah.index.quickLinks' defaultMessage={'Quick links'}/>
+        <LocaleFormattedMessage id="surah.index.quickLinks" defaultMessage="Quick links" />
         {
           isFriday &&
             <span>
@@ -65,5 +65,6 @@ export default () => {
           </Link>
         </span>
       </h4>
-    </div>);
+    </div>
+  );
 };

src/components/InformationToggle/index.js

@@ -1,33 +1,23 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 
+import SwitchToggle from 'components/SwitchToggle';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-export default class InformationToggle extends Component {
-  static propTypes = {
-    isShowingSurahInfo: PropTypes.bool.isRequired,
-    onToggle: PropTypes.func.isRequired
-  };
+const InformationToggle = ({ isShowingSurahInfo, onToggle }) => (
+  <div>
+    <LocaleFormattedMessage id="surah.info" defaultMessage="Surah Info" />
+    <SwitchToggle
+      checked={isShowingSurahInfo}
+      onToggle={() => onToggle({ isShowingSurahInfo: !isShowingSurahInfo })}
+      id="info-toggle"
+      flat
+    />
+  </div>
+);
 
-  toggleInformationMode = (event) => {
-    const { isShowingSurahInfo } = this.props;
+InformationToggle.propTypes = {
+  isShowingSurahInfo: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired
+};
 
-    event.preventDefault();
-
-    this.props.onToggle({ isShowingSurahInfo: !isShowingSurahInfo });
-  };
-
-  render() {
-    const { isShowingSurahInfo } = this.props;
-
-    return (
-      <a
-        tabIndex="-1"
-        title="See information for this surah"
-        className={`${isShowingSurahInfo ? ' text-primary' : 'text-color'} pointer`}
-        onClick={this.toggleInformationMode}
-      >
-        <LocaleFormattedMessage id="surah.info" defaultMessage="Surah Info" />
-      </a>
-    );
-  }
-}
+export default InformationToggle;

src/components/Line/index.js

@@ -11,8 +11,12 @@ export default class Line extends React.Component {
     line: PropTypes.arrayOf(wordType).isRequired,
     tooltip: PropTypes.string,
     currentAyah: PropTypes.string.isRequired,
-    audioActions: PropTypes.object.isRequired,
-    currentWord: PropTypes.any,
+    audioActions: PropTypes.shape({
+      pause: PropTypes.func.isRequired,
+      setAyah: PropTypes.func.isRequired,
+      play: PropTypes.func.isRequired,
+      setCurrentWord: PropTypes.func.isRequired,
+    }),
     isPlaying: PropTypes.bool
   };
 
@@ -29,11 +33,16 @@ export default class Line extends React.Component {
   renderText() {
     const { tooltip, currentAyah, audioActions, isPlaying, line } = this.props;
 
-    const text = line.map(word => {
-      return (
-        <Word word={word} currentAyah={currentAyah} tooltip={tooltip} isPlaying={isPlaying} audioActions={audioActions}/>
-      )
-    });
+    const text = line.map(word => (
+      <Word
+        word={word}
+        key={`${word.position}-${word.code}-${word.lineNum}`}
+        currentAyah={currentAyah}
+        tooltip={tooltip}
+        isPlaying={isPlaying}
+        audioActions={audioActions}
+      />
+    ));
 
     return (
       <span className={`${styles.line} text-center`}>
@@ -52,7 +61,7 @@ export default class Line extends React.Component {
 
     return (
       <div className={`row ${styles.font} text-justify text-arabic`}>
-        <div className="col-md-12 line-container"  name={`ayah:${line[0].ayahKey}`}>
+        <div className="col-md-12 line-container" name={`ayah:${line[0].ayahKey}`}>
           {this.renderText()}
         </div>
       </div>

src/components/NightModeToggle/index.js

@@ -1,16 +1,12 @@
 /* global document */
 import React, { Component } from 'react';
-import { intlShape, injectIntl } from 'react-intl';
 
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import SwitchToggle from 'components/SwitchToggle';
 
 import bindTooltip from 'utils/bindTooltip';
 
 class NightModeToggle extends Component {
-  static propTypes = {
-    intl: intlShape.isRequired
-  };
-
   state = {
     isNightMode: false,
   };
@@ -26,29 +22,18 @@ class NightModeToggle extends Component {
   }
 
   render() {
-    const { intl } = this.props;
-
-    const title = intl.formatMessage({
-      id: this.state.isNightMode ? 'setting.nightMode.dayTip' : 'setting.nightMode.nightTip',
-      defaultMessage: this.state.isNightMode ? 'Switch to day mode' : 'switch to night mode'
-    });
-
     return (
       <div>
-        <a
-          tabIndex="-1"
-          title={title}
-          rel="tooltip"
-          className={`${this.state.isNightMode ? 'text-primary' : 'text-color'} pointer`}
-          onClick={this.toggleNightMode}
-        >
-          <LocaleFormattedMessage id="setting.nightMode" defaultMessage="Night Mode" />
-          : {' '}
-          <i className="ss-icon ss-lightbulb" />
-        </a>
+        <LocaleFormattedMessage id="setting.nightMode" defaultMessage="Night Mode" />
+        <SwitchToggle
+          checked={this.state.isNightMode}
+          onToggle={this.toggleNightMode}
+          id="night-mode-toggle"
+          flat
+        />
       </div>
     );
   }
 }
 
-export default injectIntl(NightModeToggle);
+export default NightModeToggle;

src/components/ReadingModeToggle/index.js

@@ -5,7 +5,7 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const ReadingModeToggle = ({ onReadingModeToggle, isToggled }) => (
   <div>
-    <LocaleFormattedMessage id="setting.reading" defaultMessage="Reading" />:{' '}
+    <LocaleFormattedMessage id="setting.reading" defaultMessage="Reading" />
     <SwitchToggle
       checked={isToggled}
       onToggle={onReadingModeToggle}