[Affiliate] Banners styles look different

[elena-zh]

Originally reported in #1405 (comment)

Banners styles look different. May be we should show these banners one by one? Or, at least, apply a similar design for both?

[alongoni]

I think we should move the warning message to the top (system message) and move the Affiliate program banner down. The cross that closes the banner now looks equal. To integrate the Affiliate program banner with the Profile page itself, I changed the background color of the banner.

cc @biocom @alfetopito

[elena-zh]

Hey @alongoni , could you please clarify what colors for banner will be for:

• positive message (as in your screenshot) for the light mode
• negative message (something like 'you already have trades' or 'the program is eligible in the Mainnet only') for the light and dark modes?

[alongoni]

Light mode

• Positive message:
  
• Negative message:
  

Dark mode

• Positive message:
  
• Negative message:
  

cc @elena-zh @biocom @alfetopito

[alfetopito]

I'm not sure.

To me it looks wrong to have slightly different shades of orange (both light and dark modes) for a somewhat similar message type

What do you think @biocom @anxolin

[anxolin]

Hei! Agree with @alfetopito

About the specific colour I would ask @biocom

The two banners showing together, will be in my opinion an edge case. It just happens that right now we show it always for xDAI network, but in general this banner won't be shown in the future.
For me it's fine even if we use the same color, or even better if we overlap the two messages so we show only one at a time and add a badge with the counter (with the number of messages).

Eager to see Michel's input

[fairlighteth]

We could distinguish the type of banners:

• Site wide banners
• Specific message/action banners, with contextual relevancy.

In the case of activating a Affiliate URL we could consider adding a page specific banner/message:

Obviously with more margin on top, but you get the gist. This way it doesn't compete with the top banner and is more contextual relevant with the Profile/affiliate page you're on.

[elena-zh]

@biocom , what about banners that are displayed on the Swap page?
Should they be displayed there in the same manner as you describe for Profile page?

[fairlighteth]

@elena-zh On a second thought, my impression was these affiliate URL's would open on the profile/affiliate page. But not sure that page is relevant for a referral (user following an Affiliate url) and is only interesting for an Affiliate.

Which in case I wonder if we could place that type of banner also above the Swap container.

In your last screenshot, is this banner shown for the Affiliate or the referral? As it says:

• 'Your affiliate code works! '
• 'Any new user following this link......'

So this is a code the Affiliate gave out and is reported to be working for the referrer?

I was imagining something along the lines of:

1. Affiliate gives out an affiliate url
2. User follows this affiliate url and becomes a referral (user)
3. We confirm the affiliate url is applied for this user (now referral)

In step 3, I think it makes sense to go to the Swap page (not the profile page) and show this banner right above the Swap container. In this message we can even highlight they can check their metrics/view profile.

[elena-zh]

@biocom , based on the scheme

the only one case when a user is redirected to the profile page with a warning is when he/she follows his/her own link.
In addition, I have created several new cases for displaying banner in Profile page only:

• when a user opens the profile in Rinkeby/XDAI Profile: warn a user that stats is available in the Mainnet only #1512
• when something wrong with profile data displaying [Profile] Warn a user when there is an error loading a profile data #1698

In all the rest cases banners are displayed in the Swap page/across all the app until a user closes them/affiliate program status is changed

[alongoni]

Hey @biocom, I've made this draft PR that you can test here. There are a couple of options that I was thinking with Ramiro and Henry about the position and width of the <AffiliateStatusCheck /> component.

A) Relocate the component in the same file (AppMod.tsx) and change the width to ~77%: (you can see the draft PR):

B) Use the <AffiliateStatusCheck /> component on each of the existing and new pages. If we want to match the component width with the Swap / About / Profile container width, we need to add this component in each page. And if we add a new page we need to add the component too.

It will look like this:

WDYT?

cc @ramirotw @henrypalacios @elena-zh

[henrypalacios]

Considering what @elena-zh mentions in the diagram above.

In all other cases the banners are displayed on the exchange page/all over the app until a user closes >them/the affiliate program status is changed.

Option A for me would be the most appropriate.

But maybe we can define it with @biocom

[elena-zh]

Hey @alongoni , option A looks better to me.
However, I'd move the banner up a bit

Also, I wonder how these banners will be displayed in a mobile/tablet views?

[alongoni]

Hey @alongoni , option A looks better to me. However, I'd move the banner up a bit

Also, I wonder how these banners will be displayed in a mobile/tablet views?

Thanks @elena-zh, I've fixed in the PR #1703
cc @alfetopito

[fairlighteth]

@alongoni Had just reviewed #1703 and then I saw this issue. I think you already made the suggestion I tried to make :)

I think you suggestion B is what I'd go with. We could make it a more 'generic' purpose component 'Page alert box' or something. I can see other scenarios where we want to show a message similar to the affiliate one.

[alongoni]

Closed by #1703