Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the backup icon to better align with WordPress icon package dna #27465

Merged
merged 2 commits into from
Dec 8, 2020

Conversation

jameskoster
Copy link
Contributor

@jameskoster jameskoster commented Dec 3, 2020

I believe the current backup icon – used in the "Revisions" link – is based on an old Dashicon. This PR updates it to match the other icons in the WordPress Icons package, namely:

  • The stroke on the arrow is now 1.5px
  • Arrow head matches the "rotate" icons that already exist

Before:

Screenshot 2020-12-03 at 11 14 22

After:

Screenshot 2020-12-03 at 11 32 17

Rotate icon for reference:

Screenshot 2020-12-03 at 11 35 20

Additional considerations:

The new icon is a 1:1 match with the rotate icon, just rotated slightly to make room for the "hands" of the "clock". If we break that 1:1 relationship ever so slightly we get a sharper icon.

So there's a question to be asked around sharpness vs consistency. Thoughts?

Screenshot 2020-12-03 at 12 29 16

To test:

  • Open a post and check the revisions link in the sidebar. It should look like that "After" screenshot above.

@jameskoster jameskoster added Needs Design Feedback Needs general design feedback. [Package] Icons /packages/icons labels Dec 3, 2020
@jameskoster jameskoster requested a review from jasmussen December 3, 2020 11:46
@github-actions
Copy link

github-actions bot commented Dec 3, 2020

Size Change: +831 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/annotations/index.js 3.8 kB -1 B
build/block-directory/index.js 8.72 kB +1 B
build/block-editor/index.js 128 kB -37 B (0%)
build/block-editor/style-rtl.css 11.2 kB +56 B (0%)
build/block-editor/style.css 11.2 kB +53 B (0%)
build/block-library/editor-rtl.css 9.07 kB +190 B (2%)
build/block-library/editor.css 9.07 kB +189 B (2%)
build/block-library/index.js 149 kB +401 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +1 B
build/blocks/index.js 48.1 kB -1 B
build/components/index.js 172 kB +175 B (0%)
build/components/style-rtl.css 15.3 kB +24 B (0%)
build/components/style.css 15.3 kB +27 B (0%)
build/compose/index.js 9.95 kB -1 B
build/core-data/index.js 15.3 kB +122 B (0%)
build/data/index.js 8.98 kB +5 B (0%)
build/date/index.js 11.2 kB -1 B
build/edit-navigation/index.js 11.1 kB -6 B (0%)
build/edit-post/index.js 306 kB -152 B (0%)
build/edit-site/index.js 24.4 kB +378 B (1%)
build/edit-site/style-rtl.css 3.91 kB -156 B (3%)
build/edit-site/style.css 3.91 kB -155 B (3%)
build/edit-widgets/index.js 26.3 kB -1 B
build/editor/index.js 43.4 kB -144 B (0%)
build/element/index.js 4.62 kB -5 B (0%)
build/format-library/index.js 6.74 kB -120 B (1%)
build/i18n/index.js 3.57 kB +1 B
build/keyboard-shortcuts/index.js 2.54 kB -1 B
build/list-reusable-blocks/index.js 3.1 kB -4 B (0%)
build/nux/index.js 3.42 kB -1 B
build/plugins/index.js 2.56 kB -3 B (0%)
build/primitives/index.js 1.43 kB -1 B
build/priority-queue/index.js 789 B -2 B (0%)
build/redux-routine/index.js 2.84 kB -2 B (0%)
build/reusable-blocks/index.js 2.92 kB +6 B (0%)
build/rich-text/index.js 13.4 kB -2 B (0%)
build/server-side-render/index.js 2.77 kB -2 B (0%)
build/shortcode/index.js 1.69 kB -1 B
build/viewport/index.js 1.86 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/style-rtl.css 8.34 kB 0 B
build/block-library/style.css 8.34 kB 0 B
build/block-library/theme-rtl.css 789 B 0 B
build/block-library/theme.css 790 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/data-controls/index.js 827 B 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/style-rtl.css 6.49 kB 0 B
build/edit-post/style.css 6.47 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.27 kB 0 B
build/html-entities/index.js 623 B 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keycodes/index.js 1.93 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.31 kB 0 B
build/notices/index.js 1.82 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 2.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@shaunandrews
Copy link
Contributor

I like that the circle's line-width now matches better with the other icons. But, the clock hands being triangular really bug me; Why not just use lines?

@jameskoster
Copy link
Contributor Author

Here's a couple of other options that use lines for the hands. The first one uses an identical arrow to the rotate icon and a different hand position. I quite like that one :)

Screenshot 2020-12-04 at 18 56 27

Figma link here in case anyone would like to play with these.

@mapk
Copy link
Contributor

mapk commented Dec 4, 2020

@jameskoster I'm really digging that first one in the last set. The arrow feels more defined and the hands look good, although seem to reflect a checkmark. 🤔

Screen Shot 2020-12-04 at 1 05 56 PM

@jasmussen
Copy link
Contributor

I'd agree with Shaun, the triangular arrows don't really share DNA with the new icon set. However we have htis icon for rotate, that you could take inspiration from:

Screenshot 2020-12-07 at 09 23 03

Here's the time machine icon:

Screenshot 2020-12-07 at 09 24 27

The ingredients in use there seem to get the balance right.

@jameskoster
Copy link
Contributor Author

jameskoster commented Dec 7, 2020

However we have htis icon for rotate, that you could take inspiration from

That is precisely what the icon is based on, it's the same arrow just tidied up a bit 😆

Here's a version that is – ahem – loosely inspired by the Time Machine icon:

Screenshot 2020-12-07 at 10 42 10

In context:

Screenshot 2020-12-07 at 10 50 32

@jasmussen
Copy link
Contributor

I think that one works. 👍 👍

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Big improvement, and the metrics look good:

Screenshot 2020-12-08 at 11 51 44

Let's get this in.

@jameskoster jameskoster merged commit 04b34c6 into master Dec 8, 2020
@jameskoster jameskoster deleted the update/backup-icon branch December 8, 2020 11:01
@github-actions github-actions bot added this to the Gutenberg 9.6 milestone Dec 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Package] Icons /packages/icons
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants