chore(deal-ticket): make margin warning more subtle (#4732)

libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx

@@ -1,6 +1,12 @@
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Notification, Intent } from '@vegaprotocol/ui-toolkit';
+import {
+  Intent,
+  VegaIcon,
+  VegaIconNames,
+  Tooltip,
+  TradingButton,
+} from '@vegaprotocol/ui-toolkit';
 
 interface Props {
   margin: string;
@@ -14,24 +20,43 @@ interface Props {
 }
 
 export const MarginWarning = ({ margin, balance, asset, onDeposit }: Props) => {
+  const description = (
+    <div className="flex flex-col items-start gap-2 p-2">
+      <p className="text-sm">
+        {t('%s %s is currently required.', [
+          addDecimalsFormatNumber(margin, asset.decimals),
+          asset.symbol,
+        ])}
+      </p>
+      <p className="text-sm">
+        {t('You have only %s.', [
+          addDecimalsFormatNumber(balance, asset.decimals),
+        ])}
+      </p>
+
+      <TradingButton
+        intent={Intent.Warning}
+        size="small"
+        onClick={() => onDeposit(asset.id)}
+        data-testid="deal-ticket-deposit-dialog-button"
+        type="button"
+      >
+        {t('Deposit %s', [asset.symbol])}
+      </TradingButton>
+    </div>
+  );
+
   return (
-    <Notification
+    <Tooltip description={description}>
-      intent={Intent.Warning}
+      <div
-      testId="deal-ticket-warning-margin"
+        className="flex text-xs items-center"
-      message={`You may not have enough margin available to open this position. ${addDecimalsFormatNumber(
+        data-testid="deal-ticket-warning-margin"
-        margin,
+      >
-        asset.decimals
+        <span className="text-yellow-500 mr-2">
-      )} ${asset.symbol} ${t(
+          <VegaIcon name={VegaIconNames.WARNING} />
-        'is currently required. You have only'
+        </span>
-      )} ${addDecimalsFormatNumber(balance, asset.decimals)} ${
+        {t('You may not have enough margin available to open this position.')}
-        asset.symbol
+      </div>
-      } ${t('available.')}`}
+    </Tooltip>
-      buttonProps={{
-        text: t(`Deposit ${asset.symbol}`),
-        action: () => onDeposit(asset.id),
-        dataTestId: 'deal-ticket-deposit-dialog-button',
-        size: 'small',
-      }}
-    />
   );
 };

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-warning.tsx

@@ -0,0 +1,7 @@
+export const IconWarning = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path d="M15.84 13.5l.01-.01-7-12-.01.01c-.17-.3-.48-.5-.85-.5s-.67.2-.85.5l-.01-.01-7 12 .01.01c-.09.15-.15.31-.15.5 0 .55.45 1 1 1h14c.55 0 1-.45 1-1 0-.19-.06-.35-.15-.5zm-6.85-.51h-2v-2h2v2zm0-3h-2v-5h2v5z" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -36,6 +36,7 @@ import { IconTrendDown } from './svg-icons/icon-trend-down';
 import { IconTrendUp } from './svg-icons/icon-trend-up';
 import { IconTwitter } from './svg-icons/icon-twitter';
 import { IconVote } from './svg-icons/icon-vote';
+import { IconWarning } from './svg-icons/icon-warning';
 import { IconWithdraw } from './svg-icons/icon-withdraw';
 
 export enum VegaIconNames {
@@ -78,6 +79,7 @@ export enum VegaIconNames {
   TWITTER = 'twitter',
   VOTE = 'vote',
   WITHDRAW = 'withdraw',
+  WARNING = 'warning',
 }
 
 export const VegaIconNameMap: Record<
@@ -123,4 +125,5 @@ export const VegaIconNameMap: Record<
   twitter: IconTwitter,
   vote: IconVote,
   withdraw: IconWithdraw,
+  warning: IconWarning,
 };

libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx

@@ -4,7 +4,7 @@ import { TradingCheckbox } from './checkbox';
 
 export default {
   component: TradingCheckbox,
-  title: 'Checkbox',
+  title: 'Checkbox - trading',
 } as Meta<typeof TradingCheckbox>;
 
 const Template: StoryFn<TradingCheckboxProps> = (args) => (

libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx

@@ -4,7 +4,7 @@ import type { TradingFormGroupProps } from './form-group';
 import { TradingFormGroup } from './form-group';
 export default {
   component: TradingFormGroup,
-  title: 'FormGroup',
+  title: 'FormGroup trading',
   argTypes: {
     label: {
       type: 'string',

libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx

@@ -3,7 +3,7 @@ import { TradingInputError } from './input-error';
 
 export default {
   component: TradingInputError,
-  title: 'InputError',
+  title: 'InputError trading',
 } as Meta;
 
 const Template: StoryFn = (args) => <TradingInputError {...args} />;

libs/ui-toolkit/src/components/trading-input/input.stories.tsx

@@ -3,7 +3,7 @@ import { TradingInput } from './input';
 import { FormGroup } from '../form-group';
 export default {
   component: TradingInput,
-  title: 'Input',
+  title: 'Input trading',
 } as Meta;
 
 const Template: StoryFn = (args) => (

libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx

@@ -4,7 +4,7 @@ import { TradingRadioGroup, TradingRadio } from './radio-group';
 
 export default {
   component: TradingRadioGroup,
-  title: 'RadioGroup',
+  title: 'RadioGroup trading',
 } as Meta;
 
 const Template: StoryFn<TradingRadioGroupProps> = (args) => (

libs/ui-toolkit/src/components/trading-select/select.stories.tsx

@@ -4,7 +4,7 @@ import { FormGroup } from '../form-group';
 
 export default {
   component: TradingSelect,
-  title: 'Select',
+  title: 'Select trading',
 } as Meta;
 
 const Template: StoryFn = (args) => (