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(web): expand usage of CircleIconButton #9256

Merged
merged 2 commits into from
May 4, 2024

Conversation

ben-basten
Copy link
Member

Description

Increasing the usage of the CircleIconButton throughout immich. Benefits include consistent theming, accessible labeling, and changing colors when hovering with a mouse.

Also in this change:

  • @waclaw66 rolled back icon theming changes to people card and album card. Hovering over the card just displays the ellipses, and hovering over the ellipses shows an opaque white background. Comment thread here.
  • When the clear button is clicked on the search bar, focus is moved to the input field.

Screenshots

Expand for screenshots

Hover: Search bar button

search-bar

Hover: album card

album-card

How Has This Been Tested?

Visually checked affected icons in both light mode and dark mode.

Checklist:

  • npm run lint
  • npm run format
  • npm run check:svelte - seeing errors in the admin settings, unrelated to my change
  • npm test

@ben-basten
Copy link
Member Author

On my mind after this: finding a way to build easy, accessible and reproducible buttons that have both an icon and text.

@jrasm91 jrasm91 merged commit 48b490f into immich-app:main May 4, 2024
22 of 23 checks passed
@ben-basten ben-basten changed the title feat(web): increase usage of CircleIconButton feat(web): expand usage of CircleIconButton May 4, 2024
@ben-basten ben-basten deleted the feat/icon-button-everywhere branch May 4, 2024 22:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants