Update reader menu icons

[davemart-in]

Description

Addresses https://github.com/Automattic/loop/issues/636

In this PR I've gone through and updated all of the icons in the reader ellipsis toggle menu.

Before

After

Testing

• Apply this PR
• Test this menu on cards across all feeds

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146554

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146554&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146554&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center
• odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/reader-random-icons on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~76 bytes removed 📉 [gzipped])

name                    parsed_size           gzip_size
entry-main                   -921 B  (-0.0%)      -84 B  (-0.0%)
entry-subscriptions          -126 B  (-0.0%)      -21 B  (-0.0%)
entry-stepper                -126 B  (-0.0%)      -13 B  (-0.0%)
entry-reauth-required        -126 B  (-0.0%)      -21 B  (-0.0%)
entry-login                  -126 B  (-0.0%)      -21 B  (-0.0%)
entry-domains-landing        -126 B  (-0.0%)      -21 B  (-0.0%)
entry-dashboard-dotcom       -126 B  (-0.0%)      -21 B  (-0.0%)
entry-dashboard-a4a          -126 B  (-0.0%)      -21 B  (-0.0%)
entry-browsehappy            -126 B  (-0.1%)      -21 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1992 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
home                                   +3211 B  (+0.2%)    +1319 B  (+0.3%)
people                                  +674 B  (+0.1%)     +213 B  (+0.1%)
pages                                   +674 B  (+0.1%)     +245 B  (+0.2%)
settings-writing                        +661 B  (+0.1%)     +114 B  (+0.1%)
posts-custom                            +661 B  (+0.1%)     +229 B  (+0.1%)
posts                                   +661 B  (+0.1%)     +229 B  (+0.1%)
media                                   +661 B  (+0.0%)      +97 B  (+0.0%)
jetpack-cloud-partner-portal            +661 B  (+0.1%)     +126 B  (+0.0%)
earn                                    +661 B  (+0.1%)     +112 B  (+0.0%)
plugins                                 +284 B  (+0.0%)      +66 B  (+0.0%)
overview                                +284 B  (+0.0%)      +74 B  (+0.0%)
jetpack-cloud-plugin-management         +284 B  (+0.0%)      +66 B  (+0.0%)
email                                   +284 B  (+0.0%)      +67 B  (+0.0%)
domains                                 +284 B  (+0.0%)      +66 B  (+0.0%)
a8c-for-agencies-plugins                +284 B  (+0.0%)      +66 B  (+0.0%)
woocommerce-installation                +194 B  (+0.1%)      +55 B  (+0.1%)
woocommerce                             +194 B  (+0.1%)      +55 B  (+0.1%)
themes                                  +194 B  (+0.0%)      +56 B  (+0.0%)
theme                                   +194 B  (+0.0%)      +56 B  (+0.0%)
subscribers                             +194 B  (+0.0%)      +55 B  (+0.0%)
stats                                   +194 B  (+0.0%)      +57 B  (+0.0%)
staging-site                            +194 B  (+0.0%)      +55 B  (+0.0%)
sites-dashboard                         +194 B  (+0.0%)      +55 B  (+0.0%)
site-settings                           +194 B  (+0.0%)      +55 B  (+0.0%)
site-purchases                          +194 B  (+0.0%)      +55 B  (+0.0%)
site-performance                        +194 B  (+0.0%)      +55 B  (+0.0%)
site-monitoring                         +194 B  (+0.0%)      +55 B  (+0.0%)
site-logs                               +194 B  (+0.0%)      +55 B  (+0.0%)
settings-security                       +194 B  (+0.0%)      +55 B  (+0.0%)
settings-reading                        +194 B  (+0.1%)      +55 B  (+0.0%)
settings-podcast                        +194 B  (+0.0%)      +55 B  (+0.0%)
settings-performance                    +194 B  (+0.0%)      +55 B  (+0.0%)
settings-newsletter                     +194 B  (+0.0%)      +55 B  (+0.0%)
settings-jetpack                        +194 B  (+0.0%)      +55 B  (+0.0%)
settings-discussion                     +194 B  (+0.0%)      +55 B  (+0.0%)
settings                                +194 B  (+0.0%)      +55 B  (+0.0%)
scan                                    +194 B  (+0.0%)      +55 B  (+0.0%)
promote-post-i2                         +194 B  (+0.0%)      +55 B  (+0.0%)
plans                                   +194 B  (+0.0%)      +55 B  (+0.0%)
migrate                                 +194 B  (+0.1%)      +55 B  (+0.0%)
marketplace                             +194 B  (+0.0%)      +55 B  (+0.0%)
marketing                               +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-social                          +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-search                          +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-connect                         +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-cloud-settings                  +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-cloud-pricing                   +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-cloud-overview                  +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-cloud-features-comparison       +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-cloud-agency-dashboard          +194 B  (+0.0%)      +55 B  (+0.0%)
jetpack-cloud                           +194 B  (+0.0%)      +55 B  (+0.0%)
import                                  +194 B  (+0.0%)      +55 B  (+0.0%)
hosting                                 +194 B  (+0.0%)      +55 B  (+0.0%)
gutenberg-editor                        +194 B  (+0.1%)      +55 B  (+0.1%)
google-my-business                      +194 B  (+0.0%)      +55 B  (+0.0%)
github-deployments                      +194 B  (+0.0%)      +55 B  (+0.0%)
export                                  +194 B  (+0.1%)      +55 B  (+0.1%)
customize                               +194 B  (+0.1%)      +55 B  (+0.1%)
concierge                               +194 B  (+0.0%)      +55 B  (+0.0%)
comments                                +194 B  (+0.0%)      +55 B  (+0.0%)
backup                                  +194 B  (+0.0%)      +55 B  (+0.0%)
add-ons                                 +194 B  (+0.0%)      +55 B  (+0.0%)
activity                                +194 B  (+0.0%)      +55 B  (+0.0%)
a8c-for-agencies-woopayments            +194 B  (+0.0%)      +55 B  (+0.0%)
a8c-for-agencies-team                   +194 B  (+0.0%)      +55 B  (+0.0%)
a8c-for-agencies-sites                  +194 B  (+0.0%)      +55 B  (+0.0%)
a8c-for-agencies-referrals              +194 B  (+0.0%)      +36 B  (+0.0%)
a8c-for-agencies-purchases              +194 B  (+0.0%)      +55 B  (+0.0%)
a8c-for-agencies-migrations             +194 B  (+0.0%)      +38 B  (+0.0%)
a8c-for-agencies-marketplace            +194 B  (+0.0%)      +38 B  (+0.0%)
a8c-for-agencies-client                 +194 B  (+0.0%)      +55 B  (+0.0%)
purchases                               +181 B  (+0.0%)     +274 B  (+0.0%)
checkout                                +168 B  (+0.0%)       -1 B  (-0.0%)
security                                +123 B  (+0.0%)     -343 B  (-0.2%)
reader                                  -113 B  (-0.0%)      -69 B  (-0.0%)
privacy                                  +86 B  (+0.0%)     +217 B  (+0.1%)
developer                                +86 B  (+0.0%)      +69 B  (+0.0%)
account-close                            +86 B  (+0.0%)     +253 B  (+0.2%)
account                                  +78 B  (+0.0%)     +247 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~1570 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-calypso-components-web-preview-component      +3004 B  (+0.7%)    +1121 B  (+0.8%)
async-load-design-playground                              +674 B  (+0.0%)     +124 B  (+0.0%)
async-load-design                                         +674 B  (+0.0%)     +124 B  (+0.0%)
async-load-design-blocks                                  +651 B  (+0.0%)      +20 B  (+0.0%)
async-load-calypso-post-editor-media-modal                +467 B  (+0.0%)      +42 B  (+0.0%)
async-load-signup-steps-site-picker                       +194 B  (+0.1%)      +55 B  (+0.1%)
async-load-signup-steps-difm-site-picker                  +194 B  (+0.1%)      +55 B  (+0.1%)
async-load-calypso-blocks-jitm-templates-home-task        +194 B  (+0.3%)      +51 B  (+0.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[Addison-Stavlo]

This tests well and code looks reasonable. There are a couple small items to note:

I notice the new ellipsis menu doesn't have the open/close animation the old one did:

I am unsure if we care about that, as many of our ellipsis menus on the dashboard and other places don't do this either.

Note that this change to the ellipsis-menu component will also affect some other items we haven't pointed out. For the most part, ellipsis menus I look for are unaffected, but one example I found are the cards on My Home for the checklist and blogging prompt. Both of these have had the same change as reader cards:


Im not sure if this was intended, but seems like a change towards consistency if we are getting rid of the more bold version with the animation.

Less related to this PR, but something I noticed in testing: it looks like we are in the process of changing "Unsubscribe" to "Subscribed" (again, I know we have had back and forth on this and some a12s reported "bugs" because they clicked it and didn't expect to be unsubscribed 🙃) and updated the copy in the ellipsis menu here, but I'm noticing on /discover we still use the term "Unsubscribe" on the card in contrast to "Subscribed" in the ellipsis menu:
.

[Addison-Stavlo]

If the above notes are all expected, then this seems good to go.

[davemart-in]

Rebased.

[davemart-in]

I'll work on updating "Unsubscribe" and a few other icons in a separate PR.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17535009

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @davemart-in for including a screenshot in the description! This is really helpful for our translators.