Money styling improvements.

src/components/farm/Board.jsx

@@ -293,8 +293,23 @@ function formatMoney(n) {
 
 class MoneySummary extends React.Component {
     render () {
+        const { max } = this.props;
         return (
-            <span><b>{this.props.title}</b>: ${formatMoney(this.props.value)}</span>
+            <span className="small-text">
+                <Row>
+                    <Col width={max ? '3' : "6"} className="align-right pad-right">
+                        <b>{this.props.title}</b>:
+                    </Col>
+                    <Col width={max ? '9' : "6"}>
+                        ${formatMoney(this.props.value)}
+                        {max ? (
+                             <>
+                                 {' '}/ ${formatMoney(max)}
+                             </>
+                        ) : (<></>)}
+                    </Col>
+                </Row>
+            </span>
         );
     }
 }
@@ -305,12 +320,23 @@ class PlayerSummary extends React.Component {
         return (
             <GroupBox title={(<Fragment><div className={'player player-' + player.color}></div> {player.name}
             </Fragment>)}>
-                <MoneySummary title='Cash' value={player.displayCash} /> {' '}
+                <Row>
-                <MoneySummary title='Debt' value={player.debt} /> {' '}
+                    <Col width="5">
-                <br /><br />
+                        <MoneySummary title='Cash' value={player.displayCash} />
-                <MoneySummary title='Assets' value={assetsValue(player)} /> {' '}
+                    </Col>
+                    <Col width="7">
+                        <MoneySummary title='Assets' value={assetsValue(player)} />
+                    </Col>
+                </Row>
+                <Row>
+                    <Col width="5">
+                        <MoneySummary title='Debt' value={player.debt} />
+                    </Col>
+                    <Col width="7">
                         <MoneySummary title='Net worth' value={netWorth(player)} />
-                <br /><br />
+                    </Col>
+                </Row>
+                <br />
                 <PlayerResources player={player} />
                 <br />
                 <PlayerTurnContainer player={player}
@@ -961,14 +987,24 @@ class Loans extends React.Component {
     render () {
         return (
             <GroupBox title={'Loans'}>
-                <MoneySummary title='Cash' value={this.props.player.displayCash} /> {' '}
+                <Row>
-                <MoneySummary title='Debt' value={this.props.player.debt} />
+                    <Col width="4">
-                /${formatMoney(this.props.game.settings.maxDebt)}
+                        <MoneySummary title='Cash' value={this.props.player.displayCash} />
-                <br />
+                    </Col>
-                {this.props.game.settings.loanInterest > 0 ? '(' + (this.props.game.settings.loanInterest * 100) + '% interest added to each loan)' : ''}
+                    <Col width="8">
+                        <MoneySummary title='Debt' value={this.props.player.debt} max={this.props.game.settings.maxDebt} />
+                    </Col>
+                </Row>
+                {this.props.game.settings.loanInterest > 0 ? (
+                     <>
+                         {'('}{this.props.game.settings.loanInterest * 100} % interest added to each loan{')'}
                          <br />
+                     </>
+                ) : ''}
                 {this.props.player.debt >= this.props.game.settings.maxDebt ? (
-                     <><Button onClick={this.handleEmergencyLoan}>Emergency Loan</Button> $1,000 at 100% interest</>
+                     <span className="small-text">
+                         <Button onClick={this.handleEmergencyLoan} className="tiny">Emergency Loan</Button> $1,000 at 100% interest
+                     </span>
                 ) : (<></>)}
                 <br />
                 <form onSubmit={this.handleSubmit}>

src/style.scss

@@ -911,3 +911,17 @@ $intro-time: 6s;
     font-size: 1.2rem;
     color: red;
     font-weight: bold }
+
+
+.small-text {
+    @include breakpoint(small only) {
+        font-size: 0.9rem; }
+    @include breakpoint(medium) {
+        font-size: 1.2rem; }
+}
+
+.align-right {
+    text-align: right; }
+
+.pad-right {
+    padding-right: 0.3rem; }