Skip to content

Conversation

@kwhuber
Copy link

@kwhuber kwhuber commented Oct 27, 2025

Fixes #7262

This PR introduces changes to fix a styling issue with the Select component in Form.tsx.

Specifically, the class added to selected options was too light when using 'dark:bg-neutral-100', hence the following change:

/*
* Selected options in an optional multiple select are clashing with
* the background in dark-mode. This is a fix:
*/
if (props.required !== true && props.multiple === true) {
selected.map((option) => option.classList.add('dark:bg-neutral-500')); // highlights selected object less bright
unselected.map((option) =>
option.classList.remove('dark:bg-neutral-500') // prevents a previously selected option from remaining highlighted
);
}

After following the testing instructions, this was the result prior to the fix:

Screenshot 2025-10-27 at 1 29 41 PM

Following the fix and after selecting the chronostrat then clicking outside of the pick list, this is the corrected behavior:

Screen.Recording.2025-10-27.at.1.32.58.PM.mov

Checklist

  • Self-review the PR after opening it to make sure the changes look good and
    self-explanatory (or properly documented)
  • Add relevant issue to release milestone
  • Add pr to documentation list
  • Add automated tests
  • Add a reverse migration if a migration is present in the PR

Testing instructions

This must be tested in a Geology, Vertebrate Paleontology, or Invertebrate Paleontology discipline. I used the uw_geo_collections_2025_09_09.sql database and then the Fossil Vertebrates collection.

  • Create a Collection Object query, add the Age field to the mapping, add the Name operator, select an item from the list
  • Click away from the list and see that the item turns a very light grey color
  • Verify another query with a select option in a different database (and add that example to your review)

@kwhuber kwhuber added this to the 7.12.0 milestone Oct 27, 2025
@github-project-automation github-project-automation bot moved this to 📋Back Log in General Tester Board Oct 27, 2025
@kwhuber kwhuber requested review from a team and Copilot and removed request for Copilot October 27, 2025 18:40
@grantfitzsimmons
Copy link
Member

@kwhuber Nice work! I suggest retitling this issue to reflect the underlying change instead of focusing on just one result. Sometimes, users or testers create issues with very narrow titles (e.g., "Dark Mode: Selected chronostrat in dropdown for age 'Name' queries is too bright to read"), but the actual change affects all multi-select elements in the app.

@kwhuber kwhuber changed the title fix: adjusted highlight color for selected chronostrat fix: adjusted highlight color for multi select elements Oct 27, 2025
Copy link
Collaborator

@emenslin emenslin left a comment

Choose a reason for hiding this comment

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

  • Create a Collection Object query, add the Age field to the mapping, add the Name operator, select an item from the list
  • Click away from the list and see that the item turns a very light grey color
  • Verify another query with a select option in a different database (and add that example to your review)

Looks good, I tested on ojsmnh with the storage information picklist using the 'in' operator.

Screenshot 2025-10-28 090122

@emenslin emenslin requested a review from a team October 28, 2025 14:17
@gitguardian
Copy link

gitguardian bot commented Oct 29, 2025

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
While these secrets were previously flagged, we no longer have a reference to the
specific commits where they were detected. Once a secret has been leaked into a git
repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.


🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Copy link
Contributor

@Iwantexpresso Iwantexpresso left a comment

Choose a reason for hiding this comment

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

  • Create a Collection Object query, add the Age field to the mapping, add the Name operator, select an item from the list

  • Click away from the list and see that the item turns a very light grey color
    Verify another query with a select option in a different database (and add that example to your review)

  • Verify another query with a select option in a different database (and add that example to your review)

it looks great! I tested on Geo_swiss database using "in" and the Collection Object type pick-list

image

@CarolineDenis
Copy link
Contributor

@kwhuber could you remove all the files that are not necessary for this pr?

Copy link
Member

@acwhite211 acwhite211 left a comment

Choose a reason for hiding this comment

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

Add a commit to reverse the newline changes in the docker-compose.yml, Dockerfile, and manage.py files. 👍

@github-project-automation github-project-automation bot moved this from 📋Back Log to Dev Attention Needed in General Tester Board Dec 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Dev Attention Needed

Development

Successfully merging this pull request may close these issues.

Dark Mode: Selected chronostrat in dropdown for age 'Name' queries is too bright to read

7 participants