From 1dd63b2c7a3b0e89cca780c743b139246cade92a Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 13 Aug 2020 15:43:51 +0200
Subject: [PATCH] Basic styles for budget balances

---
 app/components/budget-balances/template.hbs | 20 +++++++-------
 app/styles/app.scss                         |  1 +
 app/styles/components/_budget-balances.scss | 30 +++++++++++++++++++++
 3 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 app/styles/components/_budget-balances.scss

diff --git a/app/components/budget-balances/template.hbs b/app/components/budget-balances/template.hbs
index 617db91..42ffd3a 100644
--- a/app/components/budget-balances/template.hbs
+++ b/app/components/budget-balances/template.hbs
@@ -1,21 +1,21 @@
-<table>
+<table class="token-balances">
   <thead>
     <tr>
-      <td>Token</td>
-      <td>Amount</td>
-      <td>Fiat value</td>
+      <th>Token</th>
+      <th>Amount</th>
+      <th>Fiat value</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>WBTC</td>
-      <td>{{this.communityFunds.balanceWBTC.balance}}</td>
-      <td>{{this.communityFunds.balanceWBTC.balanceUsd}} USD</td>
+      <th>ETH</th>
+      <td class="amount">{{fmt-crypto-currency this.communityFunds.balanceETH.balance 'ETH'}}</td>
+      <td class="fiat-amount">{{this.communityFunds.balanceETH.balanceUsd}} USD</td>
     </tr>
     <tr>
-      <td>ETH</td>
-      <td>{{this.communityFunds.balanceETH.balance}}</td>
-      <td>{{this.communityFunds.balanceETH.balanceUsd}} USD</td>
+      <th>WBTC</th>
+      <td class="amount">{{fmt-crypto-currency this.communityFunds.balanceWBTC.balance 'WBTC'}}</td>
+      <td class="fiat-amount">{{this.communityFunds.balanceWBTC.balanceUsd}} USD</td>
     </tr>
   </tbody>
 </table>
\ No newline at end of file
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 858471c..14dba8f 100644
--- a/app/styles/app.scss
+++ b/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";
diff --git a/app/styles/components/_budget-balances.scss b/app/styles/components/_budget-balances.scss
new file mode 100644
index 0000000..7173b02
--- /dev/null
+++ b/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);
+      }
+    }
+  }
+}