Rehash of swipe interactivity for touch play bar

src/js/views/Settings.js

@@ -433,7 +433,10 @@ class Settings extends React.Component {
             <div className="input">
               <span className="text">
                 {this.props.pusher.version.current}
-                {' installed'}
+                {' '}
+                <span className="mid_grey-text">
+                  {build}
+                </span>
                 {this.props.pusher.version.upgrade_available ? (
                   <span className="flag flag--dark">
                     <Icon name="cloud_download" className="blue-text" />
@@ -444,7 +447,7 @@ class Settings extends React.Component {
                       <Icon name="check" className="green-text" />
                       {'  Up-to-date'}
                     </span>
-                  )}
+                )}
               </span>
             </div>
           </div>

src/js/views/modals/KioskMode.js

@@ -169,8 +169,12 @@ class KioskMode extends React.Component {
     }
 
     const extraControls = (
-      <div className="control" onClick={this.toggleLyrics} style={show_lyrics ? { opacity: 1 } : {}}>
-        <Icon name="queue_music" className={show_lyrics ? 'turquoise-text' : null} />
+      <div className="control" onClick={this.toggleLyrics}>
+        {show_lyrics ? <Icon name="toggle_on" className="turquoise-text" />
+          : <Icon name="toggle_off" />}
+        <div style={{ paddingLeft: '6px', fontWeight: 'bold' }}>
+          Lyrics
+        </div>
       </div>
     );
 

src/js/views/modals/Modal.js

@@ -24,12 +24,12 @@ class Modal extends React.Component {
       <div className={`modal ${className}`}>
 
         <div className="controls">
+          {extraControls}
           {!noclose && (
             <div className="control close" onClick={(e) => window.history.back()}>
               <Icon name="close" className="white" />
             </div>
           )}
-          {extraControls}
         </div>
 
         <div className="content">