feat(governance): associate form associate link (#3468)

apps/governance/src/i18n/translations/dev.json

@@ -789,5 +789,6 @@
   "approvers": "Approvers",
   "approval (% validator voting power)": "approval (% validator voting power)",
   "67% voting power required": "67% voting power required",
-  "Token": "Token"
+  "Token": "Token",
+  "associateVegaNow": "Associate $VEGA now"
 }

apps/governance/src/routes/staking/node/staking-form.tsx

@@ -13,6 +13,8 @@ import { StakingFormTxStatuses } from './staking-form-tx-statuses';
 import {
   ButtonLink,
   FormGroup,
+  Intent,
+  Notification,
   Radio,
   RadioGroup,
 } from '@vegaprotocol/ui-toolkit';
@@ -29,6 +31,7 @@ import type {
   DelegateSubmissionBody,
   UndelegateSubmissionBody,
 } from '@vegaprotocol/wallet';
+import Routes from '../../routes';
 
 export enum FormState {
   Default,
@@ -191,21 +194,33 @@ export const StakingForm = ({
   }, [isDialogVisible]);
 
   return (
-    <>
+    <div className="my-8">
       <SubHeading title={t('Manage your stake')} />
       {formState === FormState.Default &&
         availableStakeToAdd.isEqualTo(0) &&
         availableStakeToRemove.isEqualTo(0) && (
           <div className="mb-4">
             {lien.isGreaterThan(0) ? (
-              <span className="text-vega-pink">
+              <Notification
-                {t('stakeNodeWrongVegaKey')}
+                intent={Intent.Warning}
-              </span>
+                message={t('stakeNodeWrongVegaKey')}
+              />
             ) : (
-              <span className="text-vega-orange">{t('stakeNodeNone')}</span>
+              <Notification
+                message={t('stakeNodeNone')}
+                intent={Intent.Warning}
+                buttonProps={{
+                  text: t('associateVegaNow'),
+                  action: () => navigate(Routes.ASSOCIATE),
+                  className: 'py-1',
+                  size: 'sm',
+                }}
+              />
             )}
           </div>
         )}
+
+      <div className="mb-8">
         <FormGroup
           label={t('Select if you want to add or remove stake')}
           labelFor="radio-stake-options"
@@ -236,6 +251,8 @@ export const StakingForm = ({
             />
           </RadioGroup>
         </FormGroup>
+      </div>
+
       {action !== undefined && (
         // eslint-disable-next-line
         <>
@@ -314,6 +331,6 @@ export const StakingForm = ({
         toggleDialog={toggleDialog}
         error={error}
       />
-    </>
+    </div>
   );
 };

libs/ui-toolkit/src/components/notification/notification.tsx

@@ -55,9 +55,9 @@ export const Notification = ({
           'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None,
           'bg-vega-blue-300 dark:bg-vega-blue-700': intent === Intent.Primary,
           'bg-vega-green-300 dark:bg-vega-green-700': intent === Intent.Success,
-          'bg-vega-orange-300 dark:bg-vega-orange-650':
+          'bg-vega-orange-300 dark:bg-vega-orange-700':
             intent === Intent.Warning,
-          'bg-vega-pink-300 dark:bg-vega-pink-650': intent === Intent.Danger,
+          'bg-vega-pink-300 dark:bg-vega-pink-700': intent === Intent.Danger,
         },
         'border rounded p-2 flex items-start gap-2.5'
       )}