Opened 6 months ago

Closed 4 months 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 5 months ago.
26655-update.zip (23.7 KB) - added by antonela 4 months ago.

Download all attachments as: .zip

Change History (15)

comment:1 Changed 6 months ago by gk

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

comment:2 Changed 6 months 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 months ago by gk

Cc: Dbryrtfbcbhgf added

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

Changed 5 months ago by antonela

Attachment: 26655.zip added

comment:4 Changed 5 months 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 5 months ago by gk

Keywords: TorBrowserTeam201807R added

comment:6 in reply to:  4 ; Changed 5 months 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 5 months ago by gk

Keywords: TorBrowserTeam201808R added; TorBrowserTeam201807R removed

comment:8 in reply to:  6 Changed 4 months 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 4 months ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201808R removed

Changed 4 months ago by antonela

Attachment: 26655-update.zip added

comment:10 Changed 4 months 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 4 months 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 months 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 months ago by gk

Resolution: fixed
Status: merge_readyclosed

Thanks! Merged to master (commit e9b4af29d8acf595bd0da4253336db0783ad5b24).

Note: See TracTickets for help on using tickets.