Page MenuHomePhabricator

Adjust text prominence for the info panel in the MinT MVP Home step
Open, LowPublic

Description

As part of MinT for Wikipedia Readers MVP (T359072), the Home step (T359401) provides an info panel which provides general information about the topics available ("Millions of topics on Wikipedia can be automatically translated...").

The initial implementation uses the regular text color (color-base) in font-size-medium size which do not match the specification. This ticket proposes to adjust the text color for this element to use color-subtle, and the size to be font-size-small instead. In this way the text blends a bit better into the information box, avoiding to compete for the user attention with other elements in the UI. To keep the spacing consistent, the container for the button (mint-home-info-panel__random-button-container) needs an adjustment for the top margin to make the separation 16px (spacing-100) instead of the current 24px.

For more details you can check Codex tokens for color and for spacing.

The current state and proposal are illustrated below (notice the subtle tone difference in the text in the box at the bottom of the screen):

CurrentProposed
en.m.wikipedia.org_wiki_Special_MinT(Wiki Mobile) (2).png (568×320 px, 30 KB)
en.m.wikipedia.org_wiki_Special_MinT(Wiki Mobile) (6).png (568×320 px, 31 KB)

Event Timeline

Pginer-WMF created this task.
Pginer-WMF moved this task from Backlog to Product integration on the MinT board.
Pginer-WMF added a subscriber: ngkountas.