Update to Elastic brand graphics #56094

ryankeairns · 2020-01-28T02:35:21Z

Summary

This PR updates background graphics on the Log in and Visualize type selection modal to align with current Elastic branding. This also better aligns Kibana with the recently updated Cloud log in page design by using the same background graphics.

Light mode: Log in, sample data, viz type modal

Dark mode: Log in, sample data, viz type modal

<< Log in is always light mode >>

Cloud

For reference, here is the latest Cloud log in screen; note the same background graphics

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
~~Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~Documentation was added for features that require explanation or tutorials~~
~~Unit or functional tests were updated or added to match the most common scenarios~~
~~This was checked for keyboard-only and screenreader accessibility~~

For maintainers

~~This was checked for breaking API changes and was labeled appropriately~~
~~This includes a feature addition or change that requires a release note and was labeled appropriately~~

elasticmachine · 2020-01-28T02:35:48Z

Pinging @elastic/kibana-core-ui (Team:Core UI)

ryankeairns · 2020-01-28T02:37:56Z

src/legacy/core_plugins/kibana/public/visualize/np_ready/wizard/_dialog.scss

@@ -1,9 +1,9 @@
 .visNewVisDialog {
  max-width: 100vw;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='166' height='157' viewBox='0 0 166 157'%3E%3Cdefs%3E%3ClinearGradient id='untitled-2-a' x1='0%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.2'/%3E%3Cstop offset='100%25' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='untitled-2-b' cx='0%25' cy='0%25' r='127.787%25' fx='0%25' fy='0%25' gradientTransform='matrix(.681 .68098 -.63326 .7323 0 0)'%3E%3Cstop offset='0%25' stop-color='%23BBB' stop-opacity='.1'/%3E%3Cstop offset='100%25' stop-opacity='.5'/%3E%3C/radialGradient%3E%3ClinearGradient id='untitled-2-c' x1='0%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.4'/%3E%3Cstop offset='100%25' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='untitled-2-d' cx='0%25' cy='0%25' r='148.851%25' fx='0%25' fy='0%25' gradientTransform='matrix(.6718 .67182 -.74072 .60932 0 0)'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.101'/%3E%3Cstop offset='100%25' stop-opacity='.15'/%3E%3C/radialGradient%3E%3CradialGradient id='untitled-2-e' cx='0%25' cy='0%25' r='127.349%25' fx='0%25' fy='0%25' gradientTransform='matrix(.68331 .68332 -.73013 .63951 0 0)'%3E%3Cstop offset='0%25' stop-color='%23BBB' stop-opacity='.1'/%3E%3Cstop offset='100%25' stop-opacity='.5'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg opacity='.5' fill='none' fill-rule='evenodd' transform='matrix(-1 0 0 1 166 0)'%3E%3Cg opacity='.65' transform='matrix(0 -1 -1 0 146 157)'%3E%3Cpolygon fill='%23DD0A73' points='0 0 157 146 0 146' opacity='.418'/%3E%3Cpolygon fill='url(%23untitled-2-a)' points='0 0 157 146 0 146' style='mix-blend-mode:overlay'/%3E%3Cpolygon fill='url(%23untitled-2-b)' points='0 0 157 146 0 146' opacity='.618' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3Cg opacity='.65' transform='translate(88 71)'%3E%3Cpath fill='%23017F75' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' opacity='.409'/%3E%3Cpath fill='url(%23untitled-2-c)' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' style='mix-blend-mode:overlay'/%3E%3Cpath fill='url(%23untitled-2-d)' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' opacity='.663' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3Cg opacity='.15' transform='translate(73 79)'%3E%3Cpolygon fill='%23353535' points='0 0 73 78 0 78' opacity='.38'/%3E%3Cpolygon fill='url(%23untitled-2-a)' points='0 0 73 78 0 78' style='mix-blend-mode:overlay'/%3E%3Cpolygon fill='url(%23untitled-2-e)' points='0 0 73 78 0 78' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+  background-image: url(lightOrDarkTheme("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='313' height='461' viewBox='0 0 313 461'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23F5F7FA' d='M294.009,184.137 C456.386,184.137 588.018,315.77 588.018,478.146 C588.018,640.523 456.386,772.156 294.009,772.156 C131.632,772.156 0,640.523 0,478.146 C0,315.77 131.632,184.137 294.009,184.137 Z M294.009,384.552 C242.318,384.552 200.415,426.456 200.415,478.146 C200.415,529.837 242.318,571.741 294.009,571.741 C345.7,571.741 387.604,529.837 387.604,478.146 C387.604,426.456 345.7,384.552 294.009,384.552 Z'/%3E%3Cpath fill='%23E6EBF2' d='M202.958,365.731 L202.958,380.991 L187.698,380.991 L187.698,365.731 L202.958,365.731 Z M202.958,327.073 L202.958,342.333 L187.698,342.333 L187.698,327.073 L202.958,327.073 Z M243.651,325.038 L243.651,340.298 L228.391,340.298 L228.391,325.038 L243.651,325.038 Z M243.651,286.379 L243.651,301.639 L228.391,301.639 L228.391,286.379 L243.651,286.379 Z M202.958,285.362 L202.958,300.622 L187.698,300.622 L187.698,285.362 L202.958,285.362 Z M284.345,284.345 L284.345,299.605 L269.085,299.605 L269.085,284.345 L284.345,284.345 Z M284.345,245.686 L284.345,260.946 L269.085,260.946 L269.085,245.686 L284.345,245.686 Z M243.651,244.669 L243.651,259.929 L228.391,259.929 L228.391,244.669 L243.651,244.669 Z M202.958,243.651 L202.958,258.911 L187.698,258.911 L187.698,243.651 L202.958,243.651 Z M284.345,203.975 L284.345,219.235 L269.085,219.235 L269.085,203.975 L284.345,203.975 Z M202.958,203.975 L202.958,219.235 L187.698,219.235 L187.698,203.975 L202.958,203.975 Z M243.651,202.958 L243.651,218.218 L228.391,218.218 L228.391,202.958 L243.651,202.958 Z M243.651,163.282 L243.651,178.542 L228.391,178.542 L228.391,163.282 L243.651,163.282 Z M202.958,163.282 L202.958,178.542 L187.698,178.542 L187.698,163.282 L202.958,163.282 Z M284.345,162.265 L284.345,177.525 L269.085,177.525 L269.085,162.265 L284.345,162.265 Z M284.345,122.589 L284.345,137.849 L269.085,137.849 L269.085,122.589 L284.345,122.589 Z M243.651,122.589 L243.651,137.849 L228.391,137.849 L228.391,122.589 L243.651,122.589 Z M202.958,122.589 L202.958,137.849 L187.698,137.849 L187.698,122.589 L202.958,122.589 Z M284.345,81.8954 L284.345,97.1554 L269.085,97.1554 L269.085,81.8954 L284.345,81.8954 Z M243.651,81.8954 L243.651,97.1554 L228.391,97.1554 L228.391,81.8954 L243.651,81.8954 Z M202.958,81.8954 L202.958,97.1554 L187.698,97.1554 L187.698,81.8954 L202.958,81.8954 Z M284.345,41.202 L284.345,56.462 L269.085,56.462 L269.085,41.202 L284.345,41.202 Z M243.651,41.202 L243.651,56.462 L228.391,56.462 L228.391,41.202 L243.651,41.202 Z M284.345,0.508789 L284.345,15.7688 L269.085,15.7688 L269.085,0.508789 L284.345,0.508789 Z'/%3E%3C/g%3E%3C/svg%3E","data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='313' height='461' viewBox='0 0 313 461'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%2318191E' d='M294.009,184.137 C456.386,184.137 588.018,315.77 588.018,478.146 C588.018,640.523 456.386,772.156 294.009,772.156 C131.632,772.156 0,640.523 0,478.146 C0,315.77 131.632,184.137 294.009,184.137 Z M294.009,384.552 C242.318,384.552 200.415,426.456 200.415,478.146 C200.415,529.837 242.318,571.741 294.009,571.741 C345.7,571.741 387.604,529.837 387.604,478.146 C387.604,426.456 345.7,384.552 294.009,384.552 Z'/%3E%3Cpath fill='%2315161B' d='M202.958,365.731 L202.958,380.991 L187.698,380.991 L187.698,365.731 L202.958,365.731 Z M202.958,327.073 L202.958,342.333 L187.698,342.333 L187.698,327.073 L202.958,327.073 Z M243.651,325.038 L243.651,340.298 L228.391,340.298 L228.391,325.038 L243.651,325.038 Z M243.651,286.379 L243.651,301.639 L228.391,301.639 L228.391,286.379 L243.651,286.379 Z M202.958,285.362 L202.958,300.622 L187.698,300.622 L187.698,285.362 L202.958,285.362 Z M284.345,284.345 L284.345,299.605 L269.085,299.605 L269.085,284.345 L284.345,284.345 Z M284.345,245.686 L284.345,260.946 L269.085,260.946 L269.085,245.686 L284.345,245.686 Z M243.651,244.669 L243.651,259.929 L228.391,259.929 L228.391,244.669 L243.651,244.669 Z M202.958,243.651 L202.958,258.911 L187.698,258.911 L187.698,243.651 L202.958,243.651 Z M284.345,203.975 L284.345,219.235 L269.085,219.235 L269.085,203.975 L284.345,203.975 Z M202.958,203.975 L202.958,219.235 L187.698,219.235 L187.698,203.975 L202.958,203.975 Z M243.651,202.958 L243.651,218.218 L228.391,218.218 L228.391,202.958 L243.651,202.958 Z M243.651,163.282 L243.651,178.542 L228.391,178.542 L228.391,163.282 L243.651,163.282 Z M202.958,163.282 L202.958,178.542 L187.698,178.542 L187.698,163.282 L202.958,163.282 Z M284.345,162.265 L284.345,177.525 L269.085,177.525 L269.085,162.265 L284.345,162.265 Z M284.345,122.589 L284.345,137.849 L269.085,137.849 L269.085,122.589 L284.345,122.589 Z M243.651,122.589 L243.651,137.849 L228.391,137.849 L228.391,122.589 L243.651,122.589 Z M202.958,122.589 L202.958,137.849 L187.698,137.849 L187.698,122.589 L202.958,122.589 Z M284.345,81.8954 L284.345,97.1554 L269.085,97.1554 L269.085,81.8954 L284.345,81.8954 Z M243.651,81.8954 L243.651,97.1554 L228.391,97.1554 L228.391,81.8954 L243.651,81.8954 Z M202.958,81.8954 L202.958,97.1554 L187.698,97.1554 L187.698,81.8954 L202.958,81.8954 Z M284.345,41.202 L284.345,56.462 L269.085,56.462 L269.085,41.202 L284.345,41.202 Z M243.651,41.202 L243.651,56.462 L228.391,56.462 L228.391,41.202 L243.651,41.202 Z M284.345,0.508789 L284.345,15.7688 L269.085,15.7688 L269.085,0.508789 L284.345,0.508789 Z'/%3E%3C/g%3E%3C/svg%3E"));


Added a light or dark check and second data uri. Previously, the same graphic was used in both themes.

ryankeairns · 2020-01-28T02:38:32Z

src/legacy/ui/public/styles/_mixins.scss

@@ -77,28 +77,28 @@
  bottom: 0;
  z-index: $euiZLevel + 1000;
  background: inherit;
-  background-image: linear-gradient(0deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%);
+  background-color: $euiPageBackgroundColor;


Solid background also matches with Cloud design.

mdefazio · 2020-01-28T02:45:45Z

This is a nice update! What if we remove the example dashboard graphic in the Let's get started panel (since it's also a dated version of kibana)? Maybe not part of this PR, but maybe something worth trying in another?

ryankeairns · 2020-01-28T13:54:27Z

@mdefazio we lucked out! There was a relevant, unused graphic from when we added the telemetry statement sitting alongside that dated dashboard png. At one point there was going to be a separate card for telemetry, apparently this new graphic snuck in:

flash1293

LGTM, the new background looks nice 🚀 Left a nit

src/legacy/core_plugins/kibana/public/home/np_ready/components/sample_data/index.tsx

kibanamachine · 2020-01-29T19:52:44Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 454e924

History

💚 Build #23024 succeeded 0947e57
💔 Build #23003 failed ecb8de8
💚 Build #22910 succeeded d69c280

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* update elastic brand graphics * update card graphic * update welcome test snapshot * rename png file

update elastic brand graphics

d69c280

ryankeairns added design v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.7.0 labels Jan 28, 2020

ryankeairns requested a review from a team as a code owner January 28, 2020 02:35

ryankeairns added the REASSIGN from Team:Core UI Deprecated label for old Core UI team label Jan 28, 2020

ryankeairns commented Jan 28, 2020

View reviewed changes

update card graphic

ecb8de8

ryankeairns requested a review from a team January 28, 2020 13:51

mdefazio approved these changes Jan 28, 2020

View reviewed changes

update welcome test snapshot

0947e57

ryankeairns added loe:small Small Level of Effort design-only Can be handled solely by a design team member and removed loe:small Small Level of Effort labels Jan 29, 2020

flash1293 approved these changes Jan 29, 2020

View reviewed changes

src/legacy/core_plugins/kibana/public/home/np_ready/components/sample_data/index.tsx Outdated Show resolved Hide resolved

rename png file

454e924

ryankeairns merged commit 9938678 into elastic:master Jan 29, 2020

ryankeairns mentioned this pull request Jan 29, 2020

[7.x] Update to Elastic brand graphics (#56094) #56338

Merged

ryankeairns added a commit to ryankeairns/kibana that referenced this pull request Jan 29, 2020

Update to Elastic brand graphics (elastic#56094)

48bdde9

* update elastic brand graphics * update card graphic * update welcome test snapshot * rename png file

ryankeairns added a commit that referenced this pull request Jan 29, 2020

Update to Elastic brand graphics (#56094) (#56338)

3fad1dc

* update elastic brand graphics * update card graphic * update welcome test snapshot * rename png file

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to Elastic brand graphics #56094

Update to Elastic brand graphics #56094

ryankeairns commented Jan 28, 2020 •

edited

Loading

elasticmachine commented Jan 28, 2020

ryankeairns Jan 28, 2020

ryankeairns Jan 28, 2020

mdefazio commented Jan 28, 2020

ryankeairns commented Jan 28, 2020

flash1293 left a comment

kibanamachine commented Jan 29, 2020

Update to Elastic brand graphics #56094

Update to Elastic brand graphics #56094

Conversation

ryankeairns commented Jan 28, 2020 • edited Loading

Summary

Light mode: Log in, sample data, viz type modal

Dark mode: Log in, sample data, viz type modal

Cloud

Checklist

For maintainers

elasticmachine commented Jan 28, 2020

ryankeairns Jan 28, 2020

Choose a reason for hiding this comment

ryankeairns Jan 28, 2020

Choose a reason for hiding this comment

mdefazio commented Jan 28, 2020

ryankeairns commented Jan 28, 2020

flash1293 left a comment

Choose a reason for hiding this comment

kibanamachine commented Jan 29, 2020

💚 Build Succeeded

History

ryankeairns commented Jan 28, 2020 •

edited

Loading