Merge pull request #30 from sabeurthabti/feature/qaripagedesign

some of the tasks on issue #29

src/components/Audioplayer/style.scss

@@ -16,6 +16,10 @@
   padding-left: 25px;
 }
 
+.surahName {
+  color: #292929;
+}
+
 .info {
   position: absolute;
   right: 15px;

src/containers/Home/style.scss

@@ -78,6 +78,9 @@
 
   .pillsItem {
     font-size: 16px;
+    &:hover {    
+      background-color: $hover-grey;
+    }
   }
 }
 

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}>

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;
     }

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();
       }
 

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;

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;

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;
 };