Iss #33 Cleaning up color coding.

app/components/Balance.jsx

@@ -10,16 +10,19 @@ Balance.propTypes = {
 };
 
 export function Balance (props) {
-    return (
-      <div className="player-balance container">
-        <div className="balance-label">
-          Balance
-        </div>
-        <div className="balance-value">
-          {toCurrencyString(props.balance)}
-        </div>
+  const { balance } = props;
+  const cls_balance = balance < 0 ? 'loss' : 'win';
+
+  return (
+    <div className="player-balance container">
+      <div className="balance-label">
+        Balance
+      </div>
+      <div className={ "balance-value " + cls_balance }>
+        {toCurrencyString(props.balance)}
       </div>
-    );
+    </div>
+  );
 };
 
 

app/components/EpisodeUserStats.jsx

@@ -15,10 +15,12 @@ export class EpisodeUserStats extends React.Component {
 
   render() {
     const { previousBalance, winnings, losses, balance } = this.props;
+    const cls_prev_balance = previousBalance < 0 ? 'losses' : '';
+    const cls_balance = balance < previousBalance ? 'losses' : 'winnings';
 
     const resultsHtml = balance ? (
       <div className="results row ">
-        <div className="result balance small-3 columns">
+        <div className={"result prevbalance small-3 columns " + cls_prev_balance }>
           <div className="title">
             Previous Balance
           </div>
@@ -42,7 +44,7 @@ export class EpisodeUserStats extends React.Component {
             { toCurrencyString(losses) }
           </div>
         </div>
-        <div className="result balance small-3 columns">
+        <div className={"result balance small-3 columns " + cls_balance }>
           <div className="title">
             Result
           </div>

app/styles/components/_balance.scss

@@ -34,9 +34,16 @@
     border: 1px solid $border-color;
     border-top: 0px;
     padding: 0.25rem;
-    color: $money-color-win;
     padding-left: 1rem;
     font-size: 3rem;
     font-weight: bold;
+
+    &.win {
+      color: $color-winning;
+    }
+
+    &.loss {
+      color: $color-losing;
+    }
   }
 }