web-wallet: Define and Implement Consistent Card Component Guidelines

[nortonandreev]

Description:

Recent updates to the Wallet's UI have introduced several inconsistencies and regressions in the use of the Card component. To address these issues, we need to establish clear guidelines for the following:

• Icon Placement: Define rules for when an icon should appear on the left side versus the right side of the card.
• Icon Usage: Establish criteria for when an icon should be included on a card and when it should be omitted.
• Color Usage: Set rules for color usage, specifically when to use blue versus the default color.
• Switch Appearance: Standardize the appearance of cards that include a switch.

Once these guidelines are defined, we need to ensure that both the design and implementation strictly adhere to them to maintain consistency throughout the UI.

Some examples of currently broken implementation:

[laremas]

Mainly:

• Icons on the left appears only when a warning action is happening in the card. (mainly related with the seedphrase). all the other icons are placed at the right

• an icon generally is used to emphasise the card title and what is related about it, not all card title needs an icon (like in the wallet creation (verification, store the seed, etc)

• colors, use dark grey as default one. (for icons) keep blue for hovering interaction when present.

• Switch is placed before the icon when present. (check img below)

---

Figma updated.