Update unlock screen Alby logo to proper artwork

[secondl1ght]

@bumi noticed that the Alby logo on the unlock screen had an outdated artwork. I have updated it to the new design that johns created. I think it looks really great! Some feedback would be good on sizing though, currently it is fairly big, I think it looks good but I can make it smaller if people think it is too big.

Screenshot:

[dylancom]

Hmm I'm not sure if we need to emphasize on the tipping feature here?

[bumi]

I think @johnsBeharry button was more a suggestion for websites that can use it to indicate tips can be sent by Alby.

the main problem with the current Alby was that is was an old one with different eyes.
@johnsBeharry do you have some idea for some logo/artwork here?

[secondl1ght]

Ohh ok sorry I misunderstood the convo in Slack, I thought we also wanted to use this logo for the unlock screen. But if @johnsBeharry can send me a different piece of artwork then I can use that one for sure.

[bumi]

@secondl1ght you can choose from: https://github.com/getAlby/media
maybe: https://github.com/getAlby/media/blob/main/Alby%20logo%20Icons/Alby%20logo%20figure%20full/Alby-logo-figure-full.svg

[bumi]

@dylancom I think this one does not work that well with light/dark mode and we might need to show two different ones.

or simply only use the Alby (without the "Alby" text) - even though it might be good that people see the name more often :)

[secondl1ght]

do we still want to update this or is this issue closed?

[bumi]

what do you suggest for the dark mode?

[secondl1ght]

I am not sure how we would dynamically change the img src when dark mode is active right now, but I'm sure its possible... for now I think just having Alby without the text would be a good option. I can put in a new PR for that if we agree on it?

[bumi]

oh... wait we use an SVG.. can't we then just use CSS to change the color of the elements in the SVG?

[secondl1ght]

Oh right that's true, let me give it a try and I'll let you know if it works.

[secondl1ght]

So it looks like you can change the background color of the SVG based on dark mode but not the text of the 'Alby' letters. I gave it a try to see what everything thinks:

Before:

After:

I think the background makes it a little bit more legible. What do you guys think?

[bumi]

here is what I thought in a codepen: https://codepen.io/bumibumi/pen/RwLvVGp

[dylancom]

See #523, if we directly render an svg we can set a text color on a parent and let the SVG inherit it. (using currentColor).

[bumi]

nice, did not know about currentColor! looks good

[secondl1ght]

Very cool, nice work @dylancom!

[dylancom]

@secondl1ght thanks!