Display credit/debt money text with color

src/components/member-list-element/PaymentsList.tsx

@@ -12,7 +12,11 @@ export function PaymentsList(props: Props) {
     return <div>
         {
             props.squad.otherSquadMembers(props.member).map((other) => {
-                return <div key={other.name}>Owed by {other.name} {money(props.squad.debtOfMemberToMember(other, props.member))}</div>
+                const amountOwed = props.squad.debtOfMemberToMember(other, props.member);
+                return <div key={other.name}>
+                    <span>Owed {amountOwed < 0 ? 'to' : 'by'} {other.name}&nbsp;</span>
+                    <span className={amountOwed < 0 ? 'debt-text' : 'credit-text'}>{money(amountOwed)}</span>
+                </div>
             })
         }
     </div>

src/screens/Dashboard.test.tsx

@@ -100,6 +100,16 @@ describe('Dashboard', () => {
                 subject.update();
                 expect(subject.html()).toContain('$1.00')
             });
+            it("should say 'owed to' if the the member owes money to a person in the list", () => {
+                let subject = addSquadMate(mountScreen(), 'Squad Mate 1');
+                subject = addSquadMate(subject, 'Squad Mate 2');
+                addContributionToSquadMateWithName(subject, 'Squad Mate 1', 'name1', 8.0);
+                addContributionToSquadMateWithName(subject, 'Squad Mate 2', 'name2', 10.0);
+                subject.find('#squad-mate-1').simulate('click');
+                subject.find('.tab').simulate('click');
+                subject.update();
+                expect(subject.html()).toContain('Owed to')
+            });
         })
     })
 });

src/styleguide/_colors.scss

@@ -12,7 +12,10 @@ $confirm-color: #2ecc71;
 $confirm-color-shade: #25a85b;
 
 $font-color: #34495e;
+
 $money-color: #16a085;
+$money-debt-color: #d63031;
+
 $button-text-color: white;
 
 $grey0: lighten(black, -10%);

src/styleguide/_special-text.scss

@@ -0,0 +1,9 @@
+@import "colors";
+
+.credit-text {
+  color: $money-color;
+}
+
+.debt-text {
+  color: $money-debt-color;
+}

src/styles.scss

@@ -1,5 +1,6 @@
 @import "./styleguide/colors";
 @import "./styleguide/_button.scss";
+@import "./styleguide/special-text";
 
 body {
   color: $font-color;