fix: Align the delete icon for change mutisig modal

[Lykhoyda]

closes #194

• Aligned delete icon
• Adjust Hover state for the delete button
• Refactored to styled component

---

Submission checklist:

Layout

• Change inspected in the desktop web ui
• Change inspected in the mobile web ui

Compatibility

• Functionality of change validated with a connected account with multisig
• Looks good for multisig with proxy

[Tbaut]

This looks much better!
I just checked on smaller screens and I think we should reduce the outside margins of the "selected" area because this messes up the design, on iphone 11, 12, 13 etc.

[asnaith]

Looking great except for the small device / margin issue which Thibaut already mentioned.

I'm guessing the screenshot below is also the same / similar issue? Here the last two are not in alignment although they don't break out of the parent (this is the "Pixel 7" layout in dev tools).

I really like the new hover highlighting the entire row, that's a good visual tweak

[Lykhoyda]

@Tbaut and @asnaith thank you for the feedback, good catch with the mobile version! I updated the code, so please try again. Especially the Pixel 7 layout as I don't have such a multisig with a lot of accounts

[Tbaut]

Looking great now, thank you!

A couple notes for the PR

• please remove the checkboxes in the first post if you think they don't apply, so that we don't see them as a "todo" from the implementer that aren't done yet
• regarding the mobile view, this checkbox is exactly there for the reason that implementers should remember to check some of the smallest recent phones, such as the iphones SE. We of course don't want to support every single mobile phone.

[asnaith]

@Tbaut and @asnaith thank you for the feedback, good catch with the mobile version! I updated the code, so please try again. Especially the Pixel 7 layout as I don't have such a multisig with a lot of accounts

@Lykhoyda Yep, I've re-tested with the latest version of code and all looking great now :)