fixed UI for Juz tab and minor warning fixes

src/components/Audioplayer/index.js

@@ -49,12 +49,14 @@ export class Audioplayer extends Component {
       audio
     });
 
-    load({
-      chapterId: nextVerse.chapterId,
-      verseId: nextVerse.id,
-      verseKey: nextVerse.verseKey,
-      audio
-    });
+    if (nextVerse) {
+      load({
+        chapterId: nextVerse.chapterId,
+        verseId: nextVerse.id,
+        verseKey: nextVerse.verseKey,
+        audio
+      });
+    }
 
     return false;
   }

src/components/Home/JuzList/index.js

@@ -11,22 +11,40 @@ class JuzList extends Component {
     const juzzChapters = Object.keys(juz.verseMapping);
 
     const list = juzzChapters.map(chapter => (
-      <div className={`col-xs-10 col-xs-offset-2 ${styles.translated_name}`}>
-        <span className={'text-uppercase'}>
-          {chapters[chapter].nameSimple}
-        </span>
-        <span>
-          <Link
-            to={`/${chapter}/${juz.verseMapping[chapter]}`}
-            className={`${styles.link} row`}
+      <div className={`col-md-12 ${styles.translated_name}`}>
+        <Link
+          to={`/${chapter}/${juz.verseMapping[chapter]}`}
+          className={`${styles.link} row`}
+        >
+          <div className="col-xs-9">
+            <span className={styles.chapterName}>
+              {chapters[chapter].nameSimple}
+            </span>
+
+            <span className="h5">
+              <small>{juz.verseMapping[chapter]}</small>
+            </span>
+          </div>
+          <div className={`col-xs-3 text-left ${styles.arabic}`}>
+            <span className={`icon-surah${chapters[chapter].id}`} />
+          </div>
+
+          <div
+            className={`col-xs-10 text-uppercase ${styles.translated_name} ${chapters[chapter].languageName}`}
           >
-            {juz.verseMapping[chapter]}
-          </Link>
-        </span>
+            <small>{chapters[chapter].translatedName.name}</small>
+          </div>
+        </Link>
       </div>
     ));
 
-    return list;
+    return (
+      <div className="col-md-10">
+        <div className="row">
+          {list}
+        </div>
+      </div>
+    );
   }
 
   render() {
@@ -36,14 +54,10 @@ class JuzList extends Component {
     return (
       <ul className="col-md-4 list-unstyled">
         {juzs.map(juz => (
-          <li className={`${styles.item}`} key={juz.juzNumber}>
-            <div className="col-xs-2 text-muted">
+          <li className={`${styles.item} row`} key={juz.juzNumber}>
+            <div className="col-xs-2 col-md-1 text-muted">
               {juz.juzNumber}
             </div>
-            <div className="col-xs-7">
-              {juz.nameArabic}
-              {juz.nameSimple}
-            </div>
             {this.renderJuz(juz)}
           </li>
         ))}

src/components/Home/JuzList/styles.scss

@@ -3,19 +3,26 @@
 .item {
   color: $brand-primary;
 
-  &:hover {
-    background: #f1f1f1;
-  }
-
   .link {
     display: block;
     padding: 10px 10px;
+
+    &:hover {
+      background: #f1f1f1;
+    }
   }
 
   .translated_name {
     font-size: 10px;
+    color: #777;
   }
+
   .arabic {
     font-size: 14px;
   }
+
+  .chapterName{
+    margin-right: 5px;
+    font-size: 14px;
+  }
 }

src/components/Home/SurahsList/style.scss

@@ -10,10 +10,15 @@
   .link {
     display: block;
     padding: 10px 10px;
+
+    &:hover {
+      background: #f1f1f1;
+    }
   }
 
   .translated_name {
     font-size: 10px;
+    color: #777;
   }
   .arabic {
     font-size: 14px;

src/components/SurahsDropdown/index.js

@@ -16,7 +16,11 @@ class SurahsDropdown extends Component {
     const { chapters } = this.props;
 
     return Object.values(chapters).map((chapter, index) => (
-      <LinkContainer to={`/${chapter.chapterNumber}`} activeClass="active" key={`chapter-${index}`}>
+      <LinkContainer
+        to={`/${chapter.chapterNumber}`}
+        activeClass="active"
+        key={`chapter-${index}`}
+      >
         <MenuItem>
           <div className="row">
             <div className="col-xs-2 col-md-2">
@@ -27,9 +31,13 @@ class SurahsDropdown extends Component {
             <div className="col-xs-7 col-md-7">
               <span className="suran-name">{chapter.nameSimple}</span>
               <br />
-              <span className="chapter-meaning">{chapter.translatedName.name}</span>
+              <span className="chapter-meaning">
+                {chapter.translatedName.name}
+              </span>
             </div>
-            <div className={`col-xs-3  col-md-3 text-right ${styles.arabicName}`}>
+            <div
+              className={`col-xs-3  col-md-3 text-right ${styles.arabicName}`}
+            >
               {chapter.nameArabic}
             </div>
           </div>
@@ -43,10 +51,15 @@ class SurahsDropdown extends Component {
 
     return (
       <NavDropdown
-        link
         className={styles.dropdown}
         id="chapters-dropdown"
-        title={chapter.nameSimple || <LocaleFormattedMessage id="setting.chapters" defaultMessage="Surahs" />}
+        title={
+          chapter.nameSimple ||
+            <LocaleFormattedMessage
+              id="setting.chapters"
+              defaultMessage="Surahs"
+            />
+        }
       >
         {this.renderList()}
       </NavDropdown>
@@ -56,7 +69,7 @@ class SurahsDropdown extends Component {
 
 SurahsDropdown.propTypes = {
   chapters: customPropTypes.chapters.isRequired,
-  chapter: customPropTypes.chapters.isRequired,
+  chapter: customPropTypes.surahType.isRequired
 };
 
 export default SurahsDropdown;

src/components/VersesDropdown/index.js

@@ -57,7 +57,6 @@ class VersesDropdown extends Component {
 
     return (
       <NavDropdown
-        link
         className={`dropdown ${className} ${style.dropdown}`}
         id="verses-dropdown"
         title={title}

src/containers/Home/index.js

@@ -30,9 +30,9 @@ class Home extends Component {
 
     return (
       <div className="row">
-        <JuzList chapters={chapters} juzs={juzList.slice(0, 10)} />
-        <JuzList chapters={chapters} juzs={juzList.slice(10, 20)} />
-        <JuzList chapters={chapters} juzs={juzList.slice(20, 30)} />
+        <JuzList chapters={chapters} juzs={juzList.slice(0, 20)} />
+        <JuzList chapters={chapters} juzs={juzList.slice(20, 28)} />
+        <JuzList chapters={chapters} juzs={juzList.slice(28, 30)} />
       </div>
     );
   }

src/containers/Surah/index.js

@@ -228,7 +228,9 @@ class Surah extends Component {
       </div>
     );
 
-    return isLoading ? <Loader isActive relative style={LoaderStyle} /> : noAyah;
+    return isLoading
+      ? <Loader isActive relative style={LoaderStyle} />
+      : noAyah;
   }
 
   renderPagination() {
@@ -306,7 +308,9 @@ class Surah extends Component {
               </li>}
           </ul>
         }
-        loadingComponent={<Loader isActive={isLoading} relative style={LoaderStyle} />}
+        loadingComponent={
+          <Loader isActive={isLoading} relative style={LoaderStyle} />
+        }
       />
     );
   }
@@ -434,7 +438,7 @@ class Surah extends Component {
             </div>
           </div>
         </div>
-        {__CLIENT__ &&
+        {__CLIENT__ && // eslint-disable-line
           <Audioplayer
             chapter={chapter}
             verses={verses}

src/redux/actions/verses.js

@@ -15,7 +15,7 @@ import {
 
 // NOTE: For safe measure
 const defaultOptions = {
-  translations: [101]
+  translations: [108]
 };
 
 // NOTE: From the API!
@@ -30,7 +30,7 @@ function prepareParams(params, options) {
       ? params.translations.split(',')
       : params.translations;
   } else {
-    translations = options.translations || defaultOptions.translations;
+    translations = options.translations; // || defaultOptions.translations;
   }
 
   return { translations };

src/redux/modules/options.js

@@ -16,7 +16,7 @@ const initialState = {
   isNightMode: options.isNightMode || false,
   isShowingSurahInfo: options.isShowingSurahInfo || false,
   audio: options.audio || 7, // Mishari Rashid al-`Afasy
-  translations: options.translations || [101], // Clear Quran
+  translations: options.translations || [108], // Clear Quran
   tooltip: options.tooltip || 'translation',
   fontSize: options.fontSize || {
     arabic: 3.5,