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

apps/token/src/components/token-input/token-input.tsx

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

apps/token/src/routes/staking/associate/associate-page.tsx

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

apps/token/src/routes/staking/staking-node.tsx

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