blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

try different v of swap form copy; more responsive cols

This commit is contained in:
tjs 2022-10-31 05:00:21 +00:00
parent 3ea6959175
commit dd284513f3
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/swap/SwapForm.tsx
View File

@ -194,7 +194,7 @@ const SwapForm = () => {
<ContentBox
hidePadding
// showBackground
className="relative overflow-hidden border-x-0 md:border-l md:border-r-0 md:border-t-0 md:border-b-0"
className="relative overflow-hidden border-x-0 bg-th-bkg-2 md:border-l md:border-r-0 md:border-t-0 md:border-b-0"
>
<div className="p-6 pt-3">
<Transition
@ -274,7 +274,7 @@ const SwapForm = () => {
decimalScale={inputTokenInfo?.decimals || 6}
name="amountIn"
id="amountIn"
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-xl font-bold text-th-fgd-1 focus:outline-none"
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none xl:text-xl"
placeholder="0.00"
value={amountInFormValue}
onValueChange={handleAmountInChange}
@ -313,7 +313,7 @@ const SwapForm = () => {
type="output"
/>
</div>
<div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-bkg-4 bg-th-bkg-3 text-right text-xl font-bold text-th-fgd-3">
<div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-bkg-4 bg-th-bkg-3 text-right text-lg font-bold text-th-fgd-3 xl:text-xl">
{loadingSwapDetails ? (
<div className="w-full">
<SheenLoader className="flex flex-1 rounded-l-none">
@ -321,9 +321,24 @@ const SwapForm = () => {
</SheenLoader>
</div>
) : (
<span className="p-3 font-mono">
{amountOut ? numberFormat.format(amountOut.toNumber()) : ''}
</span>
// <span className="p-3 font-mono">
// {amountOut ? numberFormat.format(amountOut.toNumber()) : ''}
// </span>
<NumberFormat
inputMode="decimal"
thousandSeparator=","
allowNegative={false}
isNumericString={true}
decimalScale={inputTokenInfo?.decimals || 6}
name="amountIn"
id="amountIn"
className="w-full bg-th-bkg-1 p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none xl:text-xl"
placeholder="0.00"
disabled
value={
amountOut ? numberFormat.format(amountOut.toNumber()) : ''
}
/>
)}
</div>
</div>

8
components/swap/SwapPage.tsx
View File

@ -1,4 +1,4 @@
import Swap from './SwapForm'
import SwapForm from './SwapForm'
import mangoStore from '@store/mangoStore'
import SwapOnboardingTour from '@components/tours/SwapOnboardingTour'
import { useWallet } from '@solana/wallet-adapter-react'
@ -15,7 +15,7 @@ const SwapPage = () => {
return (
<>
<div className="grid grid-cols-12">
<div className="col-span-12 border-th-bkg-3 md:col-span-6 md:border-b lg:col-span-8">
<div className="col-span-12 border-th-bkg-3 md:col-span-6 md:border-b lg:col-span-7 xl:col-span-8">
{inputTokenInfo?.extensions?.coingeckoId &&
outputTokenInfo?.extensions?.coingeckoId ? (
<SwapTokenChart
@ -24,8 +24,8 @@ const SwapPage = () => {
/>
) : null}
</div>
<div className="col-span-12 mt-2 space-y-6 border-th-bkg-3 md:col-span-6 md:mt-0 md:border-b lg:col-span-4">
<Swap />
<div className="col-span-12 mt-2 space-y-6 border-th-bkg-3 md:col-span-6 md:mt-0 md:border-b lg:col-span-5 xl:col-span-4">
<SwapForm />
</div>
<div className="col-span-12">
<SwapInfoTabs />