Content type details error messages

Description

Colors & font sizes

There can be 3 type of messages:

  • Info messages

  • Success messages

  • Error messages

They should have possibility to contain:

  • Title

  • Description

  • Dismiss icon

  • Call to action

Depending on situation where are we using them we will choose weather to have only Title, Title and description, and button.

Example:

  • "Needing a new core version" - will be shown as a "info" message, without an option to dismiss.

  • "Installation successful" - will be shown as a "success" message, with only a Title and an option to dismiss .

  • "Not able to communicate with hub" - will be "error" message, with an option to dismiss and retry

  • etc

Styling

  • Font size for title: list-title, color: dark-text

  • Font size for description: smal-body, color: ligh-text

  • Warning color: ac-warning: #ffcc33

  • Success color: ac-success: #00aa54

  • Error color: ac-error: #c64750

  • Left border size: 0.167em

  • Background color for each box - main color (ac-warning, ac-success, ac-error ) with 15% opacity

  • Message box should have 0.833em margin top and bottom

  • Padding shown on messages.jpg

Example of error msg usage:
Example of info msg usage: https://marvelapp.com/ee0cj0g/screen/24072508
Example of success msg usage:

Acceptance Criteria

UI and functionality for showing an error message instead of the download/install/get button when:

  • needing a new core version

  • not able to communicate with hub

  • other general errors

Assignee

Pål Jørgensen

Reporter

Thomas Marstrander

Labels

None

Funding

None

Code reviewer

Frode Petterson

Released

None

Time tracking

10h

Fix versions

Priority

Medium
Configure