Opened 6 weeks ago

Closed 4 days ago

#26655 closed defect (fixed)

onion button is wrong size and color

Reported by: arthuredelstein Owned by: antonela
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ff60-esr, TorBrowserTeam201808R
Cc: arthuredelstein, tbb-team, Dbryrtfbcbhgf Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

For some reason the onion button is looking too small. We are using an SVG, so maybe it has some extra margin we can remove? Also, the onion button looks black, while the Home and Reload buttons are dark gray. On the other hand, some users are requesting a more colorful button so they can see it in their peripheral vision. (see https://trac.torproject.org/projects/tor/ticket/25693#comment:20)

Here's how the button looks now:
https://trac.torproject.org/projects/tor/raw-attachment/ticket/26237/toolbar_26237.png

Child Tickets

Attachments (2)

26655.zip (20.5 KB) - added by antonela 6 weeks ago.
26655-update.zip (23.7 KB) - added by antonela 5 days ago.

Download all attachments as: .zip

Change History (15)

comment:1 Changed 6 weeks ago by gk

Cc: tbb-team added
Keywords: ff60-esr added

comment:2 Changed 6 weeks ago by cypherpunks

It looks okay with Hamburger Menu > Customize > Density > Compact (which I think should be the default). Good observation with the color of Reload button vs Onion icon.

comment:3 Changed 6 weeks ago by gk

Cc: Dbryrtfbcbhgf added

comment:23:ticket:25693 has some proposal on how to deal with the missing color.

Changed 6 weeks ago by antonela

Attachment: 26655.zip added

comment:4 Changed 6 weeks ago by antonela

Hi arthur!
I used the default Firefox's Photon assets to build this icon.
https://design.firefox.com/icons/viewer/

But seems like they are setting colors for icons elsewhere (not at the SVG). See this https://design.firefox.com/photon/visuals/iconography.html#color

Anyways, I exported the Tor Button Icon again with no borders. And, also I included a version using Grey 90 a80. .zip attached here Arthur. Let me know!

About colors, I commented at #25693.

comment:5 Changed 4 weeks ago by gk

Keywords: TorBrowserTeam201807R added

comment:6 in reply to:  4 ; Changed 3 weeks ago by gk

Replying to antonela:

Hi arthur!
I used the default Firefox's Photon assets to build this icon.
https://design.firefox.com/icons/viewer/

But seems like they are setting colors for icons elsewhere (not at the SVG). See this https://design.firefox.com/photon/visuals/iconography.html#color

Anyways, I exported the Tor Button Icon again with no borders. And, also I included a version using Grey 90 a80. .zip attached here Arthur. Let me know!

Looks better for me now. I pushed a branch for review:bug_26655 (https://gitweb.torproject.org/user/gk/torbutton.git/commit/?h=bug_26655&id=046aab60950553764504ea2d300a2a734f96fec8).

comment:7 Changed 2 weeks ago by gk

Keywords: TorBrowserTeam201808R added; TorBrowserTeam201807R removed

comment:8 in reply to:  6 Changed 12 days ago by arthuredelstein

Status: assignedneeds_revision

Replying to gk:

Replying to antonela:

Hi arthur!
I used the default Firefox's Photon assets to build this icon.
https://design.firefox.com/icons/viewer/

But seems like they are setting colors for icons elsewhere (not at the SVG). See this https://design.firefox.com/photon/visuals/iconography.html#color

Anyways, I exported the Tor Button Icon again with no borders. And, also I included a version using Grey 90 a80. .zip attached here Arthur. Let me know!

Looks better for me now. I pushed a branch for review:bug_26655 (https://gitweb.torproject.org/user/gk/torbutton.git/commit/?h=bug_26655&id=046aab60950553764504ea2d300a2a734f96fec8).

The icon looks good. But we also need a new version of the icon with the yellow warning triangle overlaid (for when extensions.torbutton.updateNeeded is true).

comment:9 Changed 5 days ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201808R removed

Changed 5 days ago by antonela

Attachment: 26655-update.zip added

comment:10 Changed 5 days ago by antonela

Sorry for the delay! Tor Icon with update status here
https://trac.torproject.org/projects/tor/attachment/ticket/26655/26655-update.zip

comment:11 Changed 5 days ago by gk

Keywords: TorBrowserTeam201808R added; TorBrowserTeam201808 removed
Status: needs_revisionneeds_review

Okay, bug_26655_v2 (https://gitweb.torproject.org/user/gk/torbutton.git/commit/?h=bug_26655_v2&id=e9b4af29d8acf595bd0da4253336db0783ad5b24) has both icons now. FWIW: I picked the grey variants in both cases (I already used it for the regular Torbutton icon in my bug_26655).

comment:12 Changed 4 days ago by arthuredelstein

Status: needs_reviewmerge_ready

I built and tested it and it looks good to me. Thanks, antonela and gk!

comment:13 Changed 4 days ago by gk

Resolution: fixed
Status: merge_readyclosed

Thanks! Merged to master (commit e9b4af29d8acf595bd0da4253336db0783ad5b24).

Note: See TracTickets for help on using tickets.