diff --git a/shared/components/Preview/PreviewFrame.jsx b/shared/components/Preview/PreviewFrame.jsx
index b0d2b21a..d29423d1 100644
--- a/shared/components/Preview/PreviewFrame.jsx
+++ b/shared/components/Preview/PreviewFrame.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component {
-
+
componentDidMount() {
if (this.props.isPlaying) {
this.renderFrameContents();
@@ -57,8 +57,8 @@ class PreviewFrame extends React.Component {
}
render() {
- return ;
+ return ;
}
}
-export default PreviewFrame;
\ No newline at end of file
+export default PreviewFrame;
diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
index 6c6ca618..5b68754d 100644
--- a/shared/components/Toolbar/Toolbar.jsx
+++ b/shared/components/Toolbar/Toolbar.jsx
@@ -12,21 +12,23 @@ class Toolbar extends React.Component {
"toolbar__play-button": true,
"playing": this.props.isPlaying
});
+ let stopButtonClass = classNames({
+ "toolbar__stop-button": true,
+ "stopped": !this.props.isPlaying
+ });
return (
-
+
- { this.props.isPlaying ?
-
-
-
- : null }
+
+
);
}
}
-export default Toolbar;
\ No newline at end of file
+export default Toolbar;
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
index 13750426..b24ad210 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/styles/abstracts/_placeholders.scss
@@ -6,9 +6,9 @@
width: #{44 / $base-font-size}rem;
text-align: center;
border-radius: 100%;
-
line-height: #{50 / $base-font-size}rem;
cursor: pointer;
+ border: none;
& g {
fill: $light-toolbar-button-color;
@@ -22,4 +22,4 @@
fill: $light-button-hover-color;
}
}
-}
\ No newline at end of file
+}
diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss
index f2f1775e..d5bafa53 100644
--- a/styles/components/_toolbar.scss
+++ b/styles/components/_toolbar.scss
@@ -11,6 +11,12 @@
.toolbar__stop-button {
@extend %toolbar-button;
+ &.stopped {
+ background-color: $light-button-background-hover-color;
+ & g {
+ fill: $light-button-hover-color;
+ }
+ }
}
.toolbar__logo {
@@ -20,4 +26,4 @@
.toolbar {
padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
display: flex;
-}
\ No newline at end of file
+}