mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Design] Branding changes in Elastic to focus more towards the Elastic brand (#58160)
Elastic Kibana branding.
This commit is contained in:
dave.snider@gmail.com
GitHub
parent
0f71886f83
commit
8c0da24e6c
8 changed files with 137 additions and 127 deletions
|
|
@ -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;
|
||||
.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;
|
||||
}
|
||||
|
||||
.kbnLoaderWrap svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: auto;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.kbnLoader path {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.kbnProgress {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: 40px;
|
||||
width: 32px;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
background-color: #D3DAE6;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.kibanaLoaderWrap + * {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.kibanaLoader {
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
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;
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -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.',
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ exports[`should render a Welcome screen with no telemetry disclaimer 1`] = `
|
|||
>
|
||||
<EuiIcon
|
||||
size="xxl"
|
||||
type="logoKibana"
|
||||
type="logoElastic"
|
||||
/>
|
||||
</span>
|
||||
<EuiTitle
|
||||
|
|
@ -28,7 +28,7 @@ exports[`should render a Welcome screen with no telemetry disclaimer 1`] = `
|
|||
>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
defaultMessage="Welcome to Kibana"
|
||||
defaultMessage="Welcome to Elastic Kibana"
|
||||
id="home.welcomeTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
|
|
@ -93,7 +93,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer 1`] = `
|
|||
>
|
||||
<EuiIcon
|
||||
size="xxl"
|
||||
type="logoKibana"
|
||||
type="logoElastic"
|
||||
/>
|
||||
</span>
|
||||
<EuiTitle
|
||||
|
|
@ -102,7 +102,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer 1`] = `
|
|||
>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
defaultMessage="Welcome to Kibana"
|
||||
defaultMessage="Welcome to Elastic Kibana"
|
||||
id="home.welcomeTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
|
|
@ -205,7 +205,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
|
|||
>
|
||||
<EuiIcon
|
||||
size="xxl"
|
||||
type="logoKibana"
|
||||
type="logoElastic"
|
||||
/>
|
||||
</span>
|
||||
<EuiTitle
|
||||
|
|
@ -214,7 +214,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
|
|||
>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
defaultMessage="Welcome to Kibana"
|
||||
defaultMessage="Welcome to Elastic Kibana"
|
||||
id="home.welcomeTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
|
|
@ -317,7 +317,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
|
|||
>
|
||||
<EuiIcon
|
||||
size="xxl"
|
||||
type="logoKibana"
|
||||
type="logoElastic"
|
||||
/>
|
||||
</span>
|
||||
<EuiTitle
|
||||
|
|
@ -326,7 +326,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
|
|||
>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
defaultMessage="Welcome to Kibana"
|
||||
defaultMessage="Welcome to Elastic Kibana"
|
||||
id="home.welcomeTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
*/
|
||||
import React, { useCallback, useContext } from 'react';
|
||||
import {
|
||||
EuiIcon,
|
||||
EuiFlyout,
|
||||
EuiFlyoutBody,
|
||||
EuiFlyoutHeader,
|
||||
|
|
@ -53,7 +52,10 @@ export const NewsfeedFlyout = () => {
|
|||
<EuiFlyoutHeader hasBorder>
|
||||
<EuiTitle size="s">
|
||||
<h2 id="flyoutSmallTitle">
|
||||
<FormattedMessage id="newsfeed.flyoutList.whatsNewTitle" defaultMessage="What's new" />
|
||||
<FormattedMessage
|
||||
id="newsfeed.flyoutList.whatsNewTitle"
|
||||
defaultMessage="What's new at Elastic"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlyoutHeader>
|
||||
|
|
@ -69,13 +71,12 @@ export const NewsfeedFlyout = () => {
|
|||
text={item.description}
|
||||
data-test-subj="newsHeadAlert"
|
||||
action={
|
||||
<EuiLink target="_blank" href={item.linkUrl}>
|
||||
<EuiLink target="_blank" href={item.linkUrl} external>
|
||||
{item.linkText}
|
||||
<EuiIcon type="popout" size="s" />
|
||||
</EuiLink>
|
||||
}
|
||||
date={item.publishOn.format('DD MMMM YYYY')}
|
||||
badge={<EuiBadge color="hollow">{item.badge}</EuiBadge>}
|
||||
badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
|
||||
/>
|
||||
);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -132,16 +132,16 @@ exports[`LoginPage page renders as expected 1`] = `
|
|||
>
|
||||
<EuiIcon
|
||||
size="xxl"
|
||||
type="logoKibana"
|
||||
type="logoElastic"
|
||||
/>
|
||||
</span>
|
||||
<EuiTitle
|
||||
className="loginWelcome__title"
|
||||
size="l"
|
||||
size="m"
|
||||
>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
defaultMessage="Welcome to Kibana"
|
||||
defaultMessage="Welcome to Elastic Kibana"
|
||||
id="xpack.security.loginPage.welcomeTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -88,13 +88,13 @@ export class LoginPage extends Component<Props, State> {
|
|||
<div className={contentHeaderClasses}>
|
||||
<EuiSpacer size="xxl" />
|
||||
<span className="loginWelcome__logo">
|
||||
<EuiIcon type="logoKibana" size="xxl" />
|
||||
<EuiIcon type="logoElastic" size="xxl" />
|
||||
</span>
|
||||
<EuiTitle size="l" className="loginWelcome__title">
|
||||
<EuiTitle size="m" className="loginWelcome__title">
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id="xpack.security.loginPage.welcomeTitle"
|
||||
defaultMessage="Welcome to Kibana"
|
||||
defaultMessage="Welcome to Elastic Kibana"
|
||||
/>
|
||||
</h1>
|
||||
</EuiTitle>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue