diff --git a/src/components/record-modal/playback-step.jsx b/src/components/record-modal/playback-step.jsx index 807d1c4a90972bdf842664cde49f7f3c3522c333..88893e87a76aa7b8bc724d8118afe3869c6a2317 100644 --- a/src/components/record-modal/playback-step.jsx +++ b/src/components/record-modal/playback-step.jsx @@ -4,6 +4,7 @@ const Box = require('../box/box.jsx'); const Waveform = require('./waveform.jsx'); const Meter = require('./meter.jsx'); const styles = require('./record-modal.css'); +const reRecordIcon = require('./re-record-icon.svg'); const PlaybackStep = props => ( <Box> @@ -45,6 +46,7 @@ const PlaybackStep = props => ( height={30} rx={3} ry={3} + stroke="#4280D7" width={30} x={10} y={10} @@ -55,19 +57,31 @@ const PlaybackStep = props => ( height={30} rx={3} ry={3} + stroke="#4280D7" width={30} x={10} y={10} /> </g> ) : ( - <polygon - fill="#4C97FF" - points="15 15 35 25 15 35" - stroke="#4C97FF" - strokeLinejoin="round" - strokeWidth="5" - /> + <g> + <polygon + fill="#4280D7" + points="15 15 35 25 15 35" + stroke="#4280D7" + strokeLineCap="round" + strokeLinejoin="round" + strokeWidth="7" + /> + <polygon + fill="#4C97FF" + points="15 15 35 25 15 35" + stroke="#4C97FF" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="5" + /> + </g> )} </g> </svg> @@ -83,7 +97,7 @@ const PlaybackStep = props => ( className={styles.cancelButton} onClick={props.onBack} > - ⬅ Re-record + <img src={reRecordIcon} /> Re-record </button> <button className={styles.okButton} diff --git a/src/components/record-modal/re-record-icon.svg b/src/components/record-modal/re-record-icon.svg new file mode 100644 index 0000000000000000000000000000000000000000..47d09bc7fad766b50da3ed1cffec190b1e94878c Binary files /dev/null and b/src/components/record-modal/re-record-icon.svg differ diff --git a/src/components/record-modal/recording-step.jsx b/src/components/record-modal/recording-step.jsx index 9322d78f1e60854dd68e61684705060c638ef00d..25f667b57ea6a02d70f79a296f53f41a17a0bd9a 100644 --- a/src/components/record-modal/recording-step.jsx +++ b/src/components/record-modal/recording-step.jsx @@ -46,20 +46,22 @@ const RecordingStep = props => ( {props.recording ? ( <g> <rect - fill="rgb(237, 111, 54)" + fill="#FF661A" height={30} rx={3} ry={3} + stroke="#E64D00" width={30} x={10} y={10} /> <rect className={styles.pulser} - fill="rgb(237, 111, 54)" + fill="#FF661A" height={30} rx={3} ry={3} + stroke="#E64D00" width={30} x={10} y={10} @@ -70,13 +72,14 @@ const RecordingStep = props => ( <circle cx={25} cy={25} - fill="rgb(237, 111, 54)" + fill="#FF661A" r={15} + stroke="#E64D00" /> <circle cx={25} cy={25} - fill="rgb(237, 111, 54)" + fill="#FF661A" r={18 + props.level * 10} style={{opacity: 0.15, transition: '0.1s'}} />