feat(2793): permission UI requirements from figma, avatar groups and other stuff

[EtherWizard33]

Description

This PR connects the avatar group used for account addresses:

• in the initial connect to the dapp where these avatars represent the accounts the user is granting permission for the dapp to use
• in the connected flow, where the dapp is already connected and those avatar represents accounts the user has already granted permission for the dapp to use

Related issues

Contributes to solve issue: https://github.com/MetaMask/MetaMask-planning/issues/2796

Manual testing steps

I have added screenshot below to see how it looks.

1. Go to the in-app brower on the mobile wallet, connect to a dapp like uniswap
2. Switch netowrk to a network for which permission was not added before
3. A modal will show up and show have the same margin width on the right side as on the left side.

Screenshots/Recordings

Initial Connection Before	Initial Connection After

Already Connected Dapp Before	Already Connected Dapp After

Pre-merge author checklist

• [ ] I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• [ ] I've completed the PR template to the best of my ability
• [ ] I’ve included tests if applicable
• [ ] I’ve documented my code using JSDoc format if applicable
• [ ] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.