onion button is wrong size and color

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:

added TorBrowserTeam201808R component::applications/tor browser ff60-esr owner::antonela priority::medium resolution::fixed severity::normal status::closed type::defect labels

Trac:
Cc: arthuredelstein to arthuredelstein, tbb-team
Keywords: N/A deleted, ff60-esr added

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:23:ticket:25693 has some proposal on how to deal with the missing color.

Trac:
Cc: arthuredelstein, tbb-team to arthuredelstein, tbb-team, Dbryrtfbcbhgf

Trac:
26655.zip

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 (moved).

Trac:
Keywords: N/A deleted, TorBrowserTeam201807R added

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).

Trac:
Keywords: TorBrowserTeam201807R deleted, TorBrowserTeam201808R added

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).

Trac:
Status: assigned to needs_revision

Trac:
Keywords: TorBrowserTeam201808R deleted, TorBrowserTeam201808 added

Trac:
26655-update.zip

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

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).

Trac:
Keywords: TorBrowserTeam201808 deleted, TorBrowserTeam201808R added
Status: needs_revision to needs_review

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

Trac:
Status: needs_review to merge_ready

Thanks! Merged to master (commit e9b4af29d8acf595bd0da4253336db0783ad5b24).

Trac:
Status: merge_ready to closed
Resolution: N/A to fixed

closed

moved to tpo/applications/tor-browser#26655 (closed)