fix all misalignment issues

MetaMask · Oct 21, 2024 · 6c2c1e9 · 6c2c1e9
1 parent 6e1a635
commit 6c2c1e9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/ui/components/app/snaps/snap-ui-link/index.scss b/ui/components/app/snaps/snap-ui-link/index.scss
@@ -3,4 +3,9 @@
     // Fixes an issue where the link end icon would wrap
     display: inline-flex;
   }
+
+  .snap-ui-renderer__address + .mm-icon {
+    // This fixes an issue where the icon would be misaligned with the Address component
+    top: 0;
+  }
 }
diff --git a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js
@@ -4,7 +4,9 @@ import { Display } from '../../../../helpers/constants/design-system';
 import {
   ButtonLink,
   ButtonLinkSize,
+  Icon,
   IconName,
+  IconSize,
 } from '../../../component-library';
 import SnapLinkWarning from '../snap-link-warning';
 import useSnapNavigation from '../../../../hooks/snaps/useSnapNavigation';
@@ -57,9 +59,9 @@ export const SnapUILink = ({ href, children }) => {
         textProps={{
           display: Display.Inline,
         }}
-        endIconName={IconName.Export}
       >
         {children}
+        <Icon name={IconName.Export} size={IconSize.Inherit} marginLeft={1} />
       </ButtonLink>
     </>
   );

diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -48,10 +48,6 @@
 
   &__panel {
     gap: 8px;
-
-    .mm-icon--size-inherit {
-      top: 0;
-    }
   }
 
   &__text {