Update icon for channels button on side nav

[PikachuEXE]

Pull Request Type

• [ ] Bugfix
• [x] Feature Implementation
• [ ] Documentation
• [ ] Other

Related issue

https://github.com/FreeTubeApp/FreeTube/pull/5003#issuecomment-2161930504

Description

Update icon for channels button so an icon similar to the existing one can be used for remote playlist in #5003

Screenshots

Width reduced from 1.25em to 1em: height reduced from 1.3em > 1.15em

Testing

• Check the new icon in different modes

Desktop

• OS:
• OS Version:
• FreeTube version:

Additional context

[kommunarr]

suggestion (non-blocking): The alignment of the icons is now bugging me given that this new icon is pretty wide. Could we left-align the icons?

[PikachuEXE]

I understand the content is wider than others but as it's already fixed width I doubt that left-align (I don't even know what it means) fixes anything

[PikachuEXE]

Or just use icon without large asymmetry

e.g. user

[kommunarr]

left-align (I don't even know what it means)

Here's how it looks like with a one-line change (the one highlighted) for reference. Needs a bit more tweaking for the other two cases, but just to demonstrate what I mean

[PikachuEXE]

In that case I might as well post all screenshots for using user for easier comparison

[kommunarr]

I'd prefer user-check because it's more clearly conveying "subscribing" with the checkmark. list and user seem roughly equivalent in terms of how effectively they describe the meaning. I will leave it at that and go along with whichever decision we make for this.

[PikachuEXE]

I am not quite sure that I agree with the left align for icons (for text I can understand) Due to varying gap especially for Trending & Playlists Centered Left align Right align

Youtube got no such issue

Still finding better solutions

Update 1: Add Right align screenshot Update 2: Fix Right align screenshot

[kommunarr]

YouTube doesn't seem to have an issue because the icons are all very similar in size. We could try scaling this particular icon to a small width (with height auto)

[PikachuEXE]

Width reduced from 1.25em to 1em:

[kommunarr]

Ooh! We're very close now. That looks good on everything except the Hide Labels view, where the torso of the icon is poking out. Maybe we need some individual & commented patch for this specific Hide Labels case & icon, like a forced left padding that aligns the user part of the icon with the center.

[PikachuEXE]

height reduced from 1.3em > 1.15em

[PikachuEXE]

OP screenshots updated, code change pushed

@jasonhenriquez I meant to push code changes after you feel fine with the preview XD

[efb4f5ff-1298-471a-8973-3d47447115dc]

I do agree that this icon is way better than the one we had before but im after all those changes im still a bit bothered by the alignment. If this is the best that can be done than i just have to deal with it but i just wanted to point out that it still looks a bit off to me

[kommunarr]

I think you can make an argument for making the bounding box of the icon centered around the user torso, and having the checkmark part not included in the positioning check. But I don't know of a good way to do that at the moment.

[PikachuEXE]

Manually adjusted the horizontal position If it looks off please test locally to find the value that look right for you and share :)

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions[bot]]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[PikachuEXE]

@efb4f5ff-1298-471a-8973-3d47447115dc Updated now, did not see your message (probably deleted accidentally)