Sports Betting - My Account - Page Layout Responsive

[yanelbottini]

Mobile layout:

Figma link

Responsive references:

Figma link

[JohnDanz]

https://github.com/AugurProject/augur/issues/8873

[yanelbottini]

In general looks fine. Some comments:

• I'm seeing a double scroll bar on tablet breakpoint:

• Can we check if notifications are showing up on mobile? Because right now seems empty to me, but I'm seeing the notifications on desktop.

• Can we reduce the size we use to show page title and tabs on mobile?

• Filter icon seems different (First one design, second dev)

• Please, update to match design

Figma reference: https://www.figma.com/file/wogMuUDylgOHgTEYhZ3jgp/Augur-Bet-UI?node-id=4153%3A196592

[yanelbottini]

• Dropdown styles are incorrect. The ones applied to My created markets are ok.

  

• Missing buttons:

  

• Footer should be fixed to bottom:

  

• Gray bkg should continue. Missing Apply filter button.

  

[bconfortin]

@yanelbottini

Missing Apply filter button.

When I created those filters, I made them generic so we could use the same component anywhere in the UI. Since it's generic, it's hard to keep track of which filters were applied, that's why the filters are applying automatically when clicked instead of when we click an "Apply filters" button.

I still need to figure out the best strategy for that, so I am going to ask you create a separate ticket since it's going to demand some work.

Or we can leave it without the button since the filter process in this case is very fast and performant, as opposed to the Market List page, where we fetch a lot of data every time we click the "Apply filters" button.

[yanelbottini]

Hi @bconfortin Ok. I'll check with Chwy and Matt to see what they think.

I've found some other stuff on mobile:

• There seems to be a white space between notifications?
• All buttons should be like the first one (Full-width)

• The box containing Active markets doesn't follow the same approach than the rest of them. I mean: On notifications I only have 2 notifications and the box is as tall as those 2 notifications. While on Active Markets is full height.

[yanelbottini]

Looks fine. Wonder if we can unify the style for this 2 empty states. One has a box, while the other doesn't. Let's do whatever is simpler, but double check that all the sections within My Account (Favorites, Active Markets, Created Markets, Favs, Notifications) use the same pattern:

Can we delete the line break between "Only... To view" so it fits in 3 lines?