Skip to content

fix(library): drop violet halo around artist tiles on dark portraits (#106)#113

Merged
InstaZDLL merged 1 commit into
mainfrom
fix/artist-grid-violet-halo
May 23, 2026
Merged

fix(library): drop violet halo around artist tiles on dark portraits (#106)#113
InstaZDLL merged 1 commit into
mainfrom
fix/artist-grid-violet-halo

Conversation

@InstaZDLL
Copy link
Copy Markdown
Owner

@InstaZDLL InstaZDLL commented May 23, 2026

Closes #106.

Summary

The Artists main grid wraps each image in a FadeInImage whose wrapper carried border border-violet-200/60 dark:border-violet-800/40. On a `rounded-full` clip, that 1 px violet border is drawn along the outer perimeter of the circular mask — invisible on bright portraits, very visible as a colored halo on dark ones (A-ha, Gary Moore in the issue screenshots).

Fix: remove the violet border from the image branch only. The placeholder gradient stays (it's fully covered by `object-cover` once the image decodes, and provides backdrop during the brief loading flash). The no-image fallback branch is untouched — its border is intentional decoration around the initial-letter placeholder.

The Artist detail view (`ArtistDetailView.tsx`) was already clean because its `` renders without a wrapper border (only `shadow-lg`), which matches the new behavior on the grid.

Test plan

  • Open the Library → Artists tab in dark mode
  • Locate dark artist portraits (e.g. A-ha, Gary Moore, anything with a black background)
  • No colored ring around the round avatar — image edges are clean
  • Bright portraits (ABBA, Blondie, Ella Langley) look the same as before
  • Artists without an image still show the violet circle + initial letter placeholder (border intact on this branch)
  • Same check in light mode — no halo regression on either dark or bright portraits
  • Artist detail page (`ArtistDetailView`) still renders the large round portrait identically

Summary by CodeRabbit

  • Bug Fixes
    • Suppression de la bordure violette involontaire autour des avatars d'artistes dans la vue de la bibliothèque.

Review Change Stack

…106)

The Artists grid wrapped each image in a `FadeInImage` whose
wrapper carried `border border-violet-200/60 dark:border-violet-800/40`.
On a `rounded-full` clip, that 1 px border is drawn along the outer
perimeter, just outside the image's circular mask — invisible on
bright portraits, very visible as a colored halo on dark ones
(A-ha, Gary Moore in the report).

Remove the border from the image branch only. The placeholder
gradient stays (it's covered by `object-cover` once the image
decodes), and the no-image fallback branch keeps its border since
it's intentional decoration on the empty state. The Artist detail
page never had this halo because its `<img>` renders without a
wrapper border.
@github-actions github-actions Bot added scope: frontend React/Vite frontend (src/) type: fix Bug fix size: xs < 10 lines labels May 23, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 23, 2026

📝 Walkthrough

Walkthrough

Suppression de la classe de bordure autour de l'avatar d'artiste dans le composant ArtistList. La modification retire la bordure colorée du wrapperClassName de FadeInImage tout en conservant l'arrondi, le dégradé et les effets visuels d'ombre/hover. Résout le bug visuel signalé où une bordure colorée apparaissait sur les images d'artistes uniquement sur la page Artists.

Changes

Suppression de la bordure d'avatar d'artiste

Layer / File(s) Summary
Avatar styling cleanup
src/components/views/LibraryView.tsx
La classe border est supprimée de wrapperClassName dans FadeInImage pour l'avatar d'artiste (lignes 1988-1993), conservant l'arrondi (rounded-full), le dégradé de fond et les classes de shadow/hover. Le commentaire est ajusté pour documenter l'absence intentionnelle de bordure.

🎯 1 (Trivial) | ⏱️ ~3 minutes

🎨 Une bordure qui disparaît,
L'avatar brille sans contrainte,
Les images d'artistes s'éclairent,
Plus de cadre coloré qui luit,
La page Artists respire enfin ! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed Le titre suit la convention Conventional Commits avec le scope 'library' et décrit précisément le changement principal : supprimer le halo violet autour des tuiles d'artistes.
Linked Issues check ✅ Passed Le PR cible directement le bug #106 en supprimant la bordure violette causant le halo sur les portraits sombres dans la grille Artists, tout en préservant le styling du fallback sans image.
Out of Scope Changes check ✅ Passed Les modifications sont limitées au fichier LibraryView.tsx et ciblent uniquement la suppression du halo violet dans la branche image de FadeInImage, alignées avec l'objectif du PR.
Description check ✅ Passed La description suit le modèle requis avec titre Conventional Commits, résumé détaillé, plan de test complet et liste de contrôle validée.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/artist-grid-violet-halo

Comment @coderabbitai help to get the list of available commands and usage tips.

@InstaZDLL InstaZDLL self-assigned this May 23, 2026
@InstaZDLL InstaZDLL merged commit 4608a7b into main May 23, 2026
13 checks passed
@InstaZDLL InstaZDLL deleted the fix/artist-grid-violet-halo branch May 23, 2026 09:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: frontend React/Vite frontend (src/) size: xs < 10 lines type: fix Bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: Artists page - artist image have a color fram on dark images -only in this page

1 participant