Update help center icon #91130
Update help center icon #91130
Conversation
Jetpack Cloud live (direct link)
Automattic for Agencies live (direct link)
|
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: Sections (~21 bytes added 📈 [gzipped]) 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 (~2125 bytes added 📈 [gzipped]) 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. Generated by performance advisor bot at iscalypsofastyet.com. |
matticbot
added
the
[Status] Needs Review
Addison-Stavlo
requested review from
renancarvalho,
arcangelini,
eoigal,
davemart-in and
lucasmendes-design
| fill="var( --color-masterbar-unread-dot-background )" | ||
| stroke="#101517" | ||
| strokeWidth="2" | ||
| stroke="white" |
There was a problem hiding this comment.
This makes the notification circle stroked with white, not transparent. Since the icon is rendered against dark backgrounds.
This SVG cuts the big circle around the smaller circle.
<svg
className="help-center__icon-has-new-items"
ref={ ref }
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.1328,10.7051c0.0832,0.4607,0.1246,0.9356,0.1161,1.4214c-0.0699,4.0034-3.372,7.1922-7.3754,7.1224
c-4.0035-0.0699-7.1922-3.372-7.1224-7.3754C4.821,7.87,8.1231,4.6812,12.1265,4.7511c0.9278,0.0162,1.8086,0.2125,2.6185,0.5444
c0.192-0.4829,0.4729-0.9163,0.8257-1.2848c-1.0456-0.4679-2.2002-0.7381-3.418-0.7594c-4.8318-0.0843-8.817,3.7642-8.9014,8.596
c-0.0843,4.8317,3.7642,8.817,8.596,8.9014c4.8317,0.0843,8.817-3.7642,8.9014-8.596c0.0119-0.6831-0.0626-1.3463-0.1996-1.9869
C20.1223,10.4297,19.6452,10.6169,19.1328,10.7051z"
/>
<rect x="11.1606" y="15.1716" width="1.5557" height="1.5557" />
<path
d="M12.7163,13.2702c2.4199-0.605,3.1113-3.8027,1.1235-5.3584S9,7.8254,9,10.3317h1.5557
c0-0.8643,0.6914-1.5557,1.5557-1.5557c1.9014,0,2.0742,2.7656,0.1729,3.0249c-0.4321,0-0.9507,0.4321-0.9507,1.0371v1.2964h1.5557
v-0.8643H12.7163z"
/>
<circle cx="18.5" cy="6.5" r="3" fill="var( --color-masterbar-unread-dot-background )" />
</svg>
There was a problem hiding this comment.
It's a bit tricky to detect what the stroke color should be, we cannot rely on --color-masterbar since it would be inaccurate in the Editor and the Global Sidebar. And having stroke color being dependent on different vars contextually seems fragile.
@lucasmendes-design could we have a variant for the help center and notification icons where the top right corner is "carved out"? Much like we have for the cart icon:
There was a problem hiding this comment.
@taipeicoder yes exactly. The SVG I share above is carved out.
There was a problem hiding this comment.
Nice @alshakero, how did you get that SVG? 🙂
There was a problem hiding this comment.
This makes the notification circle stroked with white, not transparent.
Yes, I assumed the circle around it was supposed to be white given this is what @lucasmendes-design shared as the svg on the linked issue (maybe it stands out more if you have dark mode on):
Carving out a the circle like you did with illustrator would definitely be a more fitting approach if we actually don't want that white ring.
There was a problem hiding this comment.
Im realizing that with light mode / dark mode, it was probably shared with light mode and that white circle was likely an oversight.
We may want to go with @alshakero's version.
github-actions
bot
removed
the
[Status] Needs Review
Related to # Automattic/dotcom-forge#7185
Proposed Changes
AFTER
Calypso masterbar
with notif:
Editor
Wp-admin
wp-admin classic
Why are these changes being made?
Testing Instructions
Calypso global nav:
Calypso masterbar:
Editor and wp-admin
install-plugin.sh $pluginSlug update/help-center-iconon your sandboxAtomic
Pre-merge Checklist