From 32dd3730fa70acdb2e37918861c32537ffd2fc7e Mon Sep 17 00:00:00 2001 From: Jorge Sanz Date: Tue, 27 Aug 2024 11:06:15 +0200 Subject: [PATCH] [Maps] Fix text readability on map scale, attribution, and coordinate controls (#189639) ## Summary Fixes #128783 This PR fixes the visualization of the texts in Maps scale bar, attribution, and coordinate controls with a dark background. ## Context While checking on the scale bar component of the map I saw this SCSS mixin that seemed to be broken. Originally I thought on fixing the shadow but the readability of the text is not great for dark background (see 7f2a698f4401c9b22f5c526ad8cfaa7839e30282)
Adding a shadow | before | after | | :--:| :--:| |![2024-07-31_16-17](https://github.com/user-attachments/assets/23239b0d-826e-482e-ac67-fe7faa50d696) | ![2024-07-31_16-18](https://github.com/user-attachments/assets/dffe0873-86dd-46b3-877e-ff4f5ef92c32) |
So I decided to propose to fix this by adding a background as is usual in other platforms. ![image](https://github.com/user-attachments/assets/7a7d0d11-1cf6-4961-b872-a5247c930363) ![image](https://github.com/user-attachments/assets/2c3d893b-f380-4724-9ad5-93adb6ec9fb6) ![image](https://github.com/user-attachments/assets/1a9becbc-40b1-4631-8360-f2a1bfafc9c2) --- .../mb_map/scale_control/_index.scss | 5 +++-- .../right_side_controls/_mixins.scss | 10 ++++------ .../attribution_control/_attribution_control.scss | 1 - 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/scale_control/_index.scss b/x-pack/plugins/maps/public/connected_components/mb_map/scale_control/_index.scss index 264dfe5e24843..28da88491f1cc 100644 --- a/x-pack/plugins/maps/public/connected_components/mb_map/scale_control/_index.scss +++ b/x-pack/plugins/maps/public/connected_components/mb_map/scale_control/_index.scss @@ -5,9 +5,10 @@ bottom: $euiSizeM; pointer-events: none; color: $euiTextColor; - border-left: 2px solid $euiTextColor; - border-bottom: 2px solid $euiTextColor; + border-left: 2px solid rgba($euiTextColor, .6); + border-bottom: 2px solid rgba($euiTextColor, .6); text-align: right; + @include mapOverlayIsTextOnly; } .mapScaleControlFullScreen { diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/_mixins.scss b/x-pack/plugins/maps/public/connected_components/right_side_controls/_mixins.scss index 97557f1312e86..640545c065418 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/_mixins.scss +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/_mixins.scss @@ -1,8 +1,6 @@ @mixin mapOverlayIsTextOnly { - text-shadow: - 0 0 2px $euiColorEmptyShade, - 0 0 1px $euiColorEmptyShade, - 0 0 1px $euiColorEmptyShade, - 0 0 1px $euiColorEmptyShade, - 0 0 1px $euiColorEmptyShade 0 0 1px $euiColorEmptyShade 0 0 1px $euiColorEmptyShade; + background-color: $euiPageBackgroundColor; + + padding-left: $euiSizeXS; + padding-right: $euiSizeXS; } diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/attribution_control/_attribution_control.scss b/x-pack/plugins/maps/public/connected_components/right_side_controls/attribution_control/_attribution_control.scss index e319535b4a45c..51c82fd7aa443 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/attribution_control/_attribution_control.scss +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/attribution_control/_attribution_control.scss @@ -2,7 +2,6 @@ @include mapOverlayIsTextOnly; @include euiTextBreakWord; pointer-events: all; - padding-left: $euiSizeM; } .mapAttributionControl__fullScreen {