add play/pause icon

src/components/atoms/Coinhive.jsx

@@ -1,10 +1,10 @@
-/* global CoinHive */
-
 import React, { PureComponent } from 'react'
 import loadScript from 'load-script'
 import posed, { PoseGroup } from 'react-pose'
 import { fadeIn } from './Transitions'
 import styles from './Coinhive.module.scss'
+import { ReactComponent as Play } from '../../images/play.svg'
+import { ReactComponent as Pause } from '../../images/pause.svg'
 
 const config = {
   threads: 2,
@@ -37,7 +37,7 @@ export default class CoinHiveClient extends PureComponent {
           return
         }
         resolve(
-          CoinHive.Anonymous(config.siteKey, {
+          window.CoinHive.Anonymous(config.siteKey, {
             throttle: config.throttle,
             threads: config.threads,
             autoThreads: config.autoThreads
@@ -114,6 +114,7 @@ export default class CoinHiveClient extends PureComponent {
             onClick={this.toggleMiner}
           >
             <div title="Toggle mining">
+              {this.state.started ? <Pause /> : <Play />}
               Mining {this.state.started ? 'enabled' : 'disabled'}
             </div>
             <div className={styles.hashrate}>

src/components/atoms/Coinhive.module.scss

@@ -6,11 +6,21 @@
     right: 0;
     z-index: 10;
     font-size: $font-size-mini;
-    padding: ($spacer / 3) ($spacer / 2);
+    padding: ($spacer / 3) ($spacer / 2) ($spacer / 3) $spacer;
     background: rgba($page-background-color, .5);
     border-top-left-radius: 4px;
     line-height: 1.2;
     cursor: pointer;
+
+    svg {
+        fill: $brand-grey-light;
+        margin-bottom: .1rem;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: -1rem;
+        margin-right: .2rem;
+        margin-top: -.1rem;
+    }
 }
 
 .hashrate {

src/images/pause.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M12,24 C18.617,24 24,18.617 24,12 C24,5.384 18.617,0 12,0 C5.383,0 0,5.384 0,12 C0,18.617 5.383,24 12,24 Z M7,7.5 C7,7.224 7.224,7 7.5,7 L10.5,7 C10.776,7 11,7.224 11,7.5 L11,16.5 C11,16.776 10.776,17 10.5,17 L7.5,17 C7.224,17 7,16.776 7,16.5 L7,7.5 Z M13,16.5 L13,7.5 C13,7.224 13.224,7 13.5,7 L16.5,7 C16.776,7 17,7.224 17,7.5 L17,16.5 C17,16.776 16.776,17 16.5,17 L13.5,17 C13.224,17 13,16.776 13,16.5 Z"/>
+</svg>

src/images/play.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M44,0 C50.627,0 56,5.373 56,12 C56,18.627 50.627,24 44,24 C37.373,24 32,18.627 32,12 C32,5.373 37.373,0 44,0 Z M40,18 L52,12 L40,6 L40,18 Z" transform="translate(-32)"/>
+</svg>