Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Dashboard widgets #13734

Draft
wants to merge 3 commits into
base: 5.x
Choose a base branch
from

Conversation

andersonjeccel
Copy link
Contributor

@andersonjeccel andersonjeccel commented May 7, 2024

Q A
Bug fix? (use the a.b branch) [ ]
New feature/enhancement? (use the a.x branch) [X]
Deprecations? [ ]
BC breaks? (use the c.x branch) [ ]
Automated tests included? [ ]
Related user documentation PR URL mautic/mautic-documentation#...
Related developer documentation PR URL mautic/developer-documentation#...
Issue(s) addressed Fixes #...

Description:

This PR increases the widget padding on the dashboard, removes its borders and adds a light grey background color. These changes are part of contrast fixes and modernizes the interface.

This PR is based on another PR, where I introduce tokens to replace most of the UI variables, aiming to improve consistency in all components. We need it to be merged before this one becomes available for code review.

Before:
image

After:
image

Steps to test this PR:

  1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
  2. Open the dashboard
  3. Have a look :)

@andersonjeccel andersonjeccel self-assigned this May 7, 2024
@andersonjeccel andersonjeccel added T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity enhancement Any improvement to an existing feature or functionality dashboard Anything related to the Dashboard labels May 7, 2024
@andersonjeccel andersonjeccel requested review from a team, ricfreire and Esthertests May 7, 2024 17:36
Copy link
Contributor

@shinde-rahul shinde-rahul left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!!

Thank you @andersonjeccel!!!

Copy link
Member

@kuzmany kuzmany left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me like you describe.
For me contrast is weak. But If others UI team approved it, then let's go.

image

@andersonjeccel andersonjeccel marked this pull request as draft May 9, 2024 19:24
@LordRembo LordRembo self-requested a review May 10, 2024 11:41
@LordRembo
Copy link
Contributor

Measuring the contrast, the text vs background is well within the strictest WCAG guidelines. The blue links, as well as the dark grey tooltip bubble with grey text, are very low contrast. Would be best to make that blue darker and the text in the bubble lighter.

@andersonjeccel
Copy link
Contributor Author

I'll leave this as draft for a while until the other fixes happen for the items on top 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dashboard Anything related to the Dashboard enhancement Any improvement to an existing feature or functionality T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity
Projects
Status: In Progress
Development

Successfully merging this pull request may close these issues.

None yet

4 participants