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

add/remove header visual tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-08-26 10:12:43 +02:00
parent c6307c24bd
commit 77d305ae2e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/organisms/AssetActions/Pool/Add.module.css
View File

@ -5,3 +5,17 @@
max-width: 12rem;
margin: 0 auto var(--spacer) auto;
}
.userBalance {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-mini);
margin-bottom: calc(var(--spacer) / 4);
color: var(--color-secondary);
}
.userBalance span + div {
transform: scale(0.7);
transform-origin: right center;
}

8
src/components/organisms/AssetActions/Pool/Add.tsx
View File

@ -9,6 +9,7 @@ import { toast } from 'react-toastify'
import InputElement from '../../../atoms/Input/InputElement'
import Token from './Token'
import { Balance } from './'
import PriceUnit from '../../../atoms/Price/PriceUnit'
function calculatePercent(percent: number, num: number) {
return (percent / 100) * num
@ -27,7 +28,7 @@ export default function Add({
totalPoolTokens: string
totalBalance: Balance
}): ReactElement {
const { ocean, accountId } = useOcean()
const { ocean, accountId, balance } = useOcean()
const [amount, setAmount] = useState<string>()
const [isLoading, setIsLoading] = useState<boolean>()
const [newDtAmount, setNewDtAmount] = useState<string>()
@ -67,6 +68,11 @@ export default function Add({
<Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
<div className={styles.addInput}>
<div className={styles.userBalance}>
<span>Available:</span>
<PriceUnit price={balance.ocean} symbol="OCEAN" small />
</div>
<InputElement
value={amount}
name="ocean"

8
src/components/organisms/AssetActions/Pool/Header.module.css
View File

@ -2,12 +2,20 @@
display: flex;
justify-content: center;
margin-bottom: var(--spacer);
padding-bottom: calc(var(--spacer) / 2);
border-bottom: 1px solid var(--brand-grey-lighter);
margin-top: -1rem;
margin-left: -2rem;
margin-right: -2rem;
padding-left: var(--spacer);
padding-right: var(--spacer);
}
.headerTitle {
font-size: var(--font-size-large);
margin: 0;
margin-right: auto;
margin-left: -3rem;
}
.back {