Add context, examples, and images to Snaps custom UI (#1225)

* Add context, examples, and images to Snaps custom UI * Apply suggestions from code review Co-authored-by: Maarten Zuidhoorn <maarten@zuidhoorn.com> * minor fixes --------- Co-authored-by: Maarten Zuidhoorn <maarten@zuidhoorn.com>
MetaMask · Mar 20, 2024 · 1cbe890 · 1cbe890
1 parent a43a717
commit 1cbe890
Show file tree

Hide file tree

Showing 20 changed files with 274 additions and 115 deletions.
diff --git a/snaps/assets/custom-ui-address-tooltip.png b/snaps/assets/custom-ui-address-tooltip.png
diff --git a/snaps/assets/custom-ui-address.png b/snaps/assets/custom-ui-address.png
diff --git a/snaps/assets/custom-ui-copyable.png b/snaps/assets/custom-ui-copyable.png
diff --git a/snaps/assets/custom-ui-divider.png b/snaps/assets/custom-ui-divider.png
diff --git a/snaps/assets/custom-ui-emojis.png b/snaps/assets/custom-ui-emojis.png
diff --git a/snaps/assets/custom-ui-heading.png b/snaps/assets/custom-ui-heading.png
diff --git a/snaps/assets/custom-ui-image.png b/snaps/assets/custom-ui-image.png
diff --git a/snaps/assets/custom-ui-links.png b/snaps/assets/custom-ui-links.png
diff --git a/snaps/assets/custom-ui-markdown.png b/snaps/assets/custom-ui-markdown.png
diff --git a/snaps/assets/custom-ui-panel.png b/snaps/assets/custom-ui-panel.png
diff --git a/snaps/assets/custom-ui-row.png b/snaps/assets/custom-ui-row.png
diff --git a/snaps/assets/custom-ui-spinner.gif b/snaps/assets/custom-ui-spinner.gif
diff --git a/snaps/features/custom-evm-accounts/index.md b/snaps/features/custom-evm-accounts/index.md
@@ -13,7 +13,7 @@ accounts and [ERC-4337 accounts](#account-abstraction-erc-4337), alongside regul
 in the user interface:
 
 <p align="center">
-<img src={require('../../assets/keyring/accounts-ui.png').default} alt="Account management Snap accounts in Metamask UI" width="360" style={{border: '1px solid gray'}} />
+<img src={require('../../assets/keyring/accounts-ui.png').default} alt="Account management Snap accounts in Metamask UI" width="360" style={{border: '1px solid #DCDCDC'}} />
 </p>
 
 To use the Keyring API, you first [implement the API in an account management Snap](create-account-snap.md)