fix panel layout
This commit is contained in:
saml33
parent
978f72a381
commit
5cc4719ef8
|
|
@ -102,7 +102,7 @@ export default function MarginInfo() {
|
|||
<ElementTitle>Account</ElementTitle>
|
||||
<div>
|
||||
<div>
|
||||
<div className="flex justify-between py-2">
|
||||
<div className="flex justify-between pb-3">
|
||||
<div className="font-normal text-th-fgd-3 leading-4">Equity</div>
|
||||
<div className="text-th-fgd-1">
|
||||
{isLoading ? (
|
||||
|
|
@ -112,7 +112,7 @@ export default function MarginInfo() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<div className="flex justify-between pb-3">
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Leverage
|
||||
</div>
|
||||
|
|
@ -128,7 +128,7 @@ export default function MarginInfo() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between py-2`}>
|
||||
<div className={`flex justify-between pb-3`}>
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Total Assets Value
|
||||
</div>
|
||||
|
|
@ -144,7 +144,7 @@ export default function MarginInfo() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between py-2`}>
|
||||
<div className={`flex justify-between pb-3`}>
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Total Liabilities Value
|
||||
</div>
|
||||
|
|
@ -160,7 +160,7 @@ export default function MarginInfo() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between py-2`}>
|
||||
<div className={`flex justify-between pb-3`}>
|
||||
<div className="font-normal text-th-fgd-3 leading-4">
|
||||
Margin Available
|
||||
</div>
|
||||
|
|
@ -168,7 +168,7 @@ export default function MarginInfo() {
|
|||
{mangoAccount ? formatUsdValue(marginAvailable) : '--'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex justify-between py-2`}>
|
||||
<div className={`flex justify-between pb-3`}>
|
||||
<Tooltip
|
||||
content={
|
||||
<div>
|
||||
|
|
@ -256,7 +256,7 @@ export default function MarginInfo() {
|
|||
%
|
||||
</div>
|
||||
</div>
|
||||
<div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-2`}>
|
||||
<div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-4`}>
|
||||
<Button
|
||||
onClick={() => setShowDepositModal(true)}
|
||||
className="w-full"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
floorToDecimal,
|
||||
i80f48ToPercent,
|
||||
formatUsdValue,
|
||||
tokenPrecision,
|
||||
} from '../utils/index'
|
||||
import { LinkButton } from './Button'
|
||||
import Tooltip from './Tooltip'
|
||||
|
|
@ -284,8 +285,10 @@ export default function MarketPosition() {
|
|||
<span className="text-th-fgd-2">{symbol}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div className="pb-0.5 text-th-fgd-3">Deposits</div>
|
||||
<div className="pb-3">
|
||||
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
||||
Deposits
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{isLoading ? (
|
||||
<div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
|
||||
|
|
@ -298,15 +301,31 @@ export default function MarketPosition() {
|
|||
tokenIndex
|
||||
)
|
||||
.toNumber(),
|
||||
mangoGroup.tokens[tokenIndex].decimals
|
||||
tokenPrecision[symbol]
|
||||
)
|
||||
) : (
|
||||
(0).toFixed(mangoGroup.tokens[tokenIndex].decimals)
|
||||
0
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div className="pb-0.5 text-th-fgd-3">Borrows</div>
|
||||
<div className="pb-3">
|
||||
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
||||
Available
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{isLoading ? (
|
||||
<div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
|
||||
) : mangoAccount ? (
|
||||
'--'
|
||||
) : (
|
||||
0
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-3">
|
||||
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
||||
Borrows
|
||||
</div>
|
||||
<div className={`text-th-fgd-1`}>
|
||||
{isLoading ? (
|
||||
<div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
|
||||
|
|
@ -319,17 +338,17 @@ export default function MarketPosition() {
|
|||
tokenIndex
|
||||
)
|
||||
.toNumber(),
|
||||
mangoGroup.tokens[tokenIndex].decimals
|
||||
tokenPrecision[symbol]
|
||||
)
|
||||
) : (
|
||||
(0).toFixed(mangoGroup.tokens[tokenIndex].decimals)
|
||||
0
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Tooltip content="Deposit APY and Borrow APR">
|
||||
<div
|
||||
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
||||
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 default-transition text-xs hover:border-th-bkg-2 hover:text-th-fgd-3`}
|
||||
>
|
||||
Interest Rates
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,23 +24,23 @@ export const defaultLayouts = {
|
|||
{ i: 'orderbook', x: 6, y: 0, w: 3, h: 17 },
|
||||
{ i: 'tradeForm', x: 9, y: 1, w: 3, h: 14 },
|
||||
{ i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
|
||||
{ i: 'accountInfo', x: 9, y: 3, w: 3, h: 15 },
|
||||
{ i: 'accountInfo', x: 9, y: 3, w: 3, h: 16 },
|
||||
{ i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
|
||||
{ i: 'marketPosition', x: 9, y: 4, w: 3, h: 13 },
|
||||
{ i: 'marketPosition', x: 9, y: 4, w: 3, h: 14 },
|
||||
],
|
||||
lg: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 },
|
||||
{ i: 'accountInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 14, minW: 2 },
|
||||
{ i: 'accountInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
|
||||
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'userInfo', x: 0, y: 3, w: 12, h: 19, minW: 6 },
|
||||
],
|
||||
md: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 },
|
||||
{ i: 'accountInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
|
||||
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 14, minW: 2 },
|
||||
{ i: 'accountInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
|
||||
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
|
||||
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
|
||||
|
|
@ -48,8 +48,8 @@ export const defaultLayouts = {
|
|||
],
|
||||
sm: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'accountInfo', x: 6, y: 1, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 16, minW: 2 },
|
||||
{ i: 'accountInfo', x: 6, y: 1, w: 6, h: 16, minW: 2 },
|
||||
{ i: 'tradeForm', x: 0, y: 2, w: 12, h: 13, minW: 3 },
|
||||
{ i: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 },
|
||||
|
|
@ -57,8 +57,8 @@ export const defaultLayouts = {
|
|||
],
|
||||
xs: [
|
||||
{ i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 13, minW: 2 },
|
||||
{ i: 'accountInfo', x: 0, y: 2, w: 6, h: 15, minW: 2 },
|
||||
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 14, minW: 2 },
|
||||
{ i: 'accountInfo', x: 0, y: 2, w: 6, h: 16, minW: 2 },
|
||||
{ i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 },
|
||||
{ i: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
|
||||
{ i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 },
|
||||
|
|
|
|||
Loading…
Reference in New Issue