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,51 +194,65 @@ 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>
         )}
-      <FormGroup
+
-        label={t('Select if you want to add or remove stake')}
+      <div className="mb-8">
-        labelFor="radio-stake-options"
+        <FormGroup
-        hideLabel={true}
+          label={t('Select if you want to add or remove stake')}
-      >
+          labelFor="radio-stake-options"
-        <RadioGroup
+          hideLabel={true}
-          name="radio-stake-options"
-          onChange={(value) => {
-            // @ts-ignore value does exist on target
-            setAction(value);
-            navigate(`?action=${value}`, {
-              replace: true,
-            });
-          }}
-          value={action}
         >
-          <Radio
+          <RadioGroup
-            disabled={availableStakeToAdd.isEqualTo(0)}
+            name="radio-stake-options"
-            value={Actions.Add}
+            onChange={(value) => {
-            label="Add"
+              // @ts-ignore value does exist on target
-            id="add-stake-radio"
+              setAction(value);
-          />
+              navigate(`?action=${value}`, {
-          <Radio
+                replace: true,
-            disabled={availableStakeToRemove.isEqualTo(0)}
+              });
-            value={Actions.Remove}
+            }}
-            label="Remove"
+            value={action}
-            id="remove-stake-radio"
+          >
-          />
+            <Radio
-        </RadioGroup>
+              disabled={availableStakeToAdd.isEqualTo(0)}
-      </FormGroup>
+              value={Actions.Add}
+              label="Add"
+              id="add-stake-radio"
+            />
+            <Radio
+              disabled={availableStakeToRemove.isEqualTo(0)}
+              value={Actions.Remove}
+              label="Remove"
+              id="remove-stake-radio"
+            />
+          </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'
       )}