- ayah's have link (discuss, maybe not needed)

- Fix audio player playing text
- Remove unneeded padding on mobile
- Hide Share on mobile devices (native share is built into the browsers)

src/components/Audioplayer/style.scss

@@ -33,7 +33,6 @@
   text-align: center;
 
   :global(li){
-    padding-left: 15px;
     padding-right: 15px;
     display: table-cell;
   }

src/components/Ayah/index.js

@@ -189,7 +189,13 @@ export default class Ayah extends Component {
       );
     }
 
-    return content;
+    return (
+      <Link
+        to={`/${this.props.ayah.surahId}:${this.props.ayah.ayahNum}`}
+        data-metrics-event-name="Ayah:Link"
+      >
+        {content}
+      </Link>);
   }
 
   renderControls() {

src/components/Share/index.js

@@ -18,7 +18,7 @@ export default class Share extends Component {
     const surahUrl = encodeURIComponent(`http://quran.com/${surahId}`);
 
     return (
-      <div className={Style.shareContainer}>
+      <div className={`${Style.shareContainer} hidden-xs`}>
 
         <i
           onClick={() => this.onClickPopup(`https://www.facebook.com/sharer/sharer.php?u=${surahUrl}`, 'Facebook')}

src/components/Share/style.scss

@@ -1,7 +1,9 @@
+@import '../../styles/variables';
+
 .shareContainer {
   position: relative;
-  bottom: 2px;
   left: 5px;
+  top: 2px;
 
   .iconContainer {
     padding: 0 30px 10px 0;
@@ -30,5 +32,3 @@
   }
 
 }
-
-

src/components/SurahInfo/style.scss

@@ -9,6 +9,11 @@ $transition-speed: 0.75s;
   min-height: 0px;
   transition: max-height $transition-speed, height $transition-speed;
 
+
+  @media(max-width: $screen-xs-max) {
+    margin-bottom: 0;
+  }
+
   &.show{
     max-height: 600px;
     max-height: 70vh;

src/containers/Home/style.scss

@@ -5,6 +5,10 @@
     padding: 50px 0px;
     font-size: 14px;
     margin: 0px;
+
+    @media(max-width: $screen-xs-max) {
+      padding: 10px 0;
+    }
   }
 
   .lastVisit{

src/containers/Surah/index.js

@@ -398,7 +398,6 @@ export default class Surah extends Component {
                 onReadingModeToggle={toggleReadingMode}
               />
             </li>
-            <li>|</li>
             <li><Share surah={surah} /></li>
           </ul>
         </Col>