Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#6062 closed change (fixed)

Additional adjustments to the option page style changes

Reported by: saroyanm Assignee: saroyanm
Priority: P3 Milestone:
Module: User-Interface Keywords:
Cc: jeen, ire, greiner Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

https://codereview.adblockplus.org/29615654/

Description (last modified by saroyanm)

Background

In #5872 we did apply style changes to the options page, there are some small style changes that are still missing.

What to change

  • Update icons default state to reflect new blue
  • Specify default line height as specified here
  • Fix "Add a new filter list" button distance as specified here
  • Use 0.5rem for the top and bottom padding for complex table rows
  • Line height of Adblock Plus header text should be 2rem
  • Use default browser outline on focused tab in the sidebar instead of using text-shadow
  • change font size of "Settings" in the header to 2.2rem
  • On the Advanced tab: reduce left padding in custom filter text box to 0.8em
  • On the Advanced tab: increase padding between the table headers and the table by 0.5em

Attachments (3)

tooltip-render-issue.png (3.3 KB) - added by saroyanm 2 years ago.
checkbox-selected-not-round.png (3.2 KB) - added by saroyanm 2 years ago.
checkbox-default-render.png (4.8 KB) - added by saroyanm 2 years ago.

Download all attachments as: .zip

Change History (18)

Changed 2 years ago by saroyanm

Changed 2 years ago by saroyanm

Changed 2 years ago by saroyanm

comment:1 Changed 2 years ago by saroyanm

  • Description modified (diff)

comment:2 Changed 2 years ago by saroyanm

  • Cc jeen added
  • Component changed from Unknown to User-Interface

@Jeen can you please let me know if we still would like to have current fixes, as I can't see them being reflected in the updated styleguide:

  • Use 0.5rem for the top and bottom padding for ​complex table rows
  • Line height of Adblock Plus header text should be 2rem

Also can you please let me know if I've missed something, so I can add into the list of things that needs to be fixed.

comment:3 Changed 2 years ago by jeen

Hi - yes apologies I must have missed out those changes in the images - I have since updated the styleguide to account for both those above changes.

comment:4 Changed 2 years ago by jeen

@saroyanm I have one more fix - change font size of "Settings" in the logo to 2.2em - the translated text is running long in some languages i.e. German

comment:5 Changed 2 years ago by saroyanm

  • Description modified (diff)

comment:6 Changed 2 years ago by jeen

Last edited 2 years ago by jeen (previous) (diff)

comment:7 Changed 2 years ago by jeen

  • Description modified (diff)

comment:8 Changed 2 years ago by saroyanm

  • Cc ire greiner added
  • Priority changed from Unknown to P3
  • Ready set

comment:9 Changed 2 years ago by saroyanm

  • Owner set to saroyanm

comment:10 Changed 2 years ago by saroyanm

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:11 Changed 2 years ago by saroyanm

The SVG issues are not trivial, having spaces between sprite items do not completely fix the rendering issues, increasing viewport for the tooltip icon fix it, but with the distortion of the proportions.

I think we will need to separate that into separate issue and investigate further, feels like Chrome have not a single SVG rendering issue.

comment:12 Changed 2 years ago by saroyanm

  • Description modified (diff)

I moved the SVG icon fixes into separate ticket, because they need more investigation #6089

comment:14 Changed 2 years ago by saroyanm

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:15 Changed 2 years ago by Ross

  • Tester changed from Unknown to Ross
  • Verified working set

Done. Style changes are applied and don't look to cause any issues.

ABP 3.0.1.1939
Firefox 52 / 57 / Windows 10
Chrome 52 / 62 / Windows 7
Chrome 39 / 49 / Windows 7

Note: See TracTickets for help on using tickets.