Basic styles for budget balances

app/components/budget-balances/template.hbs

@@ -1,21 +1,21 @@
-<table>
+<table class="token-balances">
   <thead>
     <tr>
-      <td>Token</td>
+      <th>Token</th>
-      <td>Amount</td>
+      <th>Amount</th>
-      <td>Fiat value</td>
+      <th>Fiat value</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>WBTC</td>
+      <th>ETH</th>
-      <td>{{this.communityFunds.balanceWBTC.balance}}</td>
+      <td class="amount">{{fmt-crypto-currency this.communityFunds.balanceETH.balance 'ETH'}}</td>
-      <td>{{this.communityFunds.balanceWBTC.balanceUsd}} USD</td>
+      <td class="fiat-amount">{{this.communityFunds.balanceETH.balanceUsd}} USD</td>
     </tr>
     <tr>
-      <td>ETH</td>
+      <th>WBTC</th>
-      <td>{{this.communityFunds.balanceETH.balance}}</td>
+      <td class="amount">{{fmt-crypto-currency this.communityFunds.balanceWBTC.balance 'WBTC'}}</td>
-      <td>{{this.communityFunds.balanceETH.balanceUsd}} USD</td>
+      <td class="fiat-amount">{{this.communityFunds.balanceWBTC.balanceUsd}} USD</td>
     </tr>
   </tbody>
 </table>

app/styles/app.scss

@@ -91,6 +91,7 @@ section {
 @import "sugar";
 @import "item-list";
 
+@import "components/budget-balances";
 @import "components/contribution-details";
 @import "components/contribution-list";
 @import "components/contributor-list";

app/styles/components/_budget-balances.scss

@@ -0,0 +1,30 @@
+section#funds {
+  table.token-balances {
+    thead {
+      display: none;
+    }
+
+    th, td {
+      font-size: 1.2rem;
+      vertical-align: text-bottom;
+    }
+
+    th {
+      text-align: left;
+      padding-right: 1.2rem;
+    }
+
+    td {
+      text-align: right;
+
+      &.amount {
+        font-size: 1.6rem;
+        padding-right: 1.2rem;
+      }
+
+      &.fiat-amount {
+        color: rgba(255,255,255,0.8);
+      }
+    }
+  }
+}