Photo captions not readable in light themes [🐛]

[bkimminich]

🐛 Bug report

Description

🔬 Minimal Reproduction

1. NODE_ENV=7ms npm start
2. Go to http://localhost:3000/#/photo-wall
3. Hover over any photo to (not) see the caption in black text on gray-transparent background

[bkimminich]

In dark themes it's all fine, because the text is actually dependent on the theme. The transparent box isn't though, it's always dark-gray, which works with white but fails with black text color.

[surajat17]

i am new to open source commnity... can i work on it?

[bkimminich]

Of course, give it a shot! 👍

[rohan2734]

@bkimminich Hey i would like to work on this issue can you assign me this issue

[bkimminich]

Not sure if @surajat17 started working on this yet, but give it a shot too, if you like. First (good) PR, first merge... 😁

[surajat17]

@rohan2734 go for it.

[rohan2734]

ok @surajat17

• Hover over any photo to (not) see the caption in black text on gray-transparent background

is this saying, we need to see the caption, when we hover on the background? or is the opposite?
pleaes be clear.

[bkimminich]

On light background you see it (good ✔️) but on dark background you don't (bad ❌). It should be readable on both color schemes.

[rohan2734]

@bkimminich okay.

[rohan2734]

@bkimminich can you share the file names, on which it is there?
file searching is vert time taking process.

[Scar26]

@rohan2734 If you mean the photowall page, the component is defined in https://github.com/bkimminich/juice-shop/tree/master/frontend/src/app/photo-wall

[bkimminich]

The problematic part is actually this statically defined overlay color: https://github.com/bkimminich/juice-shop/blob/master/frontend/src/app/photo-wall/photo-wall.component.scss#L69

50% transparent black works nicely if you put white letters on it but totally fails if you put black letters on it. The color needs to be different depending on having a light or dark color theme. There should be an Angular-way to do this, but you'd need to investigate that as part of the issue solution.

[github-actions]

This thread has been automatically locked because it has not had recent activity after it was closed. 🔒 Please open a new issue for regressions or related bugs.