Skip to content

Style improvements for template previews #1777

@koke

Description

@koke

Feedback originally posted by @iamthomasbishop in WordPress/gutenberg#19106 (comment)

  • On Android (because we're using what looks like 20px font-size?) it looks like the icon isn't centered. The close icon-button should be vertically centered with the text label.

  • On Android, I think if we're mimicking the system App Bar style, the label should be set in Medium font-weight.

  • On iOS, it'd be great if we can use a text button that says Close or similar.

  • Are we going to add an Apply or Use button to the right side of the header?

  • Is it possible to also add a sub-title on the header? If so we might want to bring the title font-size down to ~16px.

  • I believe the icon and header title are both white in dark mode, but can we reference WPiOS to double-check? The background of the header should also match that of WPiOS, if possible – although I think we're using a dynamic system color so we might have to mimic the default color.

  • One thing that needs tackling is, the modal is not adjusting to landscape on iOS, it stays in Portrait mode even if I rotate the device. (looks configurable)

Here are some exploratory mocks w/ different header variations:

image

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions