[Design] Branding changes in Elastic to focus more towards the Elasti…

…c brand (#58160) (#59827) Elastic Kibana branding. Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Mar 13, 2020 · 3c9bfc5 · 3c9bfc5
1 parent 0e0801b
commit 3c9bfc5
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 123 deletions.
diff --git a/src/core/server/rendering/views/styles.tsx b/src/core/server/rendering/views/styles.tsx
@@ -32,17 +32,28 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
     <style
       dangerouslySetInnerHTML={{
         __html: `
-          * {
+
+          *, *:before, *:after {
             box-sizing: border-box;
           }
 
+          html, body, div, span, svg {
+            margin: 0;
+            padding: 0;
+            border: none;
+            vertical-align: baseline;
+          }
+
           body, html {
             width: 100%;
             height: 100%;
             margin: 0;
+            display: block;
           }
 
-          .kibanaWelcomeView {
+          .kbnWelcomeView {
+            line-height: 1.5;
+            background-color: #FFF;
             height: 100%;
             display: -webkit-box;
             display: -webkit-flex;
@@ -67,101 +78,80 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
                     justify-content: center;
           }
 
-          .kibanaWelcomeLogo {
-            width: 60px;
-            height: 60px;
-            margin: 10px 0 10px 20px;
-            background-repeat: no-repeat;
-            background-size: contain;
-            /* SVG optimized according to http://codepen.io/tigt/post/optimizing-svgs-in-data-uris */
-            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzOSIgdmlld0JveD0iMCAwIDMwIDM5Ij4gIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDxwb2x5Z29uIGZpbGw9IiNGMDRFOTgiIHBvaW50cz0iMCAwIDAgMzQuNTQ3IDI5LjkyMiAuMDIiLz4gICAgPHBhdGggZmlsbD0iIzM0Mzc0MSIgZD0iTTAsMTQuNCBMMCwzNC41NDY4IEwxNC4yODcyLDE4LjA2MTIgQzEwLjA0MTYsMTUuNzM4IDUuMTgwNCwxNC40IDAsMTQuNCIvPiAgICA8cGF0aCBmaWxsPSIjMDBCRkIzIiBkPSJNMTcuMzc0MiwxOS45OTY4IEwyLjcyMSwzNi45MDQ4IEwxLjQzMzQsMzguMzg5MiBMMjkuMjYzOCwzOC4zODkyIEMyNy43NjE0LDMwLjgzODggMjMuNDA0MiwyNC4zMjY0IDE3LjM3NDIsMTkuOTk2OCIvPiAgPC9nPjwvc3ZnPg==');
-          }
-
-          .kibanaWelcomeTitle {
+          .kbnWelcomeTitle {
             color: #000;
             font-size: 20px;
             font-family: sans-serif;
-            margin-top: 20px;
+            margin: 16px 0;
             animation: fadeIn 1s ease-in-out;
             animation-fill-mode: forwards;
             opacity: 0;
             animation-delay: 1.0s;
           }
 
-          .kibanaWelcomeText {
+          .kbnWelcomeText {
+            font-family:
+            display: inline-block;
             font-size: 14px;
             font-family: sans-serif;
+            line-height: 40px !important;
+            height: 40px !important;
             color: #98a2b3;
-            animation: fadeIn 1s ease-in-out;
-            animation-fill-mode: forwards;
-            opacity: 0;
-            animation-delay: 1.0s;
           }
 
-          .kibanaLoaderWrap {
-            height: 128px;
-            width: 128px;
-            position: relative;
-            margin-top: 40px;
+          .kbnLoaderWrap {
+            text-align: center;
+            line-height: 1;
+            text-align: center;
+            font-faimily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial !important;
+            letter-spacing: -.005em;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+            font-kerning: normal;
+            font-weight: 400;
           }
 
-          .kibanaLoaderWrap + * {
-            margin-top: 24px;
+          .kbnLoaderWrap svg {
+            width: 64px;
+            height: 64px;
+            margin: auto;
+            line-height: 1;
           }
 
-          .kibanaLoader {
-            height: 128px;
-            width: 128px;
-            margin: 0 auto;
+          .kbnLoader path {
+            stroke: white;
+          }
+
+          .kbnProgress {
+            display: inline-block;
             position: relative;
-            border: 2px solid transparent;
-            border-top: 2px solid #017d73;
-            border-radius: 100%;
-            display: block;
-            opacity: 0;
-            animation: rotation .75s .5s infinite linear, fadeIn 1s .5s ease-in-out forwards;
+            width: 32px;
+            height: 4px;
+            overflow: hidden;
+            background-color: #D3DAE6;
+            line-height: 1;
           }
 
-          .kibanaWelcomeLogoCircle {
+          .kbnProgress:before {
             position: absolute;
-            left: 4px;
-            top: 4px;
-            width: 120px;
-            height: 120px;
-            padding: 20px;
-            background-color: #fff;
-            border-radius: 50%;
-            animation: bounceIn .5s ease-in-out;
+            content: '';
+            height: 4px;
+            width: 100%;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            transform: scaleX(0) translateX(0%);
+            animation: kbnProgress 1s cubic-bezier(.694, .0482, .335, 1) infinite;
+            background-color: #006DE4;
           }
 
-          @keyframes rotation {
-            from {
-              transform: rotate(0deg);
-            }
-            to {
-              transform: rotate(359deg);
-            }
-          }
-          @keyframes fadeIn {
-            from {
-              opacity: 0;
-            }
-            to {
-              opacity: 1;
-            }
-          }
-          @keyframes bounceIn {
+          @keyframes kbnProgress {
             0% {
-              opacity: 0;
-              transform: scale(.1);
-            }
-            80% {
-              opacity: .5;
-              transform: scale(1.2);
+              transform: scaleX(1) translateX(-100%);
             }
+
             100% {
-              opacity: 1;
-              transform: scale(1);
+              transform: scaleX(1) translateX(100%);
             }
           }
         `,

diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx
@@ -38,13 +38,43 @@ export const Template: FunctionComponent<Props> = ({
     strictCsp,
   },
 }) => {
+  const logo = (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+      <g fill="none">
+        <path
+          fill="#FDD009"
+          d="M11.9338171,13.1522761 L19.2872353,16.5080972 L26.7065664,10.0005147 C26.8139592,9.46384495 26.866377,8.92859725 26.866377,8.36846422 C26.866377,3.78984954 23.1459864,0.0647302752 18.5719941,0.0647302752 C15.8357526,0.0647302752 13.2836129,1.41337248 11.7323847,3.67480826 L10.4983628,10.0839872 L11.9338171,13.1522761 Z"
+        />
+        <path
+          fill="#23BAB1"
+          d="M4.32214501,20.9473399 C4.21475229,21.4841518 4.1596354,22.0410142 4.1596354,22.6044179 C4.1596354,27.1948353 7.89096419,30.9300509 12.4774572,30.9300509 C15.2361432,30.9300509 17.8007837,29.5687528 19.3495969,27.2841381 L20.5743853,20.8965739 L18.9399136,17.7698399 L11.5573744,14.401505 L4.32214501,20.9473399 Z"
+        />
+        <path
+          fill="#EE5097"
+          d="M4.27553714,8.20847294 L9.31503995,9.3995555 L10.4190826,3.6639867 C9.73040545,3.1371289 8.88035513,2.84874358 8.00601361,2.84874358 C5.81596922,2.84874358 4.0348979,4.63252339 4.0348979,6.82484908 C4.0348979,7.30904633 4.11572655,7.77333532 4.27553714,8.20847294"
+        />
+        <path
+          fill="#17A7E0"
+          d="M3.83806807,9.40996468 C1.58651435,10.1568087 0.0210807931,12.3172812 0.0210807931,14.6937583 C0.0210807931,17.0078087 1.45071086,19.0741436 3.5965765,19.8918041 L10.6668813,13.494428 L9.36879313,10.717795 L3.83806807,9.40996468 Z"
+        />
+        <path
+          fill="#92C73D"
+          d="M20.6421734,27.2838537 C21.3334075,27.8156885 22.1793383,28.1057803 23.0428837,28.1057803 C25.232786,28.1057803 27.0138574,26.3228537 27.0138574,24.130528 C27.0138574,23.6470417 26.9331708,23.1827528 26.7732181,22.7477573 L21.7379769,21.5681931 L20.6421734,27.2838537 Z"
+        />
+        <path
+          fill="#0678A0"
+          d="M21.6667227,20.2469532 L27.2099485,21.5446872 C29.4623545,20.7995495 31.0277881,18.6382239 31.0277881,16.2608936 C31.0277881,13.9511092 29.5947487,11.8871917 27.4447635,11.0719486 L20.1946185,17.4303615 L21.6667227,20.2469532 Z"
+        />
+      </g>
+    </svg>
+  );
   return (
     <html lang={locale}>
       <head>
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <meta name="viewport" content="width=device-width" />
-        <title>Kibana</title>
+        <title>Elastic Kibana</title>
         <Fonts url={uiPublicUrl} />
         {/* Favicons (generated from http://realfavicongenerator.net/) */}
         <link
@@ -81,46 +111,35 @@ export const Template: FunctionComponent<Props> = ({
         })}
         {createElement('kbn-injected-metadata', { data: JSON.stringify(injectedMetadata) })}
         <div
-          className="kibanaWelcomeView"
+          className="kbnWelcomeView"
           id="kbn_loading_message"
           style={{ display: 'none' }}
           data-test-subj="kbnLoadingMessage"
         >
-          <div className="kibanaLoaderWrap">
-            <div className="kibanaLoader" />
-            <div className="kibanaWelcomeLogoCircle">
-              <div className="kibanaWelcomeLogo" />
+          <div className="kbnLoaderWrap">
+            {logo}
+            <div
+              className="kbnWelcomeText"
+              data-error-message={i18n('core.ui.welcomeErrorMessage', {
+                defaultMessage:
+                  'Elastic Kibana did not load properly. Check the server output for more information.',
+              })}
+            >
+              {i18n('core.ui.welcomeMessage', { defaultMessage: 'Loading Elastic Kibana' })}
             </div>
-          </div>
-
-          <div
-            className="kibanaWelcomeText"
-            data-error-message={i18n('core.ui.welcomeErrorMessage', {
-              defaultMessage:
-                'Kibana did not load properly. Check the server output for more information.',
-            })}
-          >
-            {i18n('core.ui.welcomeMessage', { defaultMessage: 'Loading Kibana' })}
+            <div className="kbnProgress" />
           </div>
         </div>
 
-        <div
-          className="kibanaWelcomeView"
-          id="kbn_legacy_browser_error"
-          style={{ display: 'none' }}
-        >
-          <div className="kibanaLoaderWrap">
-            <div className="kibanaWelcomeLogoCircle">
-              <div className="kibanaWelcomeLogo" />
-            </div>
-          </div>
+        <div className="kbnWelcomeView" id="kbn_legacy_browser_error" style={{ display: 'none' }}>
+          {logo}
 
-          <h2 className="kibanaWelcomeTitle">
+          <h2 className="kbnWelcomeTitle">
             {i18n('core.ui.legacyBrowserTitle', {
               defaultMessage: 'Please upgrade your browser',
             })}
           </h2>
-          <div className="kibanaWelcomeText">
+          <div className="kbnWelcomeText">
             {i18n('core.ui.legacyBrowserMessage', {
               defaultMessage:
                 'This Kibana installation has strict security requirements enabled that your current browser does not meet.',

diff --git a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -233,10 +233,7 @@ class TutorialDirectoryUi extends React.Component {
         <EuiPageBody>
           <EuiTitle size="l">
             <h1>
-              <FormattedMessage
-                id="home.tutorial.addDataToKibanaTitle"
-                defaultMessage="Add Data to Kibana"
-              />
+              <FormattedMessage id="home.tutorial.addDataToKibanaTitle" defaultMessage="Add data" />
             </h1>
           </EuiTitle>
 

diff --git a/src/plugins/home/public/application/components/welcome.tsx b/src/plugins/home/public/application/components/welcome.tsx
@@ -137,11 +137,14 @@ export class Welcome extends React.Component<Props> {
             <div className="homWelcome__content eui-textCenter">
               <EuiSpacer size="xl" />
               <span className="homWelcome__logo">
-                <EuiIcon type="logoKibana" size="xxl" />
+                <EuiIcon type="logoElastic" size="xxl" />
               </span>
               <EuiTitle size="l" className="homWelcome__title">
                 <h1>
-                  <FormattedMessage id="home.welcomeTitle" defaultMessage="Welcome to Kibana" />
+                  <FormattedMessage
+                    id="home.welcomeTitle"
+                    defaultMessage="Welcome to Elastic Kibana"
+                  />
                 </h1>
               </EuiTitle>
               <EuiText size="s" color="subdued" className="homWelcome__subtitle">