feat: new connect wallet modal - add Pill component

libs/ui-toolkit/src/components/index.ts

@@ -54,3 +54,4 @@ export * from './traffic-light';
 export * from './vega-icons';
 export * from './vega-logo';
 export * from './viewing-as-user';
+export * from './pill';

libs/ui-toolkit/src/components/pill/index.ts

@@ -0,0 +1 @@
+export * from './pill';

libs/ui-toolkit/src/components/pill/pill.stories.tsx

@@ -0,0 +1,48 @@
+import type { Story, Meta } from '@storybook/react';
+import { Pill } from './pill';
+import { Intent } from '../../utils/intent';
+
+export default {
+  component: Pill,
+  title: 'Pill',
+} as Meta;
+
+const Template: Story = (args) => <Pill {...args}>Pill</Pill>;
+
+export const Default = Template.bind({ intent: Intent.Primary, size: 'md' });
+
+export const None = Template.bind({});
+None.args = {
+  intent: Intent.None,
+  size: 'md',
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  intent: Intent.Info,
+  size: 'md',
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  intent: Intent.Primary,
+  size: 'md',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  intent: Intent.Success,
+  size: 'md',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: Intent.Warning,
+  size: 'md',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  intent: Intent.Danger,
+  size: 'md',
+};

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

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import { Intent } from '../../utils/intent';
+import classNames from 'classnames';
+
+type Size = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+interface Props {
+  children: ReactNode;
+  intent?: Intent;
+  size?: Size;
+  className?: string;
+}
+
+const getClasses = (intent?: Intent, size: Size, className?: string) => {
+  return classNames(
+    ['rounded-md', 'leading-none', 'font-alpha', 'py-1 px-2'],
+    {
+      'bg-vega-yellow dark:bg-vega-yellow': intent === Intent.Primary,
+      'bg-vega-clight-500 dark:bg-vega-cdark-500': intent === Intent.None,
+      'bg-vega-blue-500 dark:bg-vega-blue-500': intent === Intent.Info,
+      'bg-vega-orange-350 dark:bg-vega-orange-650': intent === Intent.Warning,
+      'bg-vega-red-350 dark:bg-vega-red-650': intent === Intent.Danger,
+      'bg-vega-green-350 dark:bg-vega-green-650': intent === Intent.Success,
+      'text-vega-clight-50 dark:text-vega-cdark-50': intent !== Intent.Primary,
+      'text-vega-clight-900 dark:text-vega-cdark-900':
+        intent === Intent.Primary,
+    },
+    {
+      'text-lg': size === 'lg',
+      'text-base': size === 'md',
+      'text-sma': size === 'sm',
+      'text-xs': size === 'xs',
+      'text-[10px]': size === 'xxs',
+    },
+    className
+  );
+};
+
+export const Pill = ({ intent, size, className, children }: Props) => {
+  return (
+    <span className={getClasses(intent, size || 'md', className)}>
+      {children}
+    </span>
+  );
+};

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -5,7 +5,7 @@ import {
   FormGroup,
   Input,
   Intent,
-  Lozenge,
+  Pill,
   TradingButton,
   VegaIcon,
   VegaIconNames,
@@ -24,10 +24,10 @@ import { JsonRpcConnectorForm } from './json-rpc-connector-form';
 import { ViewConnectorForm } from './view-connector-form';
 import { useEnvironment } from '@vegaprotocol/environment';
 import {
+  BrowserIcon,
   ConnectDialogContent,
   ConnectDialogFooter,
   ConnectDialogTitle,
-  BrowserIcon,
 } from './connect-dialog-elements';
 import type { Status as JsonRpcStatus } from '../use-json-rpc-connect';
 import { useJsonRpcConnect } from '../use-json-rpc-connect';
@@ -337,9 +337,9 @@ const GetWallet = () => {
     <>
       <div className="flex items-center justify-center gap-1 text-base">
         {t('Get the Vega Wallet')}
-        <Lozenge className="text-[10px] !font-alpha bg-vega-blue-500 dark:bg-vega-blue-500 py-0 px-1">
+        <Pill size="xxs" intent={Intent.Info}>
           ALPHA
-        </Lozenge>
+        </Pill>
       </div>
       <BrowserIcon />
     </>