From 626f0075a610311348a637cb2a6cb1c1a2fc89b7 Mon Sep 17 00:00:00 2001
From: Sabeur Thabti <thabti.sabeur@gmail.com>
Date: Wed, 9 Nov 2016 23:10:54 +0000
Subject: [PATCH] some of the tasks on issue #29

---
 src/components/Audioplayer/style.scss |  4 ++++
 src/containers/Home/style.scss        |  3 +++
 src/containers/Qari/index.js          |  4 ++--
 src/containers/Qari/style.scss        | 25 +++++++++++++++++++------
 src/reducers/audioplayer.js           |  2 +-
 src/styles/bootstrap.overrides.scss   |  5 +++--
 src/styles/variables.scss             |  2 +-
 src/utils/formatSeconds.js            |  9 +++++++--
 8 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/Audioplayer/style.scss b/src/components/Audioplayer/style.scss
index dfb119d..6d31f45 100644
--- a/src/components/Audioplayer/style.scss
+++ b/src/components/Audioplayer/style.scss
@@ -16,6 +16,10 @@
   padding-left: 25px;
 }
 
+.surahName {
+  color: #292929;
+}
+
 .info {
   position: absolute;
   right: 15px;
diff --git a/src/containers/Home/style.scss b/src/containers/Home/style.scss
index 013f4a9..dc6be61 100644
--- a/src/containers/Home/style.scss
+++ b/src/containers/Home/style.scss
@@ -78,6 +78,9 @@
 
   .pillsItem {
     font-size: 16px;
+    &:hover {    
+      background-color: $hover-grey;
+    }
   }
 }
 
diff --git a/src/containers/Qari/index.js b/src/containers/Qari/index.js
index 50202b3..61da777 100644
--- a/src/containers/Qari/index.js
+++ b/src/containers/Qari/index.js
@@ -77,10 +77,10 @@ class Qaris extends Component {
                     Object.values(surahs).filter(surah => files[surah.id]).map(surah => (
                        <li
                         key={surah.id}
-                        className={`list-group-item ${styles.row} ${surah.id === currentSurah.id ? `${styles.current} js-currentSurah` : ''}`}
+                        className={`list-group-item ${styles.row} ${surah.id === currentSurah.id ? `${styles.active} js-currentSurah` : ''}`}
                         onClick={() => this.handleSurahSelection(surah)}
                       >
-                        <Row>
+                        <Row className={styles.surahRow}>
                           <Col md={6} xs={8}>
                             <Row>
                               <Col md={1} xs={2}>
diff --git a/src/containers/Qari/style.scss b/src/containers/Qari/style.scss
index a354520..8831f3b 100644
--- a/src/containers/Qari/style.scss
+++ b/src/containers/Qari/style.scss
@@ -20,7 +20,7 @@
 
 .panel{
   border-radius: 0px;
-  padding: 20px;
+  padding: 10px;
   border: none;
 
   .muted{
@@ -36,13 +36,26 @@
     margin-left: 5px;
   }
 
-
+  .surahRow {
+    margin-right: -12px;
+  }
   :global(.list-group-item){
-
+    border-color: $border-color;
+    
+    &.active {
+      border-left: 2px solid $brand-primary;
+      & .surahRow div > * {
+        color: $brand-primary;
+      }
+      & .surahRow .muted {
+        opacity: 1;
+        
+      }
+    }
   }
 
   :global(.list-group-item:hover){
-
+    background-color: $hover-grey;
   }
 }
 
@@ -53,17 +66,17 @@
     display: none;
   }
 
-  &.current {
+  &.active {
     background-color: $hover-grey;
   }
 
   &:hover{
-    background-color: $hover-grey;
 
     :global(.fa-play-circle){
       display: inline;
       line-height: 0.5em;
     }
+
     :global(.index){
       display: none;
     }
diff --git a/src/reducers/audioplayer.js b/src/reducers/audioplayer.js
index 8e31923..e4f6eed 100644
--- a/src/reducers/audioplayer.js
+++ b/src/reducers/audioplayer.js
@@ -69,10 +69,10 @@ export default function reducer(state = initialState, action = {}) {
       };
     case PLAY_PAUSE:
       if (!state.file) return state;
-
       if (state.file.paused && state.file.readyState >= 3) {
         state.file.play();
       } else if (!state.file.paused && state.file.readyState >= 3) {
+        debugger;
         state.file.pause();
       }
 
diff --git a/src/styles/bootstrap.overrides.scss b/src/styles/bootstrap.overrides.scss
index 3733ea2..69b25eb 100644
--- a/src/styles/bootstrap.overrides.scss
+++ b/src/styles/bootstrap.overrides.scss
@@ -16,6 +16,7 @@
   &.vertical-align{
     & > li{
       vertical-align: middle;
+      padding-bottom: 1px;
     }
   }
 }
@@ -26,14 +27,14 @@
 
 .home-nav-pills.nav-justified{
   li{
-    border-bottom: 2px solid #d7d7d7;
+    border-bottom: 1px solid $border-color;
 
     a:hover{
       background: transparent;
     }
 
     &.active{
-      border-bottom: 3px solid $brand-primary;
+      border-bottom: 2px solid $brand-primary;
 
       a{
         background: #fff;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d9e7286..6a172b8 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,7 +4,7 @@ $brand-success: #5cb85c;
 $brand-warning: #f0ad4e;
 $brand-danger: #d9534f;
 $brand-info: #5bc0de;
-$border-color: #EFEFEF;
+$border-color: #F0F0F0;
 $text-color: #444;
 $hover-grey: #f7f7f7;
 $font-size-base: 14px;
diff --git a/src/utils/formatSeconds.js b/src/utils/formatSeconds.js
index 17ff8f3..982b2ae 100644
--- a/src/utils/formatSeconds.js
+++ b/src/utils/formatSeconds.js
@@ -1,6 +1,11 @@
 export default (seconds) => {
   const date = new Date(null);
   date.setSeconds(seconds); // specify value for SECONDS here
-
-  return date.toISOString().substr(11, 8);
+  const time = date.toISOString().substr(11, 8);
+  const splitTime = time.split(':');
+  if (splitTime[0] === '00') {
+    splitTime.shift();
+    return splitTime.join(':');
+  }
+  return time;
 };