[Material Design 3 Design Audit] Tablet Card Style

etn-ccis / blui-react-native-workflows

Re-usable Brightlayer UI workflows for React Native applications

6 stars 6 forks source link

[Material Design 3 Design Audit] Tablet Card Style #354

Closed huayunh closed 3 weeks ago

huayunh commented 2 months ago

This thing is not ready for a design audit yet. I think it is better to leave this image here -- design and screenshot side by side. I would not worry too much about the card height.

huayunh commented 2 months ago

In addition, all paddings highlighted here need to be 24px on tablet & desktop, and 16px on mobile. This applies to only dialog box-looking components.

joebochill commented 1 month ago

Hey @huayunh — we were a little confused by your first graphic and what is was trying to show.

Are the key takeaways here:

Fixing border radius of the card
Fixing padding between header and instructions
Fix padding as highlighted in your second graphic
Fixing the font size on set password criteria
Update the show/hide icon to use outlined style
Using open sans (this is called out in a separate issue)

Did we miss anything?

huayunh commented 1 month ago

And card background color. I was probably using "surface container" or "surface container low"

Thanks!

ektaghag-eaton commented 3 weeks ago

Fixed here