Merge pull request #786 from LiskHQ/658-avoid-red-for-good-transactions

 Make outgoing transactions black instead of red - Closes #658

src/components/transactions/amount.test.js

@@ -53,7 +53,7 @@ describe('Amount', () => {
       .to.have.lengthOf(1);
   });
 
-  it('should have className "transactions__outButton" for outgoing transaction', () => {
+  it('should have className "transactions__grayButton" for outgoing transaction', () => {
     const inputValue = {
       value: {
         type: 1,

src/components/transactions/status.js

@@ -3,16 +3,24 @@ import { IconButton } from 'react-toolbox/lib/button';
 import styles from './transactions.css';
 
 const Status = (props) => {
-  let template = null;
+  let iconProps = {};
   if (props.value.type === 0 &&
     props.value.senderId === props.value.recipientId) {
-    template = <IconButton icon='replay' disabled={true}/>;
+    iconProps = {
+      icon: 'replay',
+    };
   } else if (props.value.senderId !== props.address) {
-    template = <IconButton icon='call_received' className={styles.in} disabled={true}/>;
+    iconProps = {
+      icon: 'call_received',
+      className: styles.in,
+    };
   } else if (props.value.type !== 0 || props.value.recipientId !== props.address) {
-    template = <IconButton icon='call_made' className={styles.out} disabled={true}/>;
+    iconProps = {
+      icon: 'call_made',
+      className: styles.out,
+    };
   }
-  return template;
+  return <IconButton {...iconProps} disabled={true}/>;
 };
 
 export default Status;

src/components/transactions/transactions.css

@@ -1,6 +1,6 @@
 :root {
   --in: #73c8a9;
-  --out: #f45d4c;
+  --out: #777;
   --btn: rgb(2, 136, 209);
 }
 
@@ -29,10 +29,6 @@
   text-align: center;
 }
 
-.outButton {
-  background: color(var(--out) alpha(45%)) !important;
-}
-
 .in {
   color: var(--in) !important;
 }