[DDW-337] fix select arrow styling to allow color overrides

[DominikGuzei]

This PR fixes the css implementation of the select arrow to allow to define the color of the icon without having to reach into the SVG (which is not possible if only rendered with CSS because it's not part of the DOM).

Additional changes:

• Fixed vertical positioning of the select arrow in opened state
• Fixed bubble positioning logic for selects that open upward

[nikolaglumac]

@DominikGuzei is this PR ready for review?

[DominikGuzei]

@nikolaglumac yes but i wanted to test it with Daedalus before … btw. this is the issue with only using yarn - it doesn't work with linking the package locally / over branches. For that you still need to use npm (but you can simply not add the lock file to the repo)

[nikolaglumac]

@DominikGuzei I have tested your fix in Daedalus and I can confirm that now the inactive state is fine (arrow is correctly positioned and has correct color). However, when the select is active/open then the arrow is no longer vertically centered and has wrong color (the color part could be that we are just missing the correct css variable on Daedalus side). Thanks for looking into this!

Current state

Expected state

[DominikGuzei]

@nikolaglumac yes this PR was never integrated into Daedalus ;) will look into that now

[DominikGuzei]

@nikolaglumac @MarcusHurney i fixed the small issue with the vertical centering of the select arrow … and on the way i found a much bigger issue with broken bubble positioning for selects that open upward. The reason basically is that the previous bubble code assumed that it can always position itself based on the parent node … which is very fragile because (as it obviously happened in a recent refactor to refs) the DOM of the parent can change in many ways.

So i introduced a new (optional) targetRef for bubbles that can point to any DOM element provided by the outer components … and if given the bubble targets that element for positioning. This way the select passes down the inputRef and thus the bubble positions itself correctly again 😉

[DominikGuzei]

@nikolaglumac you can also test the fix in Daedalus now: input-output-hk/daedalus@73abd1d

[nikolaglumac]

Great work @DominikGuzei 🎉
I have tested it in Daedalus (as you suggested) and it is working perfectly 👌