Make hidden branding button color primary and fix footer margin

ui/components/app/app-components.scss

@@ -34,7 +34,7 @@
 @import 'snaps/insight-warnings/index';
 @import 'snaps/snap-authorship-header/index';
 @import 'snaps/snap-authorship-pill/index';
-@import 'snaps/snap-footer-button/index';
+@import 'snaps/snap-ui-footer-button/index';
 @import 'hold-to-reveal-button/index';
 @import 'home-notification/index';
 @import 'info-box/index';

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -44,7 +44,7 @@ import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
-import { SnapFooterButton } from '../snaps/snap-footer-button';
+import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
@@ -106,7 +106,7 @@ export const safeComponentList = {
   SnapUICard,
   SnapUISelector,
   SnapUIAddress,
-  SnapFooterButton,
+  SnapUIFooterButton,
   FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   CreateSnapAccount,

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

@@ -0,0 +1,51 @@
+.snap-ui-renderer__footer-button {
+  &:not(.hide-snap-branding) {
+    &.mm-button-primary {
+      box-shadow: none;
+      color: var(--color-text-alternative);
+      background-color: var(--color-icon-default);
+
+      &:hover:not(&--disabled) {
+        opacity: 80%;
+        box-shadow: none;
+      }
+
+      &:active:not(&--disabled) {
+        opacity: 60%;
+      }
+    }
+
+    &.mm-button-secondary {
+      border-color: var(--color-icon-default);
+      color: var(--color-icon-default);
+
+      & span {
+        color: var(--color-icon-default);
+      }
+
+      &:hover:not(&--disabled) {
+        border-color: var(--color-icon-default);
+        color: var(--color-background-default);
+        background-color: var(--color-background-default-hover);
+        box-shadow: none;
+
+        & span {
+          color: var(--color-icon-default);
+        }
+      }
+
+      &:active:not(&--disabled) {
+        border-color: var(--color-icon-default);
+        opacity: 60%;
+
+        & span {
+          color: var(--color-icon-default);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    cursor: default !important;
+  }
+}

ui/components/app/snaps/snap-ui-footer-button/index.ts

@@ -0,0 +1 @@
+export * from './snap-ui-footer-button';

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

@@ -19,19 +19,21 @@ import {
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import { SnapIcon } from '../snap-icon';
 import { getHideSnapBranding } from '../../../../selectors';
+import classnames from 'classnames';
 
-type SnapFooterButtonProps = {
+type SnapUIFooterButtonProps = {
   name?: string;
   isSnapAction?: boolean;
   onCancel?: () => void;
 };
 
-export const SnapFooterButton: FunctionComponent<
-  SnapFooterButtonProps & ButtonLinkProps<'button'>
+export const SnapUIFooterButton: FunctionComponent<
+  SnapUIFooterButtonProps & ButtonLinkProps<'button'>
 > = ({
   onCancel,
   name,
   children,
+  disabled = false,
   isSnapAction = false,
   type,
   form,
@@ -57,12 +59,16 @@ export const SnapFooterButton: FunctionComponent<
 
   return (
     <Button
-      className="snap-footer-button"
+      className={classnames('snap-ui-renderer__footer-button', {
+        'snap-ui-renderer__footer-button--disabled': disabled,
+        'no-snap-branding': hideSnapBranding,
+      })}
       type={type}
       form={form}
       {...props}
       size={ButtonSize.Lg}
       block
+      disabled={disabled}
       variant={isSnapAction ? ButtonVariant.Primary : ButtonVariant.Secondary}
       onClick={handleClick}
       textProps={{

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

@@ -61,7 +61,7 @@ export const container: UIComponentFactory<BoxElement> = ({
         className: 'snap-ui-renderer__footer-centered',
       },
       children: {
-        element: 'SnapFooterButton',
+        element: 'SnapUIFooterButton',
         key: 'default-button',
         props: {
           onCancel,

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

@@ -17,6 +17,7 @@ export const DEFAULT_FOOTER = {
     display: Display.Flex,
     flexDirection: FlexDirection.Row,
     width: BlockSize.Full,
+    gap: 4,
     padding: 4,
     className: 'snap-ui-renderer__footer',
     backgroundColor: BackgroundColor.backgroundDefault,
@@ -39,7 +40,7 @@ const getDefaultButtons = (
   // If onCancel is omitted by the caller we assume that it is safe to not display the default footer.
   if (children.length === 1 && onCancel) {
     return {
-      element: 'SnapFooterButton',
+      element: 'SnapUIFooterButton',
       key: 'default-button',
       props: {
         onCancel,
@@ -67,7 +68,7 @@ export const footer: UIComponentFactory<FooterElement> = ({
         element: children,
       } as UIComponentParams<ButtonElement>);
       return {
-        element: 'SnapFooterButton',
+        element: 'SnapUIFooterButton',
         key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
         props: {
           ...buttonMapped.props,

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

@@ -68,21 +68,5 @@
 
   &__footer {
     margin-top: auto;
-
-    &-centered {
-      margin-top: auto;
-
-      & button {
-        &:first-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    & button {
-      &:first-child {
-        margin-right: 16px;
-      }
-    }
   }
 }