Dot notification on user avatar when "Buy CI minutes" option is shown
Proposed options:
We're looking to add a "notification dot" to the user menu when we show the "But CI minutes" option in the user dropdown. This is the current implementation:
Original designs
Dot on the user avatar | User menu dropdown |
---|---|
As the user clicks their avatar, we show the dropdown but it's not clear what the orange dot was referring to. We did have the designs that included indications of what the dot was referring to (shown below). But at some point, we tried to MVC the solution and trimmed it down too far. We should consider our options here:
Options
Altered (trimmed down) msg | Altered (trimmed down) msg 2 | The dot alternative |
---|---|---|
We need to make it clear to users why we're showing the notification dot. It's something that may disrupt their work, so we need to have a good reason for doing that. We could trim down the warning message to simply Less than 30% remaining
(excluding the group name) and link to the group that is running out as an MVC. Or maybe even just One of your groups is running out
. But we do need to explain it.
At the very least, we should show another dot. But that looks odd when next to the time emoji
Next Steps:
Let's proceed with the MVC where we show a generic warning message below the "Buy Pipeline minutes" option in the dropdown.
Designs
Dot notification | Dropdown | Hover & spacing |
---|---|---|
Notes:
- we don't change the colour or the content of the warning message. We always show the same copy (
One of your groups is running out
) and in the same colour ($orange-500
-#AB6100
), no matter how many pipeline minutes remain - the dot notification goes away once the user has clicked on the "Buy Pipeline minutes" option in the dropdown (current behaviour, we may change this in the future)
- we need to change the dot notification colour to
$orange-300
-#D99530
- the whole area of the "Buy Pipeline minutes" is clickable, including the warning message below it.
- Let's change the "Buy CI minutes" to "Buy Pipeline minutes" as we decided to use that term elsewhere.