From 84e40ccb2bd09c60233c15d0026c445020dca5de Mon Sep 17 00:00:00 2001
From: Maciek <maciek@vegaprotocol.io>
Date: Mon, 11 Sep 2023 16:46:16 +0200
Subject: [PATCH] chore(deal-ticket): make margin warning more subtle (#4732)

---
 .../deal-ticket-validation/margin-warning.tsx | 63 +++++++++++++------
 .../vega-icons/svg-icons/icon-warning.tsx     |  7 +++
 .../icon/vega-icons/vega-icon-record.ts       |  3 +
 .../trading-checkbox/checkbox.stories.tsx     |  2 +-
 .../trading-form-group/from-group.stories.tsx |  2 +-
 .../input-error.stories.tsx                   |  2 +-
 .../trading-input/input.stories.tsx           |  2 +-
 .../radio-group.stories.tsx                   |  2 +-
 .../trading-select/select.stories.tsx         |  2 +-
 9 files changed, 60 insertions(+), 25 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-warning.tsx

diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx
index cd9645a6c..20cf1a8bc 100644
--- a/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx
+++ b/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
-      intent={Intent.Warning}
-      testId="deal-ticket-warning-margin"
-      message={`You may not have enough margin available to open this position. ${addDecimalsFormatNumber(
-        margin,
-        asset.decimals
-      )} ${asset.symbol} ${t(
-        'is currently required. You have only'
-      )} ${addDecimalsFormatNumber(balance, asset.decimals)} ${
-        asset.symbol
-      } ${t('available.')}`}
-      buttonProps={{
-        text: t(`Deposit ${asset.symbol}`),
-        action: () => onDeposit(asset.id),
-        dataTestId: 'deal-ticket-deposit-dialog-button',
-        size: 'small',
-      }}
-    />
+    <Tooltip description={description}>
+      <div
+        className="flex text-xs items-center"
+        data-testid="deal-ticket-warning-margin"
+      >
+        <span className="text-yellow-500 mr-2">
+          <VegaIcon name={VegaIconNames.WARNING} />
+        </span>
+        {t('You may not have enough margin available to open this position.')}
+      </div>
+    </Tooltip>
   );
 };
diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-warning.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-warning.tsx
new file mode 100644
index 000000000..d8ec76c4b
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts
index 753984075..f1656625a 100644
--- a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts
+++ b/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,
 };
diff --git a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx b/libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx
index d5ae59e0d..a8c4f8fa8 100644
--- a/libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx
+++ b/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) => (
diff --git a/libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx b/libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx
index 0d98733f5..c2d387095 100644
--- a/libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx
+++ b/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',
diff --git a/libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx b/libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx
index f92b7f42f..657eea7f5 100644
--- a/libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx
+++ b/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} />;
diff --git a/libs/ui-toolkit/src/components/trading-input/input.stories.tsx b/libs/ui-toolkit/src/components/trading-input/input.stories.tsx
index dafca8103..12d1f11f2 100644
--- a/libs/ui-toolkit/src/components/trading-input/input.stories.tsx
+++ b/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) => (
diff --git a/libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx b/libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx
index f7bd74a5b..7f156ac95 100644
--- a/libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx
+++ b/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) => (
diff --git a/libs/ui-toolkit/src/components/trading-select/select.stories.tsx b/libs/ui-toolkit/src/components/trading-select/select.stories.tsx
index 1daa565f8..351eea7c8 100644
--- a/libs/ui-toolkit/src/components/trading-select/select.stories.tsx
+++ b/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) => (