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

)
elastic · Mar 19, 2020 · 6768356 · 6768356
1 parent 053da12
commit 6768356
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 115 deletions.
diff --git a/src/core/public/chrome/ui/_loading_indicator.scss b/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);
+  }
+}
diff --git a/src/core/server/rendering/views/styles.tsx b/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 {

diff --git a/src/legacy/ui/public/exit_full_screen/__snapshots__/exit_full_screen_button.test.js.snap b/src/legacy/ui/public/exit_full_screen/__snapshots__/exit_full_screen_button.test.js.snap
diff --git a/..._react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap b/..._react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap
diff --git a/src/plugins/kibana_react/public/exit_full_screen_button/_exit_full_screen_button.scss b/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);
 }