fix: use gap for Snap UI spacing (#23369)

## **Description**

This PR changes the Snap UI renderer to use `gap` for spacing between
elements instead of margin. This is more effective than our previous
attempts at normalizing spacing with nested panels etc. The new standard
is `8px` of gap between everything except panels at the root level which
has `16px` of gap (at the request of @eriknson). This PR removes all the
margins for the existing components.

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

Author: FrederikBolding

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

@@ -24,8 +24,6 @@ export const SnapUIButton: FunctionComponent<
     <Button
       className="snap-ui-renderer__button"
       id={name}
-      marginTop={1}
-      marginBottom={1}
       type={type}
       onClick={handleClick}
       block

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

@@ -30,6 +30,7 @@ export const SnapUIForm: FunctionComponent<SnapUIFormProps> = ({
       id={name}
       display={Display.Flex}
       flexDirection={FlexDirection.Column}
+      gap={2}
     >
       {children}
     </Box>

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

@@ -7,5 +7,5 @@ export type SnapUIImageProps = {
 export const SnapUIImage = ({ value }: SnapUIImageProps) => {
   const src = `data:image/svg+xml;utf8,${encodeURIComponent(value)}`;
 
-  return <img style={{ marginTop: '4px', marginBottom: '4px' }} src={src} />;
+  return <img src={src} />;
 };

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

@@ -36,8 +36,6 @@ export const SnapUIInput: FunctionComponent<
     <FormTextField
       className="snap-ui-renderer__input"
       id={name}
-      marginBottom={1}
-      marginTop={1}
       value={value}
       onChange={handleChange}
       {...props}

ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js

@@ -17,8 +17,6 @@ import SnapLinkWarning from '../snap-link-warning';
 const Paragraph = (props) => (
   <Text
     {...props}
-    marginTop={1}
-    marginBottom={1}
     variant={TextVariant.bodyMd}
     className="snap-ui-markdown__text"
     overflowWrap={OverflowWrap.Anywhere}

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

@@ -6,7 +6,5 @@ export const copyable: UIComponentFactory<Copyable> = ({ element }) => ({
   props: {
     text: element.value,
     sensitive: element.sensitive,
-    marginTop: 1,
-    marginBottom: 1,
   },
 });

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

@@ -7,7 +7,5 @@ export const divider: UIComponentFactory<Divider> = () => ({
   props: {
     className: 'snap-ui-renderer__divider',
     backgroundColor: BorderColor.borderDefault,
-    marginTop: 1,
-    marginBottom: 1,
   },
 });

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

@@ -11,7 +11,5 @@ export const heading: UIComponentFactory<Heading> = ({ element }) => ({
   props: {
     variant: TextVariant.headingSm,
     overflowWrap: OverflowWrap.Anywhere,
-    marginTop: 1,
-    marginBottom: 1,
   },
 });

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

@@ -13,6 +13,8 @@ export const row: UIComponentFactory<Row> = ({ element, ...params }) => ({
       // We do this to cause an overhang with certain confirmation row variants
       marginLeft: '-8px',
       marginRight: '-8px',
+      marginTop: '0px',
+      marginBottom: '0px',
     },
   },
 });

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

@@ -5,8 +5,6 @@
 
   &__spinner {
     width: 30px;
-    margin-top: 4px;
-    margin-bottom: 4px;
   }
 
   &__divider {
@@ -16,29 +14,10 @@
 
   &__panel {
     height: 100%;
+    gap: 8px;
   }
 
-  &__content > *:first-child {
-    margin-top: 0;
-  }
-
-  &__content > &__panel > *:first-child {
-    margin-top: 0;
-  }
-
-  &__content > &__form > *:first-child {
-    margin-top: 0;
-  }
-
-  &__content > *:last-child {
-    margin-bottom: 0;
-  }
-
-  &__content > &__panel > *:last-child {
-    margin-bottom: 0;
-  }
-
-  &__content > &__form > *:last-child {
-    margin-bottom: 0;
+  &__content > &__panel:has(.snap-ui-renderer__panel) {
+    gap: 16px;
   }
 }