feat: replace snap buttons with button links (#23610)

## **Description**

Replaces the current snap buttons with smaller button links.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/23610?quickstart=1)

## **Related issues**

Fixes: MetaMask/snaps#2298

## **Screenshots/Recordings**


![image](https://github.com/MetaMask/metamask-extension/assets/1561200/00d65bf1-2507-4304-bbbb-4dab31adbe5f)

ui/components/app/app-components.scss

@@ -22,6 +22,7 @@
 @import 'snaps/snap-install-warning/index';
 @import 'snaps/snap-ui-renderer/index';
 @import 'snaps/snap-ui-markdown/index';
+@import 'snaps/snap-ui-button/index';
 @import 'snaps/snap-delineator/index';
 @import 'snaps/snap-list-item/index';
 @import 'snaps/copyable/index';

ui/components/app/snaps/snap-ui-button/index.scss

@@ -0,0 +1,15 @@
+.snap-ui-button {
+  background: none;
+  text-align: center;
+
+  &:not(&--disabled) {
+    &:hover {
+      cursor: pointer;
+      opacity: 0.75;
+    }
+  }
+
+  &--disabled {
+    cursor: default !important;
+  }
+}

ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx

@@ -1,15 +1,34 @@
 import React, { FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import classnames from 'classnames';
 import { ButtonType, UserInputEventType } from '@metamask/snaps-sdk';
-import { Button, ButtonProps } from '../../../component-library';
+import { ButtonLinkProps, Text } from '../../../component-library';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
+import {
+  FontWeight,
+  TextColor,
+} from '../../../../helpers/constants/design-system';
 
 export type SnapUIButtonProps = {
   name?: string;
 };
 
+const COLORS = {
+  primary: TextColor.infoDefault,
+  destructive: TextColor.errorDefault,
+  disabled: TextColor.textMuted,
+};
+
 export const SnapUIButton: FunctionComponent<
-  SnapUIButtonProps & ButtonProps<'button'>
-> = ({ name, children, type, ...props }) => {
+  SnapUIButtonProps & ButtonLinkProps<'button'>
+> = ({
+  name,
+  children,
+  type,
+  variant = 'primary',
+  disabled = false,
+  className = '',
+  ...props
+}) => {
   const { handleEvent } = useSnapInterfaceContext();
 
   const handleClick = (event: ReactMouseEvent<HTMLElement>) => {
@@ -20,16 +39,25 @@ export const SnapUIButton: FunctionComponent<
     handleEvent({ event: UserInputEventType.ButtonClickEvent, name });
   };
 
+  const overriddenVariant = disabled ? 'disabled' : variant;
+
+  const color = COLORS[overriddenVariant as keyof typeof COLORS];
+
   return (
-    <Button
-      className="snap-ui-renderer__button"
+    <Text
+      className={classnames(className, 'snap-ui-button', {
+        'snap-ui-button--disabled': disabled,
+      })}
+      as="button"
       id={name}
       type={type}
+      fontWeight={FontWeight.Medium}
       onClick={handleClick}
-      block
+      color={color}
+      disabled={disabled}
       {...props}
     >
       {children}
-    </Button>
+    </Text>
   );
 };

ui/components/app/snaps/snap-ui-renderer/components/button.ts

@@ -5,7 +5,7 @@ export const button: UIComponentFactory<ButtonElement> = ({ element }) => ({
   element: 'SnapUIButton',
   props: {
     type: element.props.type,
-    variant: element.props.variant === 'destructive' ? 'secondary' : 'primary', // TODO: Support the new variants for the buttons
+    variant: element.props.variant,
     name: element.props.name,
     disabled: element.props.disabled,
   },