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.

Sign up for GitHub

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

Jump to bottom

16650 button contrast issues #16845

Merged
merged 7 commits into from
Jul 16, 2024
Merged

16650 button contrast issues #16845

merged 7 commits into from
Jul 16, 2024

Conversation

andrewgormley
Copy link
Contributor

Fixes: #16650

  • (List page) Low contrast on buttons [both, multiple]
  • (Racks) Low contrast download svg button [dark, multiple]
  • (Buttons) Focus state on buttons is missing focus ring causing contrast and CVD issue [both, global]
  • (Misc) Low contrast on cancel button [dark, multiple]
  • (Misc) Low contrast on create combo button [dark, multiple]

@andrewgormley andrewgormley self-assigned this Jul 8, 2024
@arthanson
Copy link
Collaborator

@andrewgormley just thought I'd mention - I actually find the black text on some of the buttons much harder to read, for example the export button with black on fuscia (see screenshot) sort of strains/hurts my eyes. Also the delete button (black on red) isn't as bad but still seems less readable than before. Not sure if it's just my eyes.

Devices | NetBox 2024-07-09 11-42-23 Devices | NetBox 2024-07-09 11-43-47 PP:B117 | NetBox 2024-07-09 11-44-46

@jeremystretch jeremystretch added this to the v4.1 milestone Jul 9, 2024
@jsenecal
Copy link
Contributor

jsenecal commented Jul 9, 2024

I'm sorry if I come late to this discussion, but wouldn't it be best to address some of these color scheme issues as a user preference Use high-contrast colors and buttons ?

This black on [green,orange,yellow,blue,purple] looks very harsh for the non-color impaired IMHO.

@jeremystretch
Copy link
Member

jeremystretch commented Jul 10, 2024 •
edited
Loading

I realize this is subjective, but I'm not a fan of the brighter colors. As others have noted, it makes the text more difficult to read IMO.

Original:
screenshot1

Modified:
screenshot2

@andrewgormley andrewgormley mentioned this pull request Jul 10, 2024
Merged
5 tasks
@jeremystretch
Copy link
Member

We decided to punt on the button colors for now. It's possible that we might introduce a separate, high-contrast color palette which users can select in their personal preferences.

@jeremystretch
Copy link
Member

I've attached the reverted changes for future reference.

@jeremystretch jeremystretch merged commit e5691df into netbox-community:feature-ui Jul 16, 2024
3 checks passed
jeremystretch added a commit that referenced this pull request Aug 2, 2024
@jeremystretch @andrewgormley
Feature UI (#17069)
02dd1a3 
* 16649 general contrast issues (#16759)

* fixes #16647: navigation contrast issues updated

* fixes #16651: table contrast issues new

* fixed #16649: general contrast issues

* fixes #16649: feedback changes

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband>

* 16648 dashboard contrast issues (#16824)

* fixed #16648: dashboard contrast issues

* reinstate amendment to 16649

* fixed #16648: created gridstack override and removed inline bug fix

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>

* fixed #16853: accessibility issues

* fixed #16847: updated font (#16848)

* fixed #16847: updated font

* fixed #16847: changed font to local and added current font as fallback

* fixed #16847: removed inter and added padding to page header

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16849 document hierarchy issues (#16875)

* fixed #16849: h elements not in sequential order

* fixed #16849: Lists do not contain only li elements

* fixed #16849: fixed h hierarchy on rack object pages

* Remove standalone h5 classes

* Remove unnecessary line breaks

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16650 button contrast issues (#16845)

* fixed #16650: button contrast issues

* fixed #16650: green bg text contrast issue

* Revert errant JS resource updates

* Revert custom button colors

* Fix indentation

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16907 web UI refresh (#16915)

* closes #16907: web ui refresh

* closes #16907: changed default widget color to primary color

* closes #16907: removed comma

* Revert dashboard widget color changes

* Rename logo images for consistency

* Restore original dashboard widget config

* Remove .navbar-brand-autodark from logo

* Restore logo file names

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16394 distinguish product edition (#16924)

* closes #16907: web ui refresh

* closes #16907: changed default widget color to primary color

* closes #16907: removed comma

* closes #16394: distinguish product edition

* Revert dashboard changes

* Clean up redundant styling (merge error)

* removed labs logo and added sub text for all editions

* fixed motif bug

* Fix "flashing" of side nav under dark mode

* Use title case for edition label

* altered edition text style

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Query release features to toggle commercial theme

* fixes dark mode primary button contrast issue

* fixes #16913: hidden admin nav link (#16978)

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* fixed 16852: misc accessbility problems (#16977)

* fixed 16852: misc accessbility problems

* Restore tooltip text

* Add translation support

* Add missing i18n

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* fixes issues in #16850 (#16986)

* fixes issues in #16850: issue 3 and 5

* Add link text for 'clear' button on table column

* Translate aria label

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Use alternate footer links for commercial releases

* Remove Inter font

* Adjust base font weight to 500

* Retain default text color for hyperlinks inside tables

* Logo & edition cleanup

* Move dashboard styling

* Misc cleanup

* Remove unused styles

* Misc cleanup & refactoring

---------

Co-authored-by: Andrew Gormley <andrewgormley91@gmail.com>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jeremystretch jeremystretch jeremystretch approved these changes

Assignees

@andrewgormley andrewgormley

Labels
None yet
Projects
None yet
Milestone
v4.1
Development

Successfully merging this pull request may close these issues.
4 participants
@andrewgormley @arthanson @jsenecal @jeremystretch