Profile Revamp - Friends Tab Update

[samgawaran]

Summary

We will be adding a Sent Requests Tab and a Friend Limit Popup in the friends tab. This submission is accompanied by this implementation issue: https://github.com/colonistio/katan/issues/8366

Screens

Player View

Moderator View

• Same with the player view but without the CTAs

No Friend Requests

Exceeded Friend Limit

• Only show this if a non-member player exceeds 30 friends

Scenarios

Adding a Player as a Friend

Cancelling a Friend Request

Accepting a Friend Request

Declining a Friend Request

Related links

• https://github.com/colonistio/design/issues/139
• https://github.com/colonistio/katan/issues/8325
• https://github.com/colonistio/katan/issues/8295

Submission Checklist

• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewer

@demiculus

[samgawaran]

for reference purposes. This shows the other scenarios too. I'll closed this once the implementation is done.

[demiculus]

1. The red is shiny af. Why that red? What other colors that we're using fit there more?
   • Try not to introduce new colors
   • Find a good color that red is awful
     2. Orange button on popup. Make it green.

edit the implementation issue and let me know https://github.com/colonistio/katan/issues/8366

[samgawaran]

@demiculus

The red is shiny af. Why that red? What other colors that we're using fit there more?

We can either go with these two:

Blue: $color-store-partition-tab-active #2b6187 with hover: #2f6993 Light Red: $color-profile-friends-decline-button #ef3f2a with hover #c11104

The Light Red one is from the colors I'm using at the figma file before. We can either update our $color-profile-dropdown-text-logout to this color or remove this in our variables. Either way this red color is more mild compared to #F00000

---

I prefer the light red one but let me know what you want so I can finalize the implementation issue as well

[demiculus]

Light red