feat:proper badge theme use for server list

[rahimrahman]

Summary

While fixing issue with #8312, there has been a few changes to the badge in the server list requested by @asaadmahmood.

Ticket Link

Checklist

• Added or updated unit tests (required for all new features)
• Has UI changes
• Includes text changes and localization file updates
• Have tested against the 5 core themes to ensure consistency between them.
• Have run E2E tests by adding label E2E iOS tests for PR.

Device Information

This PR was tested on: iPhone 15 Simulator, 17.4.1

Screenshots

Release Note

[rahimrahman]

For comparison, this is Quartz before fix, slightly thicker border (hardly noticeable):

[matthewbirtch]

@rahimrahman the Denim and Sapphire themes look good in the screenshots. However, Quartz, Onyx, and Indigo aren't quite right. They should not have blue borders surrounding the badge and the badge background and number should follow the button colors.

It looks like you're using the right theme color variables in the code, but the screenshots aren't showing right. They should look like this:

[enahum]

@rahimrahman the Denim and Sapphire themes look good in the screenshots. However, Quartz, Onyx, and Indigo aren't quite right. They should not have blue borders surrounding the badge and the badge background and number should follow the button colors.

It looks like you're using the right theme color variables in the code, but the screenshots aren't showing right. They should look like this:

@matthewbirtch I have a question.
Why if the code is exactly the same for all themes, some look ok but others don't?

Cause as far as I can see there is no specific code based on the theme.

[matthewbirtch]

@matthewbirtch I have a question.
Why if the code is exactly the same for all themes, some look ok but others don't?

Cause as far as I can see there is no specific code based on the theme.

@enahum @rahimrahman is it possible the screenshots are just old? They don't match with what is applied in code.

My comment was just based on the screenshots, but I can spin up a build and test that to confirm

[rahimrahman]

@matthewbirtch sorry, I think I screwed up my screenshots with a different branch. This is the correct one:

The 1px borderWidth change requested might need/should get reverted. It's too skinny IMO.

[rahimrahman]

Back to 2px borderWidth

[rahimrahman]

Monokai & Organization:

[asaadmahmood]

Looks good to me!

[larkox]

Codewise, LGTM.(we still need to revert the border width change, though).

[matthewbirtch]

Thanks @rahimrahman. Looks good!

[rahimrahman]

@matthewbirtch @asaadmahmood I don't think there's much to test here other than what's already been displayed in a few screenshots.

Should we skip QA Review?

[yasserfaraazkhan]

should be good to merge. It'll be tested during code freeze.