Optimize UI

[Hamza417]

What is it?

• [x] Bug fix (user facing)
• [x] Feature (user facing)
• [ ] Codebase improvement (dev facing)
• [ ] Meta improvement to the project (dev facing)

Description of the changes in your PR

Optimize the existing layout and how they work in the app with various accessibility improvements.

Before/After Screenshots/Screen Record

The list is optimized, the titles have better visibility and channel names have been italicized.

The grid list were incorrectly laid out in the app, the icons weren't evenly placed and have weird spacing, the same could be fixed easily by removing the fixed width and height constants and applying aspect ratio based resizing for the thumbnails. The rest of the changes were the same as list view.

The title has been emphasized, and comment usernames have better visibility now. The emphasis from the "X REPLIES" have been reduced to lower case so that it can be a little less loud.

Fixes the following issue(s)

• Fixes #11434

APK testing

The APK can be found by going to the "Checks" tab below the title. On the left pane, click on "CI", scroll down to "artifacts" and click "app" to download the zip file which contains the debug APK of this PR. You can find more info and a video demonstration on this wiki page.

Due diligence

• [x] I read the contribution guidelines.