feedback, tests and internationalization - a classic warren zevon track

elastic · Mar 18, 2020 · 58439ec · 58439ec
1 parent 78586cd
commit 58439ec
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 70 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/..._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
@@ -6,19 +6,38 @@
 .dshExitFullScreenButton {
   @include euiBottomShadow;
 
-  left: $euiSize;
-  bottom: $euiSize;
+  left: $euiSizeS;
+  bottom: $euiSizeS;
   position: fixed;
   display: block;
   padding: 0;
   border: none;
   background: none;
   z-index: 5;
-  background: $euiColorEmptyShade;
-  padding: $euiSizeS;
+  background: $euiColorFullShade;
+  padding: $euiSizeXS;
   border-radius: $euiBorderRadius;
   text-align: left;
+
+  &:hover {
+    background: $euiColorFullShade;
+
+    .dshExitFullScreenButton__icon {
+      color: $euiColorEmptyShade;
+    }
+  }
+}
+
+.dshExitFullScreenButton__title {
+  line-height: 1.2;
+  color: $euiColorEmptyShade;
+}
+
+.dshExitFullScreenButton__text {
+  line-height: 1.2;
+  color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
+}
+
+.dshExitFullScreenButton__icon {
+  color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
 }
-/**
- * 1. Calc made to allow caret in text to peek out / animate.
- */
diff --git a/src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx b/src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx
@@ -65,18 +65,34 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
           >
             <EuiFlexGroup component="span" responsive={false} alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiIcon type="logoElastic" size="xl" />
+                <EuiIcon type="logoElastic" size="l" />
               </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>
+                <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="cross" />
+                <EuiIcon type="fullScreen" className="dshExitFullScreenButton__icon" />
               </EuiFlexItem>
             </EuiFlexGroup>
           </button>

diff --git a/test/functional/screenshots/baseline/area_chart.png b/test/functional/screenshots/baseline/area_chart.png
diff --git a/test/functional/screenshots/baseline/tsvb_dashboard.png b/test/functional/screenshots/baseline/tsvb_dashboard.png