Branding fixes for dashboard, loader and space selector (#60073)

src/core/public/chrome/ui/_loading_indicator.scss

@@ -22,29 +22,34 @@ $kbnLoadingIndicatorColor2: tint($euiColorAccent, 60%);
   }
 }
 
-  .kbnLoadingIndicator__bar {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    z-index: $euiZLevel1 + 1;
-    visibility: visible;
-    display: block;
-    animation: kbn-animate-loading-indicator 2s linear infinite;
-    background-color: $kbnLoadingIndicatorColor2;
-    background-image: linear-gradient(to right,
-      $kbnLoadingIndicatorColor1 0%,
-      $kbnLoadingIndicatorColor1 50%,
-      $kbnLoadingIndicatorColor2 50%,
-      $kbnLoadingIndicatorColor2 100%
-      );
-    background-repeat: repeat-x;
-    background-size: $kbnLoadingIndicatorBackgroundSize $kbnLoadingIndicatorBackgroundSize;
-    width: 200%;
-  }
+.kbnLoadingIndicator__bar {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: $euiZLevel1 + 1;
+  visibility: visible;
+  display: block;
+  animation: kbn-animate-loading-indicator 2s linear infinite;
+  background-color: $kbnLoadingIndicatorColor2;
+  background-image: linear-gradient(
+    to right,
+    $kbnLoadingIndicatorColor1 0%,
+    $kbnLoadingIndicatorColor1 50%,
+    $kbnLoadingIndicatorColor2 50%,
+    $kbnLoadingIndicatorColor2 100%
+  );
+  background-repeat: repeat-x;
+  background-size: $kbnLoadingIndicatorBackgroundSize $kbnLoadingIndicatorBackgroundSize;
+  width: 200%;
+}
 
-  @keyframes kbn-animate-loading-indicator {
-    from { transform: translateX(0); }
-    to { transform: translateX(-$kbnLoadingIndicatorBackgroundSize); }
+@keyframes kbn-animate-loading-indicator {
+  from {
+    transform: translateX(0);
   }
+  to {
+    transform: translateX(-$kbnLoadingIndicatorBackgroundSize);
+  }
+}

src/core/server/rendering/views/styles.tsx

@@ -53,7 +53,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
 
           .kbnWelcomeView {
             line-height: 1.5;
-            background-color: #FFF;
+            background-color: ${darkMode ? '#1D1E24' : '#FFF'};
             height: 100%;
             display: -webkit-box;
             display: -webkit-flex;
@@ -97,6 +97,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
             line-height: 40px !important;
             height: 40px !important;
             color: #98a2b3;
+            color: ${darkMode ? '#98A2B3' : '#69707D'};
           }
 
           .kbnLoaderWrap {
@@ -128,7 +129,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
             width: 32px;
             height: 4px;
             overflow: hidden;
-            background-color: #D3DAE6;
+            background-color: ${darkMode ? '#25262E' : '#F5F7FA'};
             line-height: 1;
           }
 
@@ -142,7 +143,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
             left: 0;
             transform: scaleX(0) translateX(0%);
             animation: kbnProgress 1s cubic-bezier(.694, .0482, .335, 1) infinite;
-            background-color: #006DE4;
+            background-color: ${darkMode ? '#1BA9F5' : '#006DE4'};
           }
 
           @keyframes kbnProgress {

src/legacy/ui/public/exit_full_screen/__snapshots__/exit_full_screen_button.test.js.snap

@@ -12,19 +12,45 @@ exports[`is rendered 1`] = `
     <button
       aria-label="Exit full screen mode"
       class="dshExitFullScreenButton"
+      data-test-subj="exitFullScreenModeLogo"
     >
       <span
-        class="dshExitFullScreenButton__logo"
-        data-test-subj="exitFullScreenModeLogo"
-      />
-      <span
-        class="dshExitFullScreenButton__text"
-        data-test-subj="exitFullScreenModeText"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
       >
-        Exit full screen
         <div
-          data-euiicon-type="arrowLeft"
-        />
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            data-euiicon-type="logoElastic"
+          />
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+          data-test-subj="exitFullScreenModeText"
+        >
+          <div>
+            <p
+              class="euiTitle euiTitle--xxxsmall dshExitFullScreenButton__title"
+            >
+              Elastic Kibana
+            </p>
+            <div
+              class="euiText euiText--extraSmall dshExitFullScreenButton__text"
+            >
+              <p>
+                Exit full screen
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="dshExitFullScreenButton__icon"
+            data-euiicon-type="fullScreen"
+          />
+        </div>
       </span>
     </button>
   </div>

src/plugins/kibana_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap

@@ -17,27 +17,88 @@ exports[`is rendered 1`] = `
       <button
         aria-label="Exit full screen mode"
         className="dshExitFullScreenButton"
+        data-test-subj="exitFullScreenModeLogo"
         onClick={[Function]}
       >
-        <span
-          className="dshExitFullScreenButton__logo"
-          data-test-subj="exitFullScreenModeLogo"
-        />
-        <span
-          className="dshExitFullScreenButton__text"
-          data-test-subj="exitFullScreenModeText"
+        <EuiFlexGroup
+          alignItems="center"
+          component="span"
+          gutterSize="s"
+          responsive={false}
         >
-          Exit full screen
-          <EuiIcon
-            size="s"
-            type="arrowLeft"
+          <span
+            className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
           >
-            <div
-              data-euiicon-type="arrowLeft"
-              size="s"
-            />
-          </EuiIcon>
-        </span>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <EuiIcon
+                  size="l"
+                  type="logoElastic"
+                >
+                  <div
+                    data-euiicon-type="logoElastic"
+                    size="l"
+                  />
+                </EuiIcon>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              data-test-subj="exitFullScreenModeText"
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+                data-test-subj="exitFullScreenModeText"
+              >
+                <div>
+                  <EuiTitle
+                    className="dshExitFullScreenButton__title"
+                    size="xxxs"
+                  >
+                    <p
+                      className="euiTitle euiTitle--xxxsmall dshExitFullScreenButton__title"
+                    >
+                      Elastic Kibana
+                    </p>
+                  </EuiTitle>
+                  <EuiText
+                    className="dshExitFullScreenButton__text"
+                    size="xs"
+                  >
+                    <div
+                      className="euiText euiText--extraSmall dshExitFullScreenButton__text"
+                    >
+                      <p>
+                        Exit full screen
+                      </p>
+                    </div>
+                  </EuiText>
+                </div>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <EuiIcon
+                  className="dshExitFullScreenButton__icon"
+                  type="fullScreen"
+                >
+                  <div
+                    className="dshExitFullScreenButton__icon"
+                    data-euiicon-type="fullScreen"
+                  />
+                </EuiIcon>
+              </div>
+            </EuiFlexItem>
+          </span>
+        </EuiFlexGroup>
       </button>
     </div>
   </div>

src/plugins/kibana_react/public/exit_full_screen_button/_exit_full_screen_button.scss

@@ -4,66 +4,40 @@
  */
 
 .dshExitFullScreenButton {
-  height: $euiSizeXXL;
-  left: 0;
-  bottom: 0;
+  @include euiBottomShadow;
+
+  left: $euiSizeS;
+  bottom: $euiSizeS;
   position: fixed;
   display: block;
   padding: 0;
   border: none;
   background: none;
   z-index: 5;
+  background: $euiColorFullShade;
+  padding: $euiSizeXS;
+  border-radius: $euiBorderRadius;
+  text-align: left;
 
-  &:hover,
-  &:focus {
-    transition: all $euiAnimSpeedExtraSlow $euiAnimSlightResistance;
-    z-index: 10 !important; /* 1 */
+  &:hover {
+    background: $euiColorFullShade;
 
-    .dshExitFullScreenButton__text {
-      transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
-      transform: translateX(-$euiSize);
+    .dshExitFullScreenButton__icon {
+      color: $euiColorEmptyShade;
     }
   }
 }
 
-.dshExitFullScreenButton__logo {
-  display: block;
-  // Just darken the background for all themes because the logo is always white
-  background-color: shade($euiColorPrimary, 25%);
-  height: $euiSizeXXL;
-
-  // These numbers are very specific to the Kibana logo size
-  width: 92px;
-  background-image: url('ui/assets/images/kibana.svg');
-  background-position: 8px 5px;
-  background-size: 72px 30px;
-  background-repeat: no-repeat;
-
-  z-index: $euiZLevel1;
+.dshExitFullScreenButton__title {
+  line-height: 1.2;
+  color: $euiColorEmptyShade;
 }
 
-/**
- * 1. Calc made to allow caret in text to peek out / animate.
- */
-
 .dshExitFullScreenButton__text {
-  background: $euiColorPrimary;
-  color: $euiColorEmptyShade;
-  line-height: $euiSizeXXL;
-  display: inline-block;
-  font-size: $euiFontSizeS;
-  height: $euiSizeXXL;
-  position: absolute;
-  left: calc(100% + #{$euiSize}); /* 1 */
-  top: 0px;
-  bottom: 0px;
-  white-space: nowrap;
-  padding: 0px $euiSizeXS 0px $euiSizeM;
-  transition: all .2s ease;
-  transform: translateX(-100%);
-  z-index: -1;
-  
-  .euiIcon {
-    margin-left: $euiSizeXS;
-  }
+  line-height: 1.2;
+  color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
+}
+
+.dshExitFullScreenButton__icon {
+  color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
 }

src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx

@@ -20,7 +20,7 @@
 import { i18n } from '@kbn/i18n';
 import React, { PureComponent } from 'react';
 import { EuiScreenReaderOnly, keyCodes } from '@elastic/eui';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
 export interface ExitFullScreenButtonProps {
   onExitFullScreenMode: () => void;
@@ -61,17 +61,40 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
             )}
             className="dshExitFullScreenButton"
             onClick={this.props.onExitFullScreenMode}
+            data-test-subj="exitFullScreenModeLogo"
           >
-            <span
-              className="dshExitFullScreenButton__logo"
-              data-test-subj="exitFullScreenModeLogo"
-            />
-            <span className="dshExitFullScreenButton__text" data-test-subj="exitFullScreenModeText">
-              {i18n.translate('kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel', {
-                defaultMessage: 'Exit full screen',
-              })}
-              <EuiIcon type="arrowLeft" size="s" />
-            </span>
+            <EuiFlexGroup component="span" responsive={false} alignItems="center" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiIcon type="logoElastic" size="l" />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false} data-test-subj="exitFullScreenModeText">
+                <div>
+                  <EuiTitle size="xxxs" className="dshExitFullScreenButton__title">
+                    <p>
+                      {i18n.translate(
+                        'kibana-react.exitFullScreenButton.exitFullScreenModeButtonTitle',
+                        {
+                          defaultMessage: 'Elastic Kibana',
+                        }
+                      )}
+                    </p>
+                  </EuiTitle>
+                  <EuiText size="xs" className="dshExitFullScreenButton__text">
+                    <p>
+                      {i18n.translate(
+                        'kibana-react.exitFullScreenButton.exitFullScreenModeButtonText',
+                        {
+                          defaultMessage: 'Exit full screen',
+                        }
+                      )}
+                    </p>
+                  </EuiText>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiIcon type="fullScreen" className="dshExitFullScreenButton__icon" />
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </button>
         </div>
       </div>

x-pack/plugins/spaces/public/space_selector/__snapshots__/space_selector.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`it renders without crashing 1`] = `
       >
         <EuiIcon
           size="xxl"
-          type="logoKibana"
+          type="logoElastic"
         />
       </span>
       <EuiTitle

x-pack/plugins/spaces/public/space_selector/space_selector.tsx

@@ -95,7 +95,7 @@ export class SpaceSelector extends Component<Props, State> {
           <EuiPageHeader className="spcSpaceSelector__heading">
             <EuiSpacer size="xxl" />
             <span className="spcSpaceSelector__logo">
-              <EuiIcon size="xxl" type={`logoKibana`} />
+              <EuiIcon size="xxl" type={`logoElastic`} />
             </span>
 
             <EuiTitle size="l">

x-pack/plugins/translations/translations/ja-JP.json

@@ -2380,7 +2380,6 @@
     "visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "凡例を切り替える",
     "visTypeVislib.vislib.legend.toggleLegendButtonTitle": "凡例を切り替える",
     "visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}、トグルオプション",
-    "kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "全画面を終了",
     "kibana-react.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを終了します。",
     "newsfeed.emptyPrompt.noNewsText": "Kibanaインスタンスがインターネットにアクセスできない場合、管理者にこの機能を無効にするように依頼してください。そうでない場合は、ニュースを取り込み続けます。",
     "newsfeed.emptyPrompt.noNewsTitle": "ニュースがない場合",

x-pack/plugins/translations/translations/zh-CN.json

@@ -2381,7 +2381,6 @@
     "visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "切换图例",
     "visTypeVislib.vislib.legend.toggleLegendButtonTitle": "切换图例",
     "visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}切换选项",
-    "kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "退出全屏",
     "kibana-react.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下，按 ESC 键可退出。",
     "newsfeed.emptyPrompt.noNewsText": "如果您的 Kibana 实例没有 Internet 连接，请让您的管理员禁用此功能。否则，我们将不断尝试获取新闻。",
     "newsfeed.emptyPrompt.noNewsTitle": "无新闻？",