diff --git a/src/App.js b/src/App.js index 4367219..b827068 100644 --- a/src/App.js +++ b/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 ( - + ) diff --git a/src/components/MainControl.js b/src/components/MainControl.js index 8e8338f..d13987d 100644 --- a/src/components/MainControl.js +++ b/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 (
- - - - - - + dispatch(decrementSentence())} + Icon={FiRewind} + /> + dispatch(decrementWord())} + /> + dispatch(incrementWord())} + /> + dispatch(incrementSentence())} + />
) } diff --git a/src/components/Player.js b/src/components/Player.js index 762f1de..ec62da0 100644 --- a/src/components/Player.js +++ b/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 (
{isRunning && ( - )}{' '} + )} {!isRunning && ( )}
diff --git a/src/styles/IconButton.js b/src/styles/IconButton.js new file mode 100644 index 0000000..ca4a45a --- /dev/null +++ b/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 ( + + {Icon && + ) +}