Add styled icons

src/App.js

@@ -1,14 +1,12 @@
 import React from 'react'
 
-import { TextInput } from './components/TextInput'
-import { TextOutput } from './components/TextOutput'
 import { RsvpReader } from './components/RsvpReader'
 
 import { IconContext } from 'react-icons'
 
 export function App() {
   return (
-    <IconContext.Provider value={{ color: 'grey', size: '1em' }}>
+    <IconContext.Provider value={{ color: 'grey', size: '1.4em' }}>
       <RsvpReader></RsvpReader>
     </IconContext.Provider>
   )

src/components/MainControl.js

@@ -1,5 +1,14 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
+import {
+  FiSkipBack,
+  FiSkipForward,
+  FiRewind,
+  FiFastForward
+} from 'react-icons/fi'
+
+import { IconButton } from '../styles/IconButton'
+
 import {
   incrementSentence,
   incrementSegment,
@@ -13,16 +22,26 @@ export const MainControl = () => {
   const dispatch = useDispatch()
   return (
     <div>
-      <button onClick={() => dispatch(decrementSentence())}>
+      <IconButton
-        {'<'}Sentence
+        title="Previous Sentence"
-      </button>
+        onClick={() => dispatch(decrementSentence())}
-      <button onClick={() => dispatch(decrementWord())}>{'<'}Word</button>
+        Icon={FiRewind}
-      <button onClick={() => dispatch(decrementSegment())}>{'<'}</button>
+      />
-      <button onClick={() => dispatch(incrementSegment())}>{'>'}</button>
+      <IconButton
-      <button onClick={() => dispatch(incrementWord())}>Word{'>'}</button>
+        Icon={FiSkipBack}
-      <button onClick={() => dispatch(incrementSentence())}>
+        title="Previous Word"
-        Sentence{'>'}
+        onClick={() => dispatch(decrementWord())}
-      </button>
+      />
+      <IconButton
+        Icon={FiSkipForward}
+        title="Next Word"
+        onClick={() => dispatch(incrementWord())}
+      />
+      <IconButton
+        Icon={FiFastForward}
+        title="Next Sentence"
+        onClick={() => dispatch(incrementSentence())}
+      />
     </div>
   )
 }

src/components/Player.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 
-import { FaPlay, FaPause, FaStop } from 'react-icons/fa'
+import { FiPlay, FiPause, FiSquare } from 'react-icons/fi'
 
 function safeCall(fn) {
   typeof fn === 'function' && fn()
@@ -27,16 +27,16 @@ export const Player = ({ onTick, onStart, onStop, onPause, delay }) => {
   return (
     <div>
       <button onClick={handleStop}>
-        <FaStop />
+        <FiSquare />
       </button>
       {isRunning && (
         <button onClick={handlePause}>
-          <FaPause />
+          <FiPause />
         </button>
-      )}{' '}
+      )}
       {!isRunning && (
         <button onClick={handleStart}>
-          <FaPlay />
+          <FiPlay />
         </button>
       )}
     </div>

src/styles/IconButton.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const SvgButton = styled.button`
+  display: inline-block;
+  border: none;
+  border-radius: 2px;
+  background: none;
+  cursor: pointer;
+  padding: 3px;
+  /* width: 1.4em; */
+  /* height: 1.4em; */
+
+  svg {
+    outline: none;
+    transition: transform 0.1s linear;
+    vertical-align: middle;
+  }
+
+  &:focus {
+    outline: 2px dashed #17171d;
+  }
+
+  &:hover {
+    svg {
+      transform: scale(1.1);
+    }
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+`
+
+const AccessLabel = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+`
+
+export const IconButton = ({ title, onClick, Icon }) => {
+  return (
+    <SvgButton onClick={onClick} title={title} tabindex="0">
+      {Icon && <Icon aria-hidden="true" focusable="false" />}
+      <AccessLabel>{title}</AccessLabel>
+    </SvgButton>
+  )
+}