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

feat(client): Add UI/UX improvements #2845

Merged
merged 3 commits into from
Oct 19, 2023
Merged

feat(client): Add UI/UX improvements #2845

merged 3 commits into from
Oct 19, 2023

Conversation

andre-code
Copy link
Contributor

@andre-code andre-code commented Oct 10, 2023

This Pull Request is dedicated to enhancing the accessibility and user-friendliness of our user interface. To achieve this, we are focusing on three key areas:

  1. Text Color Contrast:
    We have changed the text color contrast across the user interface. This includes adjusting font colors to ensure optimal readability, making it easier for all users to interact with our platform. The selected colors align with browser-suggested options that meet recommended contrast ratios, and we've used our existing color palette as a reference.

  2. Input Border Appearance and Background Colors:
    Changes for input elements to make visually distinct and user-friendly. We've made changes to input borders and background colors to ensure they meet the recommended accessibility standards. These adjustments contribute to a more cohesive and inclusive user experience.

Note: This PR does not include changes to our main brand colors such as "renku-green" and "renku-pink." These modifications will be addressed separately in a future PR, once the new color definitions are provided by the product UI.

  1. Improved Tooltips and Bug Fixes:
    In addition this PR introduces more informative tooltips throughout the interface. We've also taken the opportunity to fix several bugs in various components, contributing to a more stable and reliable user experience.

In details..

- Change alert color texts

Before:
Screenshot at Oct 11 14-54-42 2

After:
Screenshot at Oct 11 13-34-47

- Change tex light color, use in time caption, slug

Before:
Screenshot at Oct 11 14-56-43 2

After:
Screenshot at Oct 11 13-38-03

Before:
Screenshot at Oct 11 15-00-43 2

After:
Screenshot at Oct 11 13-38-51

Before:
Screenshot at Oct 11 15-02-27 2

After:
Screenshot at Oct 11 14-48-08

- Adjust font weight to bold to ensure compliance with contrast ratios on dark backgrounds.

d

- Fix component to do not show double connect button in sessions

a

- Improve contrast color in inputs

c

b

- Fix tooltip position and add more descriptive texts
Before:
Screenshot at Oct 11 15-04-41 2
After:
Screenshot at Oct 11 13-41-25

Screenshot at Oct 11 13-41-42

f

Rel #2846

/deploy #persist

@RenkuBot
Copy link
Contributor

You can access the deployment of this PR at https://renku-ci-ui-2845.dev.renku.ch

@andre-code andre-code temporarily deployed to renku-ci-ui-2845 October 10, 2023 21:17 — with GitHub Actions Inactive
@andre-code andre-code temporarily deployed to renku-ci-ui-2845 October 11, 2023 13:06 — with GitHub Actions Inactive
@andre-code andre-code temporarily deployed to renku-ci-ui-2845 October 11, 2023 15:53 — with GitHub Actions Inactive
@andre-code andre-code self-assigned this Oct 12, 2023
@andre-code andre-code changed the title [wip]feat(client): Add UI/UX improvements feat(client): Add UI/UX improvements Oct 12, 2023
@andre-code andre-code temporarily deployed to renku-ci-ui-2845 October 12, 2023 06:18 — with GitHub Actions Inactive
@andre-code andre-code marked this pull request as ready for review October 12, 2023 07:09
@andre-code andre-code requested a review from a team as a code owner October 12, 2023 07:09
leafty
leafty previously requested changes Oct 12, 2023
Copy link
Member

@leafty leafty left a comment

Choose a reason for hiding this comment

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

Thanks @andre-code! 👏

The visual changes look good to me, I have added a few blocking comments and a bunch of non-blocking notes.

client/src/components/list/ListCard.tsx Show resolved Hide resolved
client/src/components/list/ListCard.tsx Show resolved Hide resolved
client/src/file/File.present.js Show resolved Hide resolved
client/src/file/File.present.js Outdated Show resolved Hide resolved
client/src/file/FileAndLineageComponents.js Outdated Show resolved Hide resolved
client/src/project/Project.present.js Outdated Show resolved Hide resolved
client/src/styles/bootstrap_ext/_badge.scss Outdated Show resolved Hide resolved
client/src/styles/components/_renku_general.scss Outdated Show resolved Hide resolved
@andre-code andre-code temporarily deployed to renku-ci-ui-2845 October 17, 2023 14:17 — with GitHub Actions Inactive
@andre-code andre-code temporarily deployed to renku-ci-ui-2845 October 17, 2023 14:55 — with GitHub Actions Inactive
Copy link
Contributor

@ciyer ciyer left a comment

Choose a reason for hiding this comment

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

Looks great -- like the current UI, but everything pops out a bit more! 🚀

@andre-code andre-code dismissed leafty’s stale review October 19, 2023 07:25

Suggestions included in this PR and reviewer no available

@andre-code andre-code merged commit 5a8728b into master Oct 19, 2023
16 of 17 checks passed
@andre-code andre-code deleted the andrea/000-ui-fixes branch October 19, 2023 07:53
@RenkuBot
Copy link
Contributor

Tearing down the temporary RenkuLab deplyoment for this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Address Accessibility Issues, Improve Tooltip Descriptions, and Adjust Tooltip Position
4 participants