From 370d66e45f16f33b501d848c88080a66cff49d0a Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Thu, 15 Dec 2016 11:15:40 -0500
Subject: [PATCH] Adhere to Trello CSS guide in green flag/stop
---
src/components/green-flag/green-flag.css | 6 +-----
src/components/green-flag/green-flag.jsx | 5 +----
src/components/stop-all/stop-all.css | 6 +-----
src/components/stop-all/stop-all.jsx | 2 +-
4 files changed, 4 insertions(+), 15 deletions(-)
diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css
index b8000e482..1931b2d21 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 f1b24b151..a5642641a 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 ff44af122..227391698 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 8d0d8ccfb..1c009de44 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}
--
GitLab