diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css index b8000e48277db1b70c458db492e1ff21df36d1af..1931b2d2188d9a6525942bdac40051342ff2daef 100644 --- a/src/components/green-flag/green-flag.css +++ b/src/components/green-flag/green-flag.css @@ -1,11 +1,7 @@ .green-flag { - position: absolute; - top: 8px; - right: calc(480px - 16px); width: 16px; height: 16px; } - -.active { +.green-flag.is-active { filter: saturate(200%) brightness(150%); } diff --git a/src/components/green-flag/green-flag.jsx b/src/components/green-flag/green-flag.jsx index f1b24b1516471c1cd650181c008df3a3b180c9d8..a5642641a89aab3efbebfdcb00789be10dda6d7d 100644 --- a/src/components/green-flag/green-flag.jsx +++ b/src/components/green-flag/green-flag.jsx @@ -15,7 +15,7 @@ const GreenFlagComponent = function (props) { <img className={classNames({ [styles.greenFlag]: true, - [styles.active]: active + [styles.isActive]: active })} src={greenFlagIcon} title={title} @@ -24,16 +24,13 @@ const GreenFlagComponent = function (props) { /> ); }; - GreenFlagComponent.propTypes = { active: React.PropTypes.bool, onClick: React.PropTypes.func, title: React.PropTypes.string }; - GreenFlagComponent.defaultProps = { active: false, title: 'Go' }; - module.exports = GreenFlagComponent; diff --git a/src/components/stop-all/stop-all.css b/src/components/stop-all/stop-all.css index ff44af122de95cbf7344bece99700e37a5c895c1..227391698974774c4a30433cbbd80fcb2f3a4b7c 100644 --- a/src/components/stop-all/stop-all.css +++ b/src/components/stop-all/stop-all.css @@ -1,11 +1,7 @@ .stop-all { - position: absolute; - top: 8px; - right: calc(480px - 16px - 12px - 16px); width: 16px; height: 16px; } - -.active { +.stop-all.is-active { filter: saturate(200%) brightness(150%); } diff --git a/src/components/stop-all/stop-all.jsx b/src/components/stop-all/stop-all.jsx index 8d0d8ccfb00004e4ec79c00b33e0e200ee98ebac..1c009de44bbf236523a5300d34ca791829dde1ef 100644 --- a/src/components/stop-all/stop-all.jsx +++ b/src/components/stop-all/stop-all.jsx @@ -15,7 +15,7 @@ const StopAllComponent = function (props) { <img className={classNames({ [styles.stopAll]: true, - [styles.active]: active + [styles.isActive]: active })} src={stopAllIcon} title={title}