From 11d8c61030b89e266cf48a1f1ebedeca35ef46c8 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 23 Jun 2017 10:11:07 -0400
Subject: [PATCH] Use re-record icon
---
src/components/record-modal/playback-step.jsx | 30 +++++++++++++-----
.../record-modal/re-record-icon.svg | Bin 0 -> 2848 bytes
.../record-modal/recording-step.jsx | 11 ++++---
3 files changed, 29 insertions(+), 12 deletions(-)
create mode 100644 src/components/record-modal/re-record-icon.svg
diff --git a/src/components/record-modal/playback-step.jsx b/src/components/record-modal/playback-step.jsx
index 807d1c4a9..88893e87a 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
GIT binary patch
literal 2848
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
Ih1zie00)77nE(I)
literal 0
HcmV?d00001
diff --git a/src/components/record-modal/recording-step.jsx b/src/components/record-modal/recording-step.jsx
index 9322d78f1..25f667b57 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'}}
/>
--
GitLab