From a09da6321d44e4553d6fbe13a9cd8bde7a073efa Mon Sep 17 00:00:00 2001 From: Tony Anziano Date: Sun, 8 Dec 2019 12:12:00 -0800 Subject: [PATCH] Fixed color contrast issues with links and prev/next diff buttons. --- CHANGELOG.md | 1 + .../emulator/parts/inspector/inspector.scss | 20 +++++++++++-------- .../botNotOpenExplorer.scss | 2 +- .../resourceExplorer/resourceExplorer.scss | 2 +- .../servicesExplorer/servicesExplorer.scss | 2 +- .../app/client/src/ui/styles/themes/dark.css | 4 +++- .../src/ui/styles/themes/high-contrast.css | 2 ++ .../app/client/src/ui/styles/themes/light.css | 2 ++ 8 files changed, 23 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c300abb3..a73a95a53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [2010](https://github.com/microsoft/BotFramework-Emulator/pull/2010) - [2012](https://github.com/microsoft/BotFramework-Emulator/pull/2012) - [2017](https://github.com/microsoft/BotFramework-Emulator/pull/2017) + - [2019](https://github.com/microsoft/BotFramework-Emulator/pull/2019) - [main] Increased ngrok spawn timeout to 15 seconds to be more forgiving to slower networks in PR [1998](https://github.com/microsoft/BotFramework-Emulator/pull/1998) diff --git a/packages/app/client/src/ui/editor/emulator/parts/inspector/inspector.scss b/packages/app/client/src/ui/editor/emulator/parts/inspector/inspector.scss index aacc00812..54545d062 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/inspector/inspector.scss +++ b/packages/app/client/src/ui/editor/emulator/parts/inspector/inspector.scss @@ -65,23 +65,27 @@ } .left-arrow { - background-image: url('../../../../media/ic_next.svg'); - background-position: 50% 50%; + background-color: var(--accessory-button-icon-color); + -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%; + -webkit-mask-size: 16px; transform: rotate(180deg); } .left-arrow-selected { - background-image: url('../../../../media/ic_next.svg'); - background-position: 50% 50%; + background-color: var(--accessory-button-icon-color); + -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%; + -webkit-mask-size: 16px; transform: rotate(180deg); } .right-arrow { - background-image: url('../../../../media/ic_next.svg'); - background-position: 50% 50%; + background-color: var(--accessory-button-icon-color); + -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%; + -webkit-mask-size: 16px; } .right-arrow-selected { - background-image: url('../../../../media/ic_next.svg'); - background-position: 50% 50%; + background-color: var(--accessory-button-icon-color); + -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%; + -webkit-mask-size: 16px; } diff --git a/packages/app/client/src/ui/shell/explorer/botNotOpenExplorer/botNotOpenExplorer.scss b/packages/app/client/src/ui/shell/explorer/botNotOpenExplorer/botNotOpenExplorer.scss index 65d007072..5a5c760d7 100644 --- a/packages/app/client/src/ui/shell/explorer/botNotOpenExplorer/botNotOpenExplorer.scss +++ b/packages/app/client/src/ui/shell/explorer/botNotOpenExplorer/botNotOpenExplorer.scss @@ -43,7 +43,7 @@ } .explorer-link { - color: var(--dialog-link-color); + color: var(--explorer-link-color); } .explorer-empty-state { diff --git a/packages/app/client/src/ui/shell/explorer/resourceExplorer/resourceExplorer.scss b/packages/app/client/src/ui/shell/explorer/resourceExplorer/resourceExplorer.scss index 565d7a174..02b6356f0 100644 --- a/packages/app/client/src/ui/shell/explorer/resourceExplorer/resourceExplorer.scss +++ b/packages/app/client/src/ui/shell/explorer/resourceExplorer/resourceExplorer.scss @@ -15,7 +15,7 @@ ul > li > input[type="text"] { } .explorer-link { - color: var(--dialog-link-color); + color: var(--explorer-link-color); text-decoration: none; line-height: 20px; } diff --git a/packages/app/client/src/ui/shell/explorer/servicesExplorer/servicesExplorer.scss b/packages/app/client/src/ui/shell/explorer/servicesExplorer/servicesExplorer.scss index 40032a0f4..0710eab9c 100644 --- a/packages/app/client/src/ui/shell/explorer/servicesExplorer/servicesExplorer.scss +++ b/packages/app/client/src/ui/shell/explorer/servicesExplorer/servicesExplorer.scss @@ -39,7 +39,7 @@ ul > li > svg { } .explorer-link { - color: var(--dialog-link-color); + color: var(--explorer-link-color); text-decoration: none; line-height: 20px; } diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css index 478e0c108..285e879c2 100644 --- a/packages/app/client/src/ui/styles/themes/dark.css +++ b/packages/app/client/src/ui/styles/themes/dark.css @@ -164,6 +164,7 @@ html { --explorer-panel-group-title-color: var(--neutral-4); --explorer-panel-group-border: 1px solid transparent; --explorer-panel-empty-message-color: var(--neutral-5); + --explorer-link-color: #40A6FF; /* Explorer Bar */ --explorer-bar-header-bg: var(--neutral-14); @@ -220,7 +221,7 @@ html { --status-bar-color: #FFFFFF; /* Links */ - --link-color: #3062D6; + --link-color: #3794FF; --link-color-disabled: #C8C8C8; --inspector-link-color: #75BEFF; @@ -249,6 +250,7 @@ html { /* accessory buttons */ --accessory-button-color: var(--neutral-5); + --accessory-button-icon-color: var(--link-color); /* Auto Complete */ --auto-complete-results-opacity: 0.9; diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css index 11fdb75fe..696ea0b60 100644 --- a/packages/app/client/src/ui/styles/themes/high-contrast.css +++ b/packages/app/client/src/ui/styles/themes/high-contrast.css @@ -163,6 +163,7 @@ html { --explorer-panel-group-title-color: var(--neutral-1); --explorer-panel-group-border: 1px solid #72C3DF; --explorer-panel-empty-message-color: var(--neutral-4); + --explorer-link-color: var(--link-color); /* Explorer Bar */ --explorer-bar-header-bg: var(--neutral-16); @@ -248,6 +249,7 @@ html { /* Inspector accessory buttons */ --accessory-button-color: var(--neutral-5); + --accessory-button-icon-color: #72C3DF; /* Auto Complete */ --auto-complete-results-opacity: 1; diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css index df5e22db0..ce86df82b 100644 --- a/packages/app/client/src/ui/styles/themes/light.css +++ b/packages/app/client/src/ui/styles/themes/light.css @@ -163,6 +163,7 @@ html { --explorer-panel-group-border: 1px solid transparent; --explorer-panel-empty-message-color: var(--neutral-15); --service-panescrollbar-color: var(--neutral-13); + --explorer-link-color: var(--dialog-link-color); /* Explorer Bar */ --explorer-bar-header-bg: var(--neutral-3); @@ -249,6 +250,7 @@ html { /* Inspector accessory buttons */ --accessory-button-color: var(--s-button-color); + --accessory-button-icon-color: var(--link-color); /* Auto Complete */ --auto-complete-results-opacity: 0.9;