Branding fixes for dashboard, loader and space selector

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/plugins/kibana_react/public/exit_full_screen_button/_exit_full_screen_button.scss

@@ -4,66 +4,21 @@
  */
 
 .dshExitFullScreenButton {
-  height: $euiSizeXXL;
-  left: 0;
-  bottom: 0;
+  @include euiBottomShadow;
+
+  left: $euiSize;
+  bottom: $euiSize;
   position: fixed;
   display: block;
   padding: 0;
   border: none;
   background: none;
   z-index: 5;
-
-  &:hover,
-  &:focus {
-    transition: all $euiAnimSpeedExtraSlow $euiAnimSlightResistance;
-    z-index: 10 !important; /* 1 */
-
-    .dshExitFullScreenButton__text {
-      transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
-      transform: translateX(-$euiSize);
-    }
-  }
+  background: $euiColorEmptyShade;
+  padding: $euiSizeS;
+  border-radius: $euiBorderRadius;
+  text-align: left;
 }
-
-.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;
-}
-
 /**
  * 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;
-  }
-}

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,24 @@ 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="xl" />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false} data-test-subj="exitFullScreenModeText">
+                <EuiText color="subdued" size="xs">
+                  <p>Powered by</p>
+                </EuiText>
+                <EuiTitle size="xxs">
+                  <p>Elastic Kibana</p>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiIcon type="cross" />
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </button>
         </div>
       </div>

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">