SONAR-18776 Fixing font color and Esc handler

3 files changed, 45 insertions, 36 deletions

diff --git a/server/sonar-web/design-system/src/components/TopBar.tsx b/server/sonar-web/design-system/src/components/TopBar.tsx
index a35bd832632..f808c2d17ad 100644
--- a/server/sonar-web/design-system/src/components/TopBar.tsx
+++ b/server/sonar-web/design-system/src/components/TopBar.tsx
@@ -45,6 +45,6 @@ const BaseStyle = styled.nav`
   ${tw`sw-font-sans`}
   ${tw`sw-text-sm`}
 
-  background-color: ${themeColor('backgroundPrimary')};
-  color: ${themeContrast('backgroundPrimary')};
+  background-color: ${themeColor('navbar')};
+  color: ${themeContrast('navbar')};
 `;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx
index f706073a9de..56d22719501 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { TextMuted } from 'design-system';
 import * as React from 'react';
 import HomePageSelect from '../../../../components/controls/HomePageSelect';
 import { isBranch, isPullRequest } from '../../../../helpers/branch-like';
@@ -71,9 +72,10 @@ export function HeaderMeta(props: HeaderMetaProps) {
       />
       {branchLike && <CurrentBranchLikeMergeInformation currentBranchLike={branchLike} />}
       {component.version !== undefined && isABranch && (
-        <span className="sw-ml-4 sw-whitespace-nowrap">
-          {translateWithParameters('version_x', component.version)}
-        </span>
+        <TextMuted
+          text={translateWithParameters('version_x', component.version)}
+          className="sw-ml-4 sw-whitespace-nowrap"
+        />
       )}
       {isLoggedIn(currentUser) && currentPage !== undefined && !isPullRequest(branchLike) && (
         <HomePageSelect className="sw-ml-2" currentPage={currentPage} />
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx
index 65d4741665d..c163935187b 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx
@@ -19,6 +19,7 @@
  */
 import { ButtonSecondary, PopupPlacement, PopupZLevel, PortalPopup } from 'design-system';
 import * as React from 'react';
+import EscKeydownHandler from '../../../../../components/controls/EscKeydownHandler';
 import OutsideClickHandler from '../../../../../components/controls/OutsideClickHandler';
 import { AlmKeys, ProjectAlmBindingResponse } from '../../../../../types/alm-settings';
 import { BranchLike } from '../../../../../types/branch-like';
@@ -64,42 +65,48 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) {
 
   return (
     <div className="sw-flex sw-items-center sw-ml-2 it__branch-like-navigation-toggler-container">
-      <OutsideClickHandler
-        onClickOutside={() => {
+      <EscKeydownHandler
+        onKeydown={() => {
           setIsMenuOpen(false);
         }}
       >
-        <PortalPopup
-          allowResizing={true}
-          overlay={
-            isMenuOpen && (
-              <Menu
-                branchLikes={branchLikes}
-                canAdminComponent={canAdminComponent}
-                component={component}
-                currentBranchLike={currentBranchLike}
-                onClose={() => {
-                  setIsMenuOpen(false);
-                }}
-              />
-            )
-          }
-          placement={PopupPlacement.BottomLeft}
-          zLevel={PopupZLevel.Global}
+        <OutsideClickHandler
+          onClickOutside={() => {
+            setIsMenuOpen(false);
+          }}
         >
-          <ButtonSecondary
-            className="sw-max-w-abs-350"
-            onClick={() => {
-              setIsMenuOpen(!isMenuOpen);
-            }}
-            disabled={!isMenuEnabled}
-            aria-expanded={isMenuOpen}
-            aria-haspopup="menu"
+          <PortalPopup
+            allowResizing={true}
+            overlay={
+              isMenuOpen && (
+                <Menu
+                  branchLikes={branchLikes}
+                  canAdminComponent={canAdminComponent}
+                  component={component}
+                  currentBranchLike={currentBranchLike}
+                  onClose={() => {
+                    setIsMenuOpen(false);
+                  }}
+                />
+              )
+            }
+            placement={PopupPlacement.BottomLeft}
+            zLevel={PopupZLevel.Global}
           >
-            {currentBranchLikeElement}
-          </ButtonSecondary>
-        </PortalPopup>
-      </OutsideClickHandler>
+            <ButtonSecondary
+              className="sw-max-w-abs-350"
+              onClick={() => {
+                setIsMenuOpen(!isMenuOpen);
+              }}
+              disabled={!isMenuEnabled}
+              aria-expanded={isMenuOpen}
+              aria-haspopup="menu"
+            >
+              {currentBranchLikeElement}
+            </ButtonSecondary>
+          </PortalPopup>
+        </OutsideClickHandler>
+      </EscKeydownHandler>
 
       <div className="sw-ml-2">
         <BranchHelpTooltip