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

unify TokenList styles

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-10-30 15:27:14 +01:00
parent 8b3f16fac9
commit 08e2a3f22d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/organisms/AssetActions/Pool/Actions.module.css
View File

@ -3,7 +3,7 @@
margin-right: -2rem; margin-right: -2rem;
padding-left: var(--spacer); padding-left: var(--spacer);
padding-right: var(--spacer); padding-right: var(--spacer);
margin-top: calc(var(--spacer) / 2); margin-top: calc(var(--spacer) / 4);
padding-top: calc(var(--spacer) / 1.5); padding-top: calc(var(--spacer) / 1.5);
border-top: 1px solid var(--brand-grey-lighter); border-top: 1px solid var(--brand-grey-lighter);
text-align: center; text-align: center;

21
src/components/organisms/AssetActions/Pool/TokenList.module.css
View File

@ -1,5 +1,13 @@
.tokeninfo { .tokenlist {
padding-top: calc(var(--spacer) / 1.5); margin-left: -2rem;
margin-right: -2rem;
padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
var(--spacer);
border-top: 1px solid var(--brand-grey-lighter);
}
.tokenlist.highlight {
background: var(--brand-grey-dimmed);
} }
.tokens { .tokens {
@ -22,15 +30,6 @@
color: var(--color-secondary); color: var(--color-secondary);
} }
.highlight {
background: var(--brand-grey-dimmed);
padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
var(--spacer);
border-bottom: 1px solid var(--brand-grey-lighter);
margin-left: -2rem;
margin-right: -2rem;
}
.totalLiquidity { .totalLiquidity {
composes: token from './Token.module.css'; composes: token from './Token.module.css';
margin-bottom: 0; margin-bottom: 0;

2
src/components/organisms/AssetActions/Pool/TokenList.tsx
View File

@ -23,7 +23,7 @@ export default function TokenList({
highlight?: boolean highlight?: boolean
}): ReactElement { }): ReactElement {
return ( return (
<div className={`${styles.tokeninfo} ${highlight ? styles.highlight : ''}`}> <div className={`${styles.tokenlist} ${highlight ? styles.highlight : ''}`}>
<h3 className={styles.title}>{title}</h3> <h3 className={styles.title}>{title}</h3>
<div className={styles.tokens}> <div className={styles.tokens}>
<Token symbol="OCEAN" balance={ocean} /> <Token symbol="OCEAN" balance={ocean} />

1
src/components/organisms/AssetActions/Pool/index.module.css
View File

@ -1,7 +1,6 @@
.dataToken { .dataToken {
padding-bottom: calc(var(--spacer) / 1.5); padding-bottom: calc(var(--spacer) / 1.5);
font-size: var(--font-size-large); font-size: var(--font-size-large);
border-bottom: 1px solid var(--brand-grey-lighter);
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;
padding-left: calc(var(--spacer) / 1.5); padding-left: calc(var(--spacer) / 1.5);

5
src/components/organisms/AssetActions/Pool/index.tsx
View File

@ -8,7 +8,6 @@ import Button from '../../../atoms/Button'
import Add from './Add' import Add from './Add'
import Remove from './Remove' import Remove from './Remove'
import Tooltip from '../../../atoms/Tooltip' import Tooltip from '../../../atoms/Tooltip'
import Conversion from '../../../atoms/Price/Conversion'
import EtherscanLink from '../../../atoms/EtherscanLink' import EtherscanLink from '../../../atoms/EtherscanLink'
import Token from './Token' import Token from './Token'
import TokenList from './TokenList' import TokenList from './TokenList'
@ -87,7 +86,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
const totalLiquidityInOcean = price?.ocean + price?.datatoken * price?.value const totalLiquidityInOcean = price?.ocean + price?.datatoken * price?.value
setTotalLiquidityInOcean(totalLiquidityInOcean) setTotalLiquidityInOcean(totalLiquidityInOcean)
}, [userLiquidity, price]) }, [userLiquidity, price, poolTokens, totalPoolTokens])
useEffect(() => { useEffect(() => {
if (!ocean || !accountId || !price) return if (!ocean || !accountId || !price) return
@ -171,7 +170,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
} }
} }
init() init()
}, [ocean, accountId, price, ddo.dataToken, refreshPool]) }, [ocean, accountId, price, ddo.dataToken, refreshPool, ddo.publicKey])
const refreshInfo = async () => { const refreshInfo = async () => {
setRefreshPool(!refreshPool) setRefreshPool(!refreshPool)