SONAR-8829 update the global navigation bar

8 files changed, 70 insertions, 41 deletions

diff --git a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
index 51c4336afde..4e5e35b7cce 100644
--- a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import GlobalFooterContainer from './GlobalFooterContainer';
+import * as theme from '../theme';
 import NavBar from '../../components/nav/NavBar';
 
 interface Props {
@@ -45,7 +46,7 @@ export default class SimpleContainer extends React.PureComponent<Props> {
     return (
       <div className="global-container">
         <div className="page-wrapper" id="container">
-          <NavBar className="navbar-global" height={30} />
+          <NavBar className="navbar-global" height={theme.globalNavHeightRaw} />
 
           <div id="bd" className="page-wrapper-simple">
             <div id="nonav" className="page-simple">
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
index c391bf81965..ac02282d585 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
@@ -5,16 +5,15 @@
 }
 
 .navbar-brand {
-  display: block;
-  margin-left: -10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  border: none;
-}
-
-.navbar-brand:hover,
-.navbar-brand:focus {
-  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--globalNavHeight);
+  margin-left: calc(-1 * (var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+  padding-top: 4px;
+  padding-left: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+  padding-right: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+  border-bottom: 4px solid transparent;
 }
 
 .navbar-login {
@@ -23,37 +22,46 @@
 }
 
 .navbar-avatar {
-  margin-right: -3px !important;
-  padding: 3px !important;
+  margin-right: calc(-1 * (var(--globalNavHeight) - var(--globalNavContentHeight)) / 2);
+  padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) !important;
+  border: none !important;
 }
 
 .navbar-help {
-  line-height: 16px !important;
-  padding: 7px !important;
+  height: var(--globalNavHeight);
+  padding: calc(var(--globalNavHeight) - var(--globalNavContentHeight)) 12px !important;
+  border-bottom: none !important;
   color: #fff !important;
 }
 
 .global-navbar-menu {
   display: flex;
   align-items: center;
+  height: var(--globalNavHeight);
 }
 
 .global-navbar-menu > li > a {
   display: block;
-  padding: 8px 10px;
-  line-height: 14px;
-  border: none;
+  height: var(--globalNavHeight);
+  padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) 10px;
+  line-height: var(--globalNavContentHeight);
+  border-bottom: 4px solid transparent;
+  box-sizing: border-box;
   color: #ccc;
   font-size: var(--smallFontSize);
   letter-spacing: 0.05em;
-  transition: none;
 }
 
+.navbar-brand:hover,
+.navbar-brand:focus,
 .global-navbar-menu > li > a.active,
 .global-navbar-menu > li > a:hover,
 .global-navbar-menu > li > a:focus {
-  background-color: var(--blue);
-  color: #fff;
+  background-color: #020202;
+}
+
+.global-navbar-menu > li > a.active {
+  border-bottom-color: #646464;
 }
 
 @media print {
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js
index 8823ecd0533..317077eb1af 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js
@@ -26,6 +26,7 @@ import GlobalNavExplore from './GlobalNavExplore';
 import GlobalNavUserContainer from './GlobalNavUserContainer';
 import Search from '../../search/Search';
 import GlobalHelp from '../../help/GlobalHelp';
+import * as theme from '../../../theme';
 import NavBar from '../../../../components/nav/NavBar';
 import Tooltip from '../../../../components/controls/Tooltip';
 import HelpIcon from '../../../../components/icons-components/HelpIcon';
@@ -107,13 +108,13 @@ class GlobalNav extends React.PureComponent {
 
   render() {
     return (
-      <NavBar className="navbar-global" id="global-navigation" height={30}>
+      <NavBar className="navbar-global" id="global-navigation" height={theme.globalNavHeightRaw}>
         <GlobalNavBranding />
 
         <GlobalNavMenu {...this.props} />
 
         <ul className="global-navbar-menu pull-right">
-          <Search appState={this.props.appState} currentUser={this.props.currentUser} />
+          <GlobalNavExplore location={this.props.location} onSonarCloud={this.props.onSonarCloud} />
           <li>
             <a className="navbar-help" onClick={this.handleHelpClick} href="#">
               {this.state.onboardingTutorialTooltip ? (
@@ -128,11 +129,10 @@ class GlobalNav extends React.PureComponent {
               )}
             </a>
           </li>
+          <Search appState={this.props.appState} currentUser={this.props.currentUser} />
           <GlobalNavUserContainer {...this.props} />
         </ul>
 
-        <GlobalNavExplore location={this.props.location} onSonarCloud={this.props.onSonarCloud} />
-
         {this.state.helpOpen && (
           <GlobalHelp
             currentUser={this.props.currentUser}
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx
index ea1495c0e1c..b20bd00ded6 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx
@@ -34,12 +34,10 @@ export default function GlobalNavExplore({ location, onSonarCloud }: Props) {
   const active = location.pathname.startsWith('explore');
 
   return (
-    <ul className="global-navbar-menu spacer-right pull-right">
-      <li>
-        <Link to="/explore/projects" className={active ? 'active' : undefined}>
-          {translate('explore')}
-        </Link>
-      </li>
-    </ul>
+    <li>
+      <Link to="/explore/projects" className={active ? 'active' : undefined}>
+        {translate('explore')}
+      </Link>
+    </li>
   );
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js
index cb70ab05709..3b577558541 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js
@@ -22,6 +22,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import { Link } from 'react-router';
+import * as theme from '../../../theme';
 import Avatar from '../../../../components/ui/Avatar';
 import OrganizationIcon from '../../../../components/icons-components/OrganizationIcon';
 import OrganizationLink from '../../../../components/ui/OrganizationLink';
@@ -124,7 +125,11 @@ export default class GlobalNavUser extends React.PureComponent {
         className={classNames('dropdown js-user-authenticated', { open: this.state.open })}
         ref={node => (this.node = node)}>
         <a className="dropdown-toggle navbar-avatar" href="#" onClick={this.toggleDropdown}>
-          <Avatar hash={currentUser.avatar} name={currentUser.name} size={24} />
+          <Avatar
+            hash={currentUser.avatar}
+            name={currentUser.name}
+            size={theme.globalNavContentHeightRaw}
+          />
         </a>
         {this.state.open && (
           <ul className="dropdown-menu dropdown-menu-right">
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap
index fb7c3c4e59e..85ca26d59b2 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap
@@ -12,7 +12,7 @@ exports[`should not render the users organizations when they are not activated 1
     <Connect(Avatar)
       hash="abcd1234"
       name="foo"
-      size={24}
+      size={32}
     />
   </a>
   <ul
@@ -85,7 +85,7 @@ exports[`should render the right interface for logged in user 1`] = `
     <Connect(Avatar)
       hash="abcd1234"
       name="foo"
-      size={24}
+      size={32}
     />
   </a>
   <ul
@@ -146,7 +146,7 @@ exports[`should render the users organizations 1`] = `
     <Connect(Avatar)
       hash="abcd1234"
       name="foo"
-      size={24}
+      size={32}
     />
   </a>
   <ul
@@ -294,7 +294,7 @@ exports[`should update the component correctly when the user changes to anonymou
     <Connect(Avatar)
       hash="abcd1234"
       name="foo"
-      size={24}
+      size={32}
     />
   </a>
   <ul
diff --git a/server/sonar-web/src/main/js/app/components/search/Search.css b/server/sonar-web/src/main/js/app/components/search/Search.css
index f3730f2b276..028707705cf 100644
--- a/server/sonar-web/src/main/js/app/components/search/Search.css
+++ b/server/sonar-web/src/main/js/app/components/search/Search.css
@@ -1,12 +1,23 @@
 .navbar-search {
   position: relative;
-  padding-right: 3px;
+  padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) 0;
 }
 
 .navbar-search .search-box,
 .navbar-search .search-box-input {
-  width: 310px;
-  max-width: none;
+  width: 26vw;
+  max-width: 310px;
+  min-width: 260px;
+  height: var(--globalNavContentHeight);
+}
+
+.navbar-search .search-box-input {
+  border-color: #fff;
+}
+
+.navbar-search .search-box-magnifier,
+.navbar-search .search-box-clear {
+  top: calc((var(--globalNavContentHeight) - 16px) / 2);
 }
 
 .navbar-search-input {
@@ -31,6 +42,7 @@
   z-index: var(--aboveNormalZIndex);
   vertical-align: middle;
   width: 16px;
+  margin-left: 4px;
   margin-right: -20px;
   background-color: #fff;
   color: var(--secondFontColor);
@@ -82,7 +94,7 @@
 }
 
 .global-navbar-search-dropdown {
-  top: calc(100% + 3px) !important;
+  top: 100% !important;
   max-height: 80vh;
   width: 440px;
   padding: 0 !important;
diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index 024f34c7d80..6e3f0fc5c51 100644
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -57,6 +57,11 @@ module.exports = {
   smallControlHeight: '20px',
   tinyControlHeight: '16px',
 
+  globalNavHeight: '48px',
+  globalNavHeightRaw: 48,
+  globalNavContentHeight: '32px',
+  globalNavContentHeightRaw: 32,
+
   // different
   defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)',