From ad82444cb0f8f0b36cacee483727a27a885f5d30 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 14 Jul 2020 19:18:59 +0200
Subject: [PATCH] wallet styling

---
 .../molecules/Wallet/Details.module.css        | 18 ++++++++++++++----
 src/components/molecules/Wallet/Details.tsx    | 11 ++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/molecules/Wallet/Details.module.css b/src/components/molecules/Wallet/Details.module.css
index 4668bebbb..cbeb77a4c 100644
--- a/src/components/molecules/Wallet/Details.module.css
+++ b/src/components/molecules/Wallet/Details.module.css
@@ -10,16 +10,26 @@
 }
 
 .balance {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
   color: var(--color-secondary);
   white-space: nowrap;
-  font-size: var(--font-size-small);
 }
 
 .balance span {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-bold);
+  width: 20%;
+  text-align: right;
+  font-weight: var(--font-weight-base);
+  font-size: var(--font-size-small);
   display: inline-block;
-  margin-left: 0.1rem;
+  margin-right: 0.4rem;
+}
+
+.actions {
+  border-top: 1px solid var(--brand-grey-lighter);
+  margin-top: calc(var(--spacer) / 2);
+  padding-top: calc(var(--spacer) / 2);
+  text-align: center;
 }
 
 .arrow,
diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx
index 1de374ecf..9ed12e191 100644
--- a/src/components/molecules/Wallet/Details.tsx
+++ b/src/components/molecules/Wallet/Details.tsx
@@ -8,21 +8,18 @@ import { connectWallet } from '../../../utils/wallet'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
   const { balance, connect, logout } = useOcean()
-  const ethBalanceText = 'hello test'
-  // || formatNumber(Number(balance.eth))
-  const oceanBalanceText = 'hello test'
-  // || formatNumber(Number(balance.ocean))
+  const oceanBalance = 'Hello Test'
 
   return (
     <div className={styles.details} {...attrs}>
       <ul>
         <li className={styles.balance}>
-          OCEAN <span>{oceanBalanceText}</span>
+          <span>OCEAN</span> {oceanBalance}
         </li>
         <li className={styles.balance}>
-          ETH <span>{ethBalanceText}</span>
+          <span>ETH</span> {formatNumber(Number(balance))}
         </li>
-        <li>
+        <li className={styles.actions}>
           <Button
             style="text"
             size="small"