Update styling of empty states
In https://gitlab.com/gitlab-org/gitlab-ce/issues/37871, Hazel updated the style of empty states to make things more consistent and left align long lines of text. That issue was specific to an inconsistency with the Service Desk empty state, this issue encompasses all empty states.
-
Font
-
Header title:
H4
-
Line-height: 24px (follow the line-height for H4 on Brand.ai)
-
(Note:
H4
is 20px on Brand.ai. CurrenH4
is 18px. It will be consistent in the future.)
-
-
Paragraph & Title
- If the paragraph wraps to two lines on the desktop, align to the left.
- If the title wraps to two lines on desktop, align the title and paragraph to the left.
-
Button
-
The CTA button in the empty state should be a
primary button
. -
There is only a primary button, so if there are two buttons, the other one should be a
secondary button
.
-
-
Size of illustration
-
Currently, the width of illustrations are
max-width: 425px
, it makes some illustration look larger than the original one. I would recommend that we apply the original width from the illustration. -
An example: The original width of illustration for Build with Confidence is
250px
. When the width is425px
, it looks large on the screen.
-
CI/CD - Build with Confidence
- The width of illustration should be
250px
.
Current | New |
---|---|
Issues
Current | New |
---|---|
Labels
- To prevent the title and the text look strange when the long title aligns to left, the text and buttons will also align to left.
Current | New |
---|---|
Service
Current | New |
---|---|
Todos
Current | New |
---|---|
Merge requests
Current | New |
---|---|