1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-29 00:57:50 +02:00

prefix display fixes

This commit is contained in:
Matthias Kretschmann 2020-10-16 09:11:16 +02:00
parent f6b8208906
commit 006eef26e6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 15 additions and 10 deletions

View File

@ -189,7 +189,7 @@
align-items: center; align-items: center;
padding-left: calc(var(--spacer) / 4); padding-left: calc(var(--spacer) / 4);
padding-right: calc(var(--spacer) / 4); padding-right: calc(var(--spacer) / 4);
color: var(--color-secondary); color: var(--brand-grey);
font-size: var(--font-size-small); font-size: var(--font-size-small);
transition: border 0.2s ease-out; transition: border 0.2s ease-out;
white-space: nowrap; white-space: nowrap;

View File

@ -11,18 +11,18 @@
.balance { .balance {
text-align: center; text-align: center;
font-size: var(--font-size-small); font-size: var(--font-size-small) !important;
border: 1px solid var(--brand-grey-lighter); border: 1px solid var(--brand-grey-lighter);
border-right: 0; border-right: 0;
margin-right: -3px; margin-right: -3px;
padding: calc(var(--spacer) / 4.5) calc(var(--spacer) / 2); height: 35px;
padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2)
calc(var(--spacer) / 4.5) calc(var(--spacer) / 2);
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);
color: var(--color-secondary); color: var(--color-secondary);
} display: flex;
align-items: center;
.balance strong {
color: var(--brand-grey);
} }
.title { .title {

View File

@ -1,4 +1,5 @@
import { DataTokenOptions, useOcean } from '@oceanprotocol/react' import { DataTokenOptions, useOcean } from '@oceanprotocol/react'
import PriceUnit from '../../../atoms/Price/PriceUnit'
import React, { ReactElement, useEffect, useState } from 'react' import React, { ReactElement, useEffect, useState } from 'react'
import { PriceOptionsMarket } from '../../../../@types/MetaData' import { PriceOptionsMarket } from '../../../../@types/MetaData'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
@ -66,9 +67,12 @@ export default function Dynamic({
<aside className={styles.wallet}> <aside className={styles.wallet}>
{balance?.ocean && ( {balance?.ocean && (
<div className={styles.balance}> <PriceUnit
OCEAN <strong>{balance.ocean}</strong> className={styles.balance}
</div> price={balance.ocean}
symbol="OCEAN"
small
/>
)} )}
<Wallet /> <Wallet />
</aside> </aside>

View File

@ -1,6 +1,7 @@
.coinSelect { .coinSelect {
composes: select from '../../../atoms/Input/InputElement.module.css'; composes: select from '../../../atoms/Input/InputElement.module.css';
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-base);
border: none; border: none;
margin-left: -0.5rem; margin-left: -0.5rem;
margin-right: -0.5rem; margin-right: -0.5rem;