From a5f21ed1f8fd8df52ce94c569139d0969d43e9a5 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 6 Sep 2022 02:10:31 -0700
Subject: [PATCH] fix: styles on staking and nodes page (#1252)

---
 .../components/token-input/token-input.tsx    | 20 +++++++++----------
 .../staking/associate/associate-page.tsx      |  2 +-
 .../token/src/routes/staking/staking-node.tsx |  6 +++---
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/apps/token/src/components/token-input/token-input.tsx b/apps/token/src/components/token-input/token-input.tsx
index 0a22d703a..d8c8c9f31 100644
--- a/apps/token/src/components/token-input/token-input.tsx
+++ b/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}
diff --git a/apps/token/src/routes/staking/associate/associate-page.tsx b/apps/token/src/routes/staking/associate/associate-page.tsx
index 6470cdff6..d9d32038b 100644
--- a/apps/token/src/routes/staking/associate/associate-page.tsx
+++ b/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">
diff --git a/apps/token/src/routes/staking/staking-node.tsx b/apps/token/src/routes/staking/staking-node.tsx
index 3ed2b187a..510a58091 100644
--- a/apps/token/src/routes/staking/staking-node.tsx
+++ b/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}