Button Style Consistency

[lucasxsong]

Proposed changes

Our button style consistency has definitely improved over time, but there are a few places on the dashboard where the styling is still a bit splintered. In the above screenshot, you can view a few distinct button styles:

1. The Show Details button, with a background of our primary color (#8c1515) and a text color of white. Let's call this a Primary Button.

2. The Logout button, with a slight gray background and a text color of our primary color. Let's call this a Link Button
   .

3. The Score and Progress report buttons, which have a drop shadow and grey-ish coloring. Let's call this a Raised Button

4. The Edit cog button, which reacts on hover and normally has a primary color background, but loses that background on click and is a bit less visible. This behavior is likely due to the conflicting styles we have declared in custom button styling and PrimeVue's own stylesheets.

5. The expand button, used to un-nest the organizational structure of each administration. This doesn't react on hover, so it may be a little less apparent that it can be utilized. (As an aside, I believe this can be improved by allowing the user to n-nest an org by clicking anywhere within the card.

This is just on one section of one page, and we have many other button variants in other parts of the app (forms, reports). We can greatly improve the feel of our app by unifying these button stylings and the mappings of styling -> functionality. By coming into a consistent pattern of button styling to function, we can make it more intuitive for new users learning how to interact with the site.

For example, we could chose to find a default variant of button used to expand content. Only use the primary button in operations that change the page or force a reload. Whatever we end up on, the most important thing is that there is a rough mapping of the type of button and the function it offers to the user.

Styling wise, we can choose to imitate (or even directly use the primevue set of buttons . With these buttons, we can directly pass in props like link and outlined to style these buttons directly, instead of relying on custom css names.

This PR is a work in progress. Feel free to contribute where you would like! Or add any commentary in the below thread.

Thanks for reading!

Types of changes

What types of changes does this pull request introduce?

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactoring (non-breaking change that does not add functionality but makes code cleaner or more efficient)
• Documentation Update
• Tests (new or updated tests)
• Style (changes to code styling)
• CI (continuous integration changes)
• Repository Maintenance
• Other (please describe below)

Checklist

• I have read the guidelines for contributing.
• The changes in this PR are as small as they can be. They represent one and only one fix or enhancement.
• Linting checks pass with my changes.
• Any existing unit tests pass with my changes.
• Any existing end-to-end tests pass with my changes.
• I have added tests that prove my fix is effective or that my feature works.
• If this PR fixes an existing issue, I have added a unit or end-to-end test that will detect if this issue reoccurs.
• I have added JSDoc comments as appropriate.
• I have added the necessary documentation to the roar-docs repository.
• I have shared this PR on the roar-pr-reviews channel (if I have access)
• I have linked relevant issues (if any)

Justification of missing checklist items

Further comments

[cypress]

Passing run #2809 ↗︎

0

20

0

0

0

Details:

Tests for PR 677 "Button and component consistency" from commit "cbfd2c544b3b63f...
Project: roar-dashboard-e2e	Commit: cbfd2c544b
Status: Passed	Duration: 02:54 💡
Started: Jun 20, 2024 8:59 PM	Ended: Jun 20, 2024 9:02 PM

Review all test suite changes for PR #677 ↗︎