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 75bf8ce5..e8afe9cb 100644
--- a/shared/components/Toolbar/Toolbar.jsx
+++ b/shared/components/Toolbar/Toolbar.jsx
@@ -10,23 +10,25 @@ class Toolbar extends React.Component {
render() {
let playButtonClass = classNames({
"toolbar__play-button": true,
- "playing": this.props.isPlaying
+ "toolbar__play-button--selected": this.props.isPlaying
+ });
+ let stopButtonClass = classNames({
+ "toolbar__stop-button": true,
+ "toolbar__stop-button--selected": !this.props.isPlaying
});
return (
![p5js Logo]({logoUrl})
-
+
- { 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..bf21414f 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/styles/abstracts/_placeholders.scss
@@ -6,9 +6,10 @@
width: #{44 / $base-font-size}rem;
text-align: center;
border-radius: 100%;
-
line-height: #{50 / $base-font-size}rem;
cursor: pointer;
+ border: none;
+ outline: none;
& g {
fill: $light-toolbar-button-color;
@@ -22,4 +23,10 @@
fill: $light-button-hover-color;
}
}
-}
\ No newline at end of file
+ &--selected {
+ background-color: $light-button-background-hover-color;
+ & g {
+ fill: $light-button-hover-color;
+ }
+ }
+}
diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss
index f2f1775e..043667dc 100644
--- a/styles/components/_toolbar.scss
+++ b/styles/components/_toolbar.scss
@@ -1,16 +1,16 @@
.toolbar__play-button {
@extend %toolbar-button;
margin-right: #{15 / $base-font-size}rem;
- &.playing {
- background-color: $light-button-background-hover-color;
- & g {
- fill: $light-button-hover-color;
- }
+ &--selected {
+ @extend %toolbar-button--selected;
}
}
.toolbar__stop-button {
@extend %toolbar-button;
+ &--selected {
+ @extend %toolbar-button--selected;
+ }
}
.toolbar__logo {
@@ -20,4 +20,4 @@
.toolbar {
padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
display: flex;
-}
\ No newline at end of file
+}