Opened 8 weeks ago

Closed 5 weeks ago

#31778 closed defect (fixed)

Support default dark-theme for the Circuit Display UI

Reported by: antonela Owned by: tbb-team
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ff68-esr, tbb-9.0-must-alpha, ux-team, TorBrowserTeam201910R
Cc: Actual Points: 1.1
Parent ID: Points: 1
Reviewer: antonela Sponsor:

Description

Let's do the necessary small tweaks to support our UI for the default dark-theme:

  • Remove background
  • Use the light version of the Tor icon
  • Use a light grey at the circuit graph lines
  • Guard needs to have #D476FF
  • At the bottom area, remove the background. It is going to make the helper text visible.

Attaching TB 9.0a6 screenshot

Child Tickets

TicketStatusOwnerSummaryComponent
#29164closedtbb-teamwith dark desktop theme: unreadable guard text: coloured white with bright grey backgroundApplications/Tor Browser

Attachments (5)

Captura de Pantalla 2019-09-17 a la(s) 7.18.50 p. m..png (373.6 KB) - added by antonela 8 weeks ago.
default-theme.png (146.6 KB) - added by acat 5 weeks ago.
light-theme.png (146.1 KB) - added by acat 5 weeks ago.
dark-theme.png (147.2 KB) - added by acat 5 weeks ago.
dark-theme-revised.png (132.5 KB) - added by acat 5 weeks ago.

Download all attachments as: .zip

Change History (17)

comment:1 Changed 8 weeks ago by gk

Should we resolve #31656 as duplicate?

comment:2 Changed 8 weeks ago by gk

Note, there is #31658 as well, which is kind of related.

comment:3 Changed 8 weeks ago by antonela

Ohh, pospeselr won me in that one. I closed #31656 as duplicate.

comment:4 Changed 7 weeks ago by pospeselr

Points: 1

comment:5 Changed 6 weeks ago by pili

Keywords: TorBrowserTeam201910 added

comment:6 Changed 6 weeks ago by pili

Keywords: TorBrowserTeam201909 removed

Changed 5 weeks ago by acat

Attachment: default-theme.png added

Changed 5 weeks ago by acat

Attachment: light-theme.png added

Changed 5 weeks ago by acat

Attachment: dark-theme.png added

comment:7 Changed 5 weeks ago by acat

Actual Points: 1
Keywords: TorBrowserTeam201910R added; TorBrowserTeam201910 removed
Status: assignedneeds_review

For review: https://github.com/acatarineu/torbutton/commit/31778.

I'm attaching three screenshots, with default being the one with system colors (dark in my case), and the other two dark and light. I was not sure whether #D476FF color had to be applied only for Dark mode or for both. I tried to only apply for dark-mode via -moz-lwtheme-brighttext, however that does not seem to work for the default theme when the system is using dark mode (see screenshot). Is this ok or should we change the colors somehow?

comment:8 in reply to:  7 Changed 5 weeks ago by antonela

Replying to acat:

I'm attaching three screenshots, with default being the one with system colors (dark in my case), and the other two dark and light.

Thanks for it!

I was not sure whether #D476FF color had to be applied only for Dark mode or for both.

Just dark mode. That color is coming from #27200 so maybe you already have that rule somewhere.

I tried to only apply for dark-mode via -moz-lwtheme-brighttext, however that does not seem to work for the default theme when the system is using dark mode (see screenshot). Is this ok or should we change the colors somehow?

We are OK!

comment:9 Changed 5 weeks ago by antonela

We need to have lightgrey at the circuit display link [Learn More].

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31778/dark-theme.png

comment:10 Changed 5 weeks ago by gk

Keywords: TorBrowserTeam201910 added; TorBrowserTeam201910R removed
Status: needs_reviewneeds_revision

Changed 5 weeks ago by acat

Attachment: dark-theme-revised.png added

comment:11 Changed 5 weeks ago by acat

Actual Points: 11.1
Keywords: TorBrowserTeam201910R added; TorBrowserTeam201910 removed
Status: needs_revisionneeds_review

Revised adding a dark gray for the 'Learn more' link: https://github.com/acatarineu/torbutton/commit/31778+1.

comment:12 Changed 5 weeks ago by gk

Resolution: fixed
Status: needs_reviewclosed

Looks good to me, nice work. Cherry-picked to master (commit ad8abfab6030a92d3893166f0ba3bc33b186122). Should be available in tomorrow's nightly builds.

Note: See TracTickets for help on using tickets.