fix button hover and variants

MetaMask · Sep 26, 2024 · 6cf07fe · 6cf07fe
1 parent c71c560
commit 6cf07fe
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.scss b/ui/components/app/snaps/snap-ui-footer-button/index.scss
@@ -45,6 +45,14 @@
     }
   }
 
+  &.mm-button-secondary {
+    &:hover:not(&--disabled) {
+      & > span {
+        color: var(--color-primary-inverse);
+      }
+    }
+  }
+
   &--disabled {
     cursor: default !important;
   }

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -45,6 +45,7 @@ const getDefaultButtons = (
       key: 'default-button',
       props: {
         onCancel,
+        variant: ButtonVariant.Secondary,
         isSnapAction: false,
       },
       children: t('cancel'),
@@ -62,8 +63,9 @@ export const footer: UIComponentFactory<FooterElement> = ({
 }) => {
   const defaultButtons = getDefaultButtons(element, t, onCancel);
 
+  const providedChildren = getJsxChildren(element);
   const footerChildren: UIComponent[] = (
-    getJsxChildren(element) as ButtonElement[]
+    providedChildren as ButtonElement[]
   ).map((children, index) => {
     const buttonMapped = buttonFn({
       ...params,
@@ -74,7 +76,10 @@ export const footer: UIComponentFactory<FooterElement> = ({
       key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
       props: {
         ...buttonMapped.props,
-        variant: index === 0 ? ButtonVariant.Secondary : ButtonVariant.Primary,
+        variant:
+          providedChildren.length === 2 && index === 0
+            ? ButtonVariant.Secondary
+            : ButtonVariant.Primary,
         isSnapAction: true,
       },
       children: buttonMapped.children,