feat(tangle-dapp): Update Button Component for Design Systems (#2434)

libs/webb-ui-components/src/components/buttons/Button.tsx

@@ -44,6 +44,7 @@ const Button = React.forwardRef<HTMLElement, ButtonProps>((props, ref) => {
     spinner,
     spinnerPlacement = 'start',
     variant = 'primary',
+    isJustIcon,
     ...restProps
   } = props;
 
@@ -57,6 +58,7 @@ const Button = React.forwardRef<HTMLElement, ButtonProps>((props, ref) => {
     'max-w-max',
     cx({ 'w-full max-w-none justify-center': isFullWidth }),
     getButtonClassNameByVariant(variant, size),
+    isJustIcon && variant === 'utility' ? 'p-2' : '',
     className,
   );
 

libs/webb-ui-components/src/components/buttons/types.ts

@@ -135,6 +135,11 @@ export interface ButtonProps extends ButtonBase, IWebbComponentBase {
    * If `true`, the button will display as full width
    */
   isFullWidth?: boolean;
+
+  /**
+   * If `true`, the size of the button will be adjusted to fit the icon based on the variant
+   */
+  isJustIcon?: boolean;
 }
 
 export interface ButtonSpinnerProps extends WebbComponentBase {
@@ -168,9 +173,7 @@ export type ButtonClassNames = {
       active: string;
       disabled: string;
     };
-    sm: string;
-    md: string;
-  };
+  } & Record<ButtonSize, string>;
 };
 
 /**

libs/webb-ui-components/src/components/buttons/utils.ts

@@ -6,50 +6,50 @@ const classNames: ButtonClassNames = {
   primary: {
     base: {
       common:
-        'rounded-full px-9 py-2 bg-mono-200 border-2 border-transparent text-mono-0 font-bold dark:bg-mono-20 dark:border-2 dark:border-mono-20 dark:text-mono-180',
-      hover: 'hover:bg-mono-160 dark:hover:bg-mono-40',
+        'rounded-full px-9 py-2 bg-purple-40 border-2 border-transparent text-mono-0 font-bold dark:bg-purple-50 dark:border-2 dark:border-purple-50',
+      hover:
+        'hover:bg-purple-50 dark:hover:bg-purple-60 dark:hover:border-purple-60',
       active:
-        'active:border-mono-200 dark:active:bg-mono-20 dark:active:border-mono-160 dark:active:text-mono-180',
+        'active:bg-purple-60 dark:active:bg-purple-70 dark:active:border-purple-70',
       disabled:
-        'disabled:bg-mono-80 dark:disabled:bg-mono-80 dark:disabled:border-transparent dark:disabled:text-mono-0',
+        'disabled:bg-mono-80 dark:disabled:bg-mono-120 dark:disabled:border-transparent dark:disabled:text-mono-60',
     },
     md: 'body1',
     sm: 'body3',
   },
   secondary: {
     base: {
       common:
-        'rounded-full px-9 py-2 bg-mono-0 border-2 border-mono-200 text-mono-200 font-bold dark:bg-mono-180 dark:border-mono-20 dark:text-mono-20',
+        'rounded-full px-9 py-2 bg-mono-0 border border-mono-200 text-mono-200 font-bold dark:bg-mono-180 dark:border-mono-0 dark:text-mono-0',
       hover:
-        'hover:border-mono-140 hover:text-mono-140 dark:hover:border-mono-100 dark:hover:text-mono-60 dark:hover:border-mono-60',
-      active: 'active:bg-mono-20 dark:active:text-mono-0',
+        'hover:border-mono-180 hover:text-mono-180 hover:bg-mono-20 dark:hover:border-mono-20 dark:hover:text-mono-20 dark:hover:border-mono-20 dark:hover:bg-mono-170',
+      active:
+        'active:bg-mono-40 active:text-mono-180 dark:active:text-mono-20 dark:active:bg-mono-160',
       disabled:
-        'disabled:border-mono-100 disabled:text-mono-100 disabled:bg-mono-20 dark:disabled:border-mono-100 dark:disabled:text-mono-100 dark:disabled:bg-mono-20',
+        'disabled:border-mono-100 disabled:text-mono-100 disabled:bg-mono-20 dark:disabled:border-mono-120 dark:disabled:text-mono-120 dark:disabled:bg-mono-160',
     },
     md: 'body1',
     sm: 'body3',
   },
   utility: {
     base: {
       common:
-        'rounded-lg px-3 py-2 bg-blue-0 border border-transparent text-blue-70 dark:bg-blue-120 dark:text-blue-50 font-bold',
-      hover: 'hover:bg-blue-10 hover:text-blue-90 dark:hover:bg-blue-110',
-      active: 'active:border-blue-50 dark:active:border-blue-50',
+        'rounded-lg px-3 py-2 bg-blue-0 text-blue-60 dark:bg-blue-120 dark:text-blue-40 font-bold border border-transparent',
+      hover: 'hover:bg-blue-10 dark:hover:text-blue-30',
+      active:
+        'active:bg-blue-10 active:border-blue-40 dark:active:border-blue-110 dark:active:text-blue-30',
       disabled:
-        'disabled:bg-blue-10 disabled:text-blue-70 disabled:border-transparent dark:disabled:bg-blue-120 dark:disabled:text-blue-50 disabled:opacity-50',
+        'disabled:text-blue-30 disabled:border-transparent dark:disabled:bg-blue-120 dark:disabled:text-blue-90',
     },
     md: 'body1',
     sm: 'body4 uppercase',
   },
   link: {
     base: {
-      common:
-        'text-blue-70 border-b-2 border-b-transparent dark:text-blue-50 font-bold',
-      hover:
-        'hover:border-blue-70 dark:hover:text-blue-30 dark:hover:border-blue-30',
-      active:
-        'active:text-blue-90 active:border-blue-90 dark:active:text-blue-30 dark:active:border-blue-30',
-      disabled: 'disabled:text-blue-40 disabled:dark:text-blue-90',
+      common: 'text-blue-60 dark:text-blue-50 font-bold',
+      hover: 'hover:border-blue-70 dark:hover:text-blue-30',
+      active: 'active:text-blue-80 dark:active:text-blue-20',
+      disabled: 'disabled:text-blue-30 dark:disabled:text-blue-20',
     },
     md: 'body1',
     sm: 'body4 uppercase',