Lbry-desktop: Styling Fixes - buttons / whitespace

[ElectronEsq]

Open File button is not inline with the other buttons creating unnecessary whitespace and looks broken.

Result

A few minor changes, including fixing the auto-play tick-box and subscribe button and you end up with:

[ElectronEsq]

If I get time this weekend, I'll give it a go.

[seanyesmunt]

@Invariant-Change I'm a fan of this. A couple of thoughts:

• We should keep the border-radius so we have a consistent button style.
• I think the subscription button should still stay on the right side, it is related to the channel, not the file, so I don't think it should be grouped with the file actions
• You can hold off the autoplay styling. It will be improved here https://github.com/lbryio/lbry-app/pull/1599

[seanyesmunt]

One of the main reasons for keeping the "Download/Open" button on it's own line was because it loses the button as it's being downloaded. It may look fine inline, but we might need to alter it's styling while the file is being downloaded.

[ElectronEsq]

For buttons/elements that disappear while downloading, maybe disable them, rather than hide and keep them inline?

<button type="button" disabled>Click Me!</button>

document.getElementById("myBtn").disabled = true;

[ElectronEsq]

• Q) We should keep the border-radius so we have a consistent button style.

• A) Yes, consistency paramount. I was playing around with theme ideas. The app could do with some more. I've got some great ideas in this department, which I am working on in my secret basement at groom lake, hehe!

• Q) I think the subscription button should still stay on the right side, it is related to the channel, not the file, so I don't think it should be grouped with the file actions

• A) Yes. However, it currently looks like it's there because the code is broken. It needs some love so that it looks like it's meant to be there.

• Q) You can hold off the autoplay styling. It will be improved here #1599

• A) Sure. IMO, a nice toggle button would work well.

[ElectronEsq]

Just playing around with styling in this image, but I do think icons being on the same level as the channel name is cleaner. I know this idea was thrown out previously, but definitely should remain an idea, especially later on down the road if/when more meta data is added such as views. YouTube does this with their icons, such as music, verified, etc (see image).

[seanyesmunt]

I am definitely a fan of keeping the links separate from the channel name. On Youtube they do it because those icons give meaning to the channel (verified, artist), ours are just for the file.

[seanyesmunt]

Will be addressed in https://github.com/lbryio/lbry-app/pull/1650

[seanyesmunt]

Made some improvements but I'll keep this open if there is more discussion