White Flags on White Background

[davidjsilva]

Flags that have white backgrounds such as Japan, Monaco, Madagascar

(and many others) do not look like flags when displayed on white backgrounds. We wanted to add some slight elevation to the flags by adding a box shadow. However, upon looking closely at flags.png, not all the flags are of equal width making the box-shadow look inconsistent. And this is not even taking into account the 3px white space on the left and right sides (why do you need that?) which I had to account for as well.

My suggestion is 3 things:

1. Can we make all the flags the same width in flags.png
2. Can we remove the white space in the left and right sides
3. Make elevation (box shadow) a prop??

At the very least #1 would be required. #2 can be handled by css on my end if you don't agree.

[ubaldop]

Hello, thanks for reporting this. Your proposals make sense. Probably I will have some spare time to work on this during the weekend.
If you need them earlier, please consider to open a PR :)

[davidjsilva]

@p3trur0 just wanted to follow up on this. Any progress?

[ubaldop]

hello @davidjsilva sorry for being late on this, but these months are harsh for me. 😢
I'll try to find some spare time to fix this by the end of July.

[ubaldop]

@davidjsilva I released an updated version of the component, namely v2.2.0. It now supports a shadow property adding a box shadow around the flags.

Also, all the left and right whitespaces around the flags have been removed. All the flags now have the same width.

Please, keep me updated if this improvement is suitable for your needs.

Thank you for opening this!

[davidjsilva]

Looks great thank you! I do think the shadow can be "softer" though. I really like how VuetifyJS does it. They have css helpers called Elevation

https://vuetifyjs.com/en/styles/elevation/

They use Alpha's in the rgba to soften the shadow and use different values on each side:

box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%) !important

on the left I used an elevation-4 but on the right it's your shadow. I feel like the #333 shadow on each side is a lil harsh. But it's up to you. Thanks for the update!

[ubaldop]

@davidjsilva glad it helped. Actually you're right about the better style of your proposal. Alas, at the moment I have not enough time to spend on this. Would you like to open a PR about it, please?

[ubaldop]

@davidjsilva eventually I had a chance to work on this codebase again, so I introduced the box shadowing following your suggestion. Please, have a look to latest 2.3.1 😄