Redesign for blocks screen

[rodrigo-fm]

Pull request for #1712

Here's the new blocks screen:

[rodrigo-fm]

I also centered the empty list message, now it'll show like this:

[rodrigo-fm]

@MV-GH I feel that the PR seems ready to merge, but could you wait until I add the blocked elements count? So that we have this layout for the tabs as proposed in the issue? Users (3) | Communities (2) | Instances (0)

I just remembered it now

[MV-GH]

Sure you can mark it draft

[dessalines]

Looks good so far! Ping me or request a review when you're ready for that.

[rodrigo-fm]

@MV-GH @dessalines I think I'll leave the PR as it is. I tried to add the blocks count to the tabs, but I wasn't able to display it in a horizontally scrollable interface, since the text was too constrained and caused a line break. I tried the ScrollableTabRow composable for this, but it wasn't using the screen's full width, which gave the tabs this incomplete line below them, causing them to have a weird design.

In the end I found this link showing how to reduce the internal padding from the Tabs inside the TabRow https://stackoverflow.com/questions/68949292/jetpack-compose-reducing-internal-padding-of-tabs, but I think it'll be better to leave it to another pull request, so that this one doesn't get too big or overcomplicated for an initially simple idea.

My goal with removing the padding is to avoid the scenario below:

[MV-GH]

For counter changes, not so sure removing padding will be better. For the navigation bar we had to resort to making the text smaller.

But its not perfect, depending on language and phone size it can still fail.

[dessalines]

Tested and works well, thx!