fix: styles on staking and nodes page (#1252)

This commit is contained in:
Matthew Russell 2022-09-06 02:10:31 -07:00 committed by GitHub
parent a57d484496
commit a5f21ed1f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 15 deletions

View File

@ -37,7 +37,7 @@ export const AmountInput = ({
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="flex"> <div className="flex gap-4">
<div className="flex-1"> <div className="flex-1">
<Input <Input
data-testid="token-amount-input" data-testid="token-amount-input"
@ -61,14 +61,12 @@ export const AmountInput = ({
/> />
</div> </div>
{maximum && ( {maximum && (
<div className="flex flex-col justify-center p-8 h-28 my-0 mx-8"> <ButtonLink
<ButtonLink onClick={() => setAmount(maximum.toString())}
onClick={() => setAmount(maximum.toString())} data-testid="token-amount-use-maximum"
data-testid="token-amount-use-maximum" >
> {t('Use maximum')}
{t('Use maximum')} </ButtonLink>
</ButtonLink>
</div>
)} )}
</div> </div>
); );
@ -169,7 +167,7 @@ export const TokenInput = ({
} else if (requireApproval) { } else if (requireApproval) {
approveContent = ( approveContent = (
<Callout iconName="tick" intent={Intent.Success}> <Callout iconName="tick" intent={Intent.Success}>
<p>{`${currency} are approved for staking`}</p> <p className="mb-0">{`${currency} are approved for staking`}</p>
</Callout> </Callout>
); );
} }
@ -188,7 +186,7 @@ export const TokenInput = ({
currency={currency} currency={currency}
/> />
</FormGroup> </FormGroup>
{approveContent ? <div className="mb-24">{approveContent}</div> : null} {approveContent ? <div className="mb-4">{approveContent}</div> : null}
<Button <Button
data-testid="token-input-submit-button" data-testid="token-input-submit-button"
fill={true} fill={true}

View File

@ -92,7 +92,7 @@ export const AssociatePage = ({
return ( return (
<section data-testid="associate"> <section data-testid="associate">
<div className="mb-24"> <div className="mb-6">
<Callout> <Callout>
<p data-testid="associate-information1">{t('associateInfo1')}</p> <p data-testid="associate-information1">{t('associateInfo1')}</p>
<p className="mb-0" data-testid="associate-information2"> <p className="mb-0" data-testid="associate-information2">

View File

@ -101,7 +101,7 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
? t('validatorTitle', { nodeName: nodeInfo.name }) ? t('validatorTitle', { nodeName: nodeInfo.name })
: t('validatorTitle', { nodeName: t('validatorTitleFallback') })} : t('validatorTitle', { nodeName: t('validatorTitleFallback') })}
</h2> </h2>
<section className="mb-24"> <section className="mb-4">
<ValidatorTable <ValidatorTable
node={nodeInfo} node={nodeInfo}
stakedTotal={data?.nodeData?.stakedTotalFormatted || '0'} stakedTotal={data?.nodeData?.stakedTotalFormatted || '0'}
@ -109,7 +109,7 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
/> />
</section> </section>
{data?.epoch.timestamps.start && data?.epoch.timestamps.expiry && ( {data?.epoch.timestamps.start && data?.epoch.timestamps.expiry && (
<section className="mb-24"> <section className="mb-4">
<EpochCountdown <EpochCountdown
id={data.epoch.id} id={data.epoch.id}
startDate={new Date(data?.epoch.timestamps.start)} startDate={new Date(data?.epoch.timestamps.start)}
@ -117,7 +117,7 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
/> />
</section> </section>
)} )}
<section className="mb-24"> <section className="mb-4">
<YourStake <YourStake
stakeNextEpoch={stakeNextEpoch} stakeNextEpoch={stakeNextEpoch}
stakeThisEpoch={stakeThisEpoch} stakeThisEpoch={stakeThisEpoch}