oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

wallet styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-14 19:18:59 +02:00
parent a29ec8a219
commit ad82444cb0
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/molecules/Wallet/Details.module.css
View File

@ -10,16 +10,26 @@
} }
.balance { .balance {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
color: var(--color-secondary); color: var(--color-secondary);
white-space: nowrap; white-space: nowrap;
font-size: var(--font-size-small);
} }
.balance span { .balance span {
font-size: var(--font-size-base); width: 20%;
font-weight: var(--font-weight-bold); text-align: right;
font-weight: var(--font-weight-base);
font-size: var(--font-size-small);
display: inline-block; 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, .arrow,

11
src/components/molecules/Wallet/Details.tsx
View File

@ -8,21 +8,18 @@ import { connectWallet } from '../../../utils/wallet'
export default function Details({ attrs }: { attrs: any }): ReactElement { export default function Details({ attrs }: { attrs: any }): ReactElement {
const { balance, connect, logout } = useOcean() const { balance, connect, logout } = useOcean()
const ethBalanceText = 'hello test' const oceanBalance = 'Hello Test'
// || formatNumber(Number(balance.eth))
const oceanBalanceText = 'hello test'
// || formatNumber(Number(balance.ocean))
return ( return (
<div className={styles.details} {...attrs}> <div className={styles.details} {...attrs}>
<ul> <ul>
<li className={styles.balance}> <li className={styles.balance}>
OCEAN <span>{oceanBalanceText}</span> <span>OCEAN</span> {oceanBalance}
</li> </li>
<li className={styles.balance}> <li className={styles.balance}>
ETH <span>{ethBalanceText}</span> <span>ETH</span> {formatNumber(Number(balance))}
</li> </li>
<li> <li className={styles.actions}>
<Button <Button
style="text" style="text"
size="small" size="small"