Fix minor visual issues with the new UI

[tpregueiro]

Background

With #4706 we introduced a new UI to ABB for iOS. While adapting the specifications, minor issues have been found, which need to be adjusted to match the overall style.

Want to fix

Please fix the following issues as outlined in the style guides below:

1. Last entry from the context (hamburger) menu should not have a separator (1pt grey line)
2. Tabs icon in the bottom menu should not be clipped
3. Back / Forward arrow icons in the bottom menu should not be clipped
4. Remove unnecessary padding at the top of the first bookmark on the bookmarks page
5. Undo button when you close a Tab should not be pixelate/interpolated
6. Add separators to the bottom bar.
7. When toggling the “Block Ads on this page” on and off, the whole row blinks, it shouldn’t.
8. Remove the 1px line between the page and the loading blue bar. It becomes more visible when you load a website with a top navigation bar.

All fixes above can be found within the following specifications:

• ​General Style Guide
• ​Top Bar Style Guide
• ​Bottom Bar Style Guide
• ​Dashboard Style Guide
• ​Bookmarks Style Guide
• ​History Style Guide
• ​Tab View Style Guide
• ​Tab View Edit Style Guide
• ​Ghost Mode Style Guide

[tpregueiro]

padding issue on bookmarks

[tpregueiro]

1px white space between blue loading bar and the page content

[tpregueiro]

icons clipped

[tpregueiro]

undo icon super pixelated

[jand]

Here is my status report:

1. Fixed

2. I can't fix. I need new sets of icons from the designer.

3. DTTO.

4. Fixed.

5. I can't fix. I need new sets of icons from the designer.

6. I do not know how to fix it. I can make bottom bar visible in all cases. However, in this screenshot https://issues.adblockplus.org/attachment/ticket/4736/04a%20-%20Page%20(not%20focused%20search%20field)%402x.2.png bottom bar is not visible when page is loaded. What was the intend of the designer in this case?

7. That "blinking" was caused by selection animation of cells in menu view. All cells in menu view have the same selection effect. I disabled that effect only for the first cell. It fixed the issue, however the look of the first cell do not match to look of the rest of cells in menu view. Can be this menu view revisited by designer?

8. Fixed

[mario]

@jand,
Regarding 2., 3., 5., can you specify in what way you need different icons? The source icons don't appear to be clipped/interpolated. Do they need to be in a specific resolution? If so, can you state which?

Regarding 7., the style of the menu item can't be maintained if you remove the tap effect?

[tpregueiro]

@jand regarding point 6, sorry I haven't explain myself correctly. What I meant was that we're missing the grey border on both bars. See screenshot explaining: ​https://www.dropbox.com/s/rhf936r3ecdop3d/Screenshot%202017-08-21%2012.26.36.png?dl=0

For UI specification please see Zeplin ​https://app.zeplin.io/project/57fcfa623fd034515ee3d6e3/screen/58527d9989efd6de780bc06a

No additional behavioral changes are needed. The bars should still disappear as the user scrolls down, and reappear as user scrolls up. That's working as expected.

[mario]

@jand, I've just attached a file with updated assets regarding 2., 3. and 5.:
https://issues.adblockplus.org/attachment/ticket/5486/Adblock%20Browser%20Assets.zip

[jand]

2., 3., 5. and 6.

7: I still do not know how to fix that issue. Can you check the latest build if you are contented with the current implementation?

[tpregueiro]

@jand, according to your previous comment (https://issues.adblockplus.org/timeline?from=2017-08-18T12%3A30%3A48Z&precision=second), this "I disabled that effect only for the first cell." makes sense even if the look and feel is dfiferent between the different cells in the menu. I have discussed this with @martin and we both agree this is a good fix. I have tested in the latest build (​https://rink.hockeyapp.net/apps/17fe112a9a87264d60d12934005e92f8/app_versions/655) and it's working correctly.