SONAR-9583 Use fixed width layout for navigation

11 files changed, 425 insertions, 454 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
index f22509ca1d5..715543e99a4 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
@@ -132,67 +132,65 @@ class AboutApp extends React.PureComponent {
     }
 
     return (
-      <div id="about-page" className="about-page">
-        <div className="about-page-container">
-          <div className="about-page-entry">
-            <div className="about-page-intro">
-              <h1 className="big-spacer-bottom">
-                {translate('layout.sonar.slogan')}
-              </h1>
-              {!this.props.currentUser.isLoggedIn &&
-                <Link to="/sessions/new" className="button button-active big-spacer-right">
-                  {translate('layout.login')}
-                </Link>}
-              <a
-                className="button"
-                href="https://redirect.sonarsource.com/doc/home.html"
-                target="_blank">
-                {translate('about_page.read_documentation')}
-              </a>
-            </div>
-
-            <div className="about-page-instance">
-              <AboutProjects count={projectsCount} loading={loading} />
-              <EntryIssueTypes
-                bugs={bugs}
-                codeSmells={codeSmells}
-                loading={loading}
-                vulnerabilities={vulnerabilities}
-              />
-            </div>
+      <div id="about-page" className="page page-limited about-page">
+        <div className="about-page-entry">
+          <div className="about-page-intro">
+            <h1 className="big-spacer-bottom">
+              {translate('layout.sonar.slogan')}
+            </h1>
+            {!this.props.currentUser.isLoggedIn &&
+              <Link to="/sessions/new" className="button button-active big-spacer-right">
+                {translate('layout.login')}
+              </Link>}
+            <a
+              className="button"
+              href="https://redirect.sonarsource.com/doc/home.html"
+              target="_blank">
+              {translate('about_page.read_documentation')}
+            </a>
           </div>
 
-          {customText != null &&
-            customText.value &&
-            <div
-              className="about-page-section"
-              dangerouslySetInnerHTML={{ __html: customText.value }}
-            />}
+          <div className="about-page-instance">
+            <AboutProjects count={projectsCount} loading={loading} />
+            <EntryIssueTypes
+              bugs={bugs}
+              codeSmells={codeSmells}
+              loading={loading}
+              vulnerabilities={vulnerabilities}
+            />
+          </div>
+        </div>
 
-          <AboutLanguages />
+        {customText != null &&
+          customText.value &&
+          <div
+            className="about-page-section"
+            dangerouslySetInnerHTML={{ __html: customText.value }}
+          />}
 
-          <AboutQualityModel />
+        <AboutLanguages />
 
-          <div className="flex-columns">
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutCleanCode />
-            </div>
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutLeakPeriod />
-            </div>
-          </div>
+        <AboutQualityModel />
 
-          <div className="flex-columns">
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutQualityGates />
-            </div>
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutStandards appState={this.props.appState} />
-            </div>
+        <div className="flex-columns">
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutCleanCode />
+          </div>
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutLeakPeriod />
           </div>
+        </div>
 
-          <AboutScanners />
+        <div className="flex-columns">
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutQualityGates />
+          </div>
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutStandards appState={this.props.appState} />
+          </div>
         </div>
+
+        <AboutScanners />
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
index 2e9eee74ed4..80041d540bb 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
@@ -51,7 +51,7 @@ export default function AboutAppForSonarQubeDotCom(props: Props) {
   return (
     <div id="about-page" className="about-page sqcom-about-page">
       <div className="sqcom-about-page-entry">
-        <div className="about-page-container">
+        <div className="page-limited">
           <div className="sqcom-about-page-intro">
             <h1 className="big-spacer-bottom">
               Continuous Code Quality<br />as a Service
@@ -73,7 +73,7 @@ export default function AboutAppForSonarQubeDotCom(props: Props) {
 
       <AboutRulesForSonarQubeDotCom appState={props.appState} />
 
-      <div className="about-page-container">
+      <div className="page-limited">
         {customText != null &&
           customText.value &&
           <div
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js
index 5add8a0eab1..3496a27e3d3 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js
@@ -34,7 +34,7 @@ export default function AboutRulesForSonarQubeDotCom(props: Props) {
 
   return (
     <div className="sqcom-about-rules">
-      <div className="about-page-container">
+      <div className="page-limited">
         <Link to={getRulesUrl(null, organization)} className="sqcom-about-rules-link">
           +3,000 rules
           <span className="spacer-left">
diff --git a/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css b/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css
index dc5a19e0559..88db615075e 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css
@@ -16,10 +16,12 @@
   color: #4b9fd5;
 }
 
-.sqcom-about-page-entry .about-page-container {
+.sqcom-about-page-entry .page-limited {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .sqcom-about-page-intro {
@@ -89,10 +91,12 @@
   background-color: #4193c8;
 }
 
-.sqcom-about-rules .about-page-container {
+.sqcom-about-rules .page-limited {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .sqcom-about-rules .button {
diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css
index 46a0e9added..a81e5434c6f 100644
--- a/server/sonar-web/src/main/js/apps/about/styles.css
+++ b/server/sonar-web/src/main/js/apps/about/styles.css
@@ -22,16 +22,6 @@
   padding-bottom: 25px;
 }
 
-.about-page-container {
-  position: relative;
-  width: 1080px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
-  box-sizing: border-box;
-}
-
 .about-page-entry {
   display: flex;
   justify-content: space-between;
diff --git a/server/sonar-web/src/main/js/apps/account/account.css b/server/sonar-web/src/main/js/apps/account/account.css
index 10410996517..6050ad05929 100644
--- a/server/sonar-web/src/main/js/apps/account/account.css
+++ b/server/sonar-web/src/main/js/apps/account/account.css
@@ -16,16 +16,6 @@
   padding-top: 11px;
 }
 
-.account-nav .nav-tabs {
-  width: 100%;
-  border-bottom: none;
-}
-
-.account-nav .navbar-nav > li > a {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
 .account-user {
   float: left;
 }
diff --git a/server/sonar-web/src/main/js/apps/account/components/Nav.js b/server/sonar-web/src/main/js/apps/account/components/Nav.js
index 65c06efeb12..d8d39380cd5 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Nav.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Nav.js
@@ -20,6 +20,7 @@
 // @flow
 import React from 'react';
 import { Link, IndexLink } from 'react-router';
+import NavBarTabs from '../../../components/nav/NavBarTabs';
 import { translate } from '../../../helpers/l10n';
 
 type Props = {
@@ -28,8 +29,8 @@ type Props = {
 
 export default function Nav({ customOrganizations }: Props) {
   return (
-    <nav className="account-nav clearfix">
-      <ul className="nav navbar-nav nav-tabs">
+    <nav className="account-nav">
+      <NavBarTabs>
         <li>
           <IndexLink to="/account/" activeClassName="active">
             {translate('my_account.profile')}
@@ -57,7 +58,7 @@ export default function Nav({ customOrganizations }: Props) {
               {translate('my_account.organizations')}
             </Link>
           </li>}
-      </ul>
+      </NavBarTabs>
     </nav>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/styles.css b/server/sonar-web/src/main/js/apps/component-measures/styles.css
index 1c6f8c433ba..b72fcf31384 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/styles.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/styles.css
@@ -377,3 +377,28 @@
   border: 1px solid #e6e6e6;
   background-color: #fff;
 }
+
+.nav-pills > ul {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.nav-pills > ul > li > a {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 3px 10px;
+  border: 1px solid transparent;
+  border-radius: 24px;
+  color: #236a97;
+  transition: none;
+}
+
+.nav-pills > ul > li > a:hover {
+  border-color: #236a97;
+}
+
+.nav-pills > ul > li.active > a,
+.nav-pills > ul > li > a.active {
+  background-color: #236a97;
+  color: #fff;
+}
diff --git a/server/sonar-web/src/main/js/apps/issues/styles.css b/server/sonar-web/src/main/js/apps/issues/styles.css
index 3d1a53be793..bb0f41ec65b 100644
--- a/server/sonar-web/src/main/js/apps/issues/styles.css
+++ b/server/sonar-web/src/main/js/apps/issues/styles.css
@@ -115,22 +115,6 @@
   text-align: right;
 }
 
-.issues .search-navigator-facet-header,
-.issues .search-navigator-facet-list {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.issues .search-navigator-facet-header {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.issues .search-navigator-facet-box:not(.hidden):not(.leak-facet-box)
-  + .search-navigator-facet-box:not(.leak-facet-box) {
-  border-top: none;
-}
-
 .issues .search-navigator-facet-footer {
   padding: 0 0 10px 0;
 }
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
index 370b2bc4dfb..e872e6e2ac1 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
@@ -20,8 +20,11 @@
 // @flow
 import React from 'react';
 import { Link } from 'react-router';
+import classNames from 'classnames';
 import { translate } from '../../../helpers/l10n';
-import OrganizationIcon from '../../../components/ui/OrganizationIcon';
+import ContextNavBar from '../../../components/nav/ContextNavBar';
+import NavBarTabs from '../../../components/nav/NavBarTabs';
+import OrganizationIcon from '../../../components/icons-components/OrganizationIcon';
 import type { Organization } from '../../../store/organizations/duck';
 
 const ADMIN_PATHS = [
@@ -43,8 +46,11 @@ export default class OrganizationNavigation extends React.PureComponent {
     const { organization } = this.props;
 
     return (
-      <li className={adminActive ? 'active' : ''}>
-        <a className="dropdown-toggle navbar-admin-link" data-toggle="dropdown" href="#">
+      <li className="dropdown">
+        <a
+          className={classNames('dropdown-toggle', 'is-admin', { active: adminActive })}
+          data-toggle="dropdown"
+          href="#">
           {translate('layout.settings')}&nbsp;<i className="icon-dropdown" />
         </a>
         <ul className="dropdown-menu">
@@ -145,75 +151,72 @@ export default class OrganizationNavigation extends React.PureComponent {
     const moreActive = !adminActive && location.pathname.includes('/extension/');
 
     return (
-      <nav className="navbar navbar-context page-container" id="context-navigation">
-        <div className="navbar-context-inner">
-          <div className="container">
-            <h2 className="navbar-context-title">
-              <span className="navbar-context-title-qualifier little-spacer-right">
-                <OrganizationIcon />
-              </span>
-              <Link to={`/organizations/${organization.key}`} className="link-base-color">
-                <strong>
-                  {organization.name}
-                </strong>
-              </Link>
-            </h2>
-
-            {organization.description != null &&
-              <div className="navbar-context-description">
-                <p className="text-limited text-top" title={organization.description}>
-                  {organization.description}
-                </p>
-              </div>}
-
-            <div className="navbar-context-meta">
-              {!!organization.avatar &&
-                <img src={organization.avatar} height={30} alt={organization.name} />}
-              {organization.url != null &&
-                <div>
-                  <p className="text-limited text-top">
-                    <a
-                      className="link-underline"
-                      href={organization.url}
-                      title={organization.url}
-                      rel="nofollow">
-                      {organization.url}
-                    </a>
-                  </p>
-                </div>}
-            </div>
+      <ContextNavBar id="context-navigation" height={65}>
+        <div className="navbar-context-header">
+          <h1 className="display-inline-block">
+            <OrganizationIcon className="little-spacer-right" />
+            <Link
+              to={`/organizations/${organization.key}`}
+              className="link-base-color link-no-underline">
+              <strong>
+                {organization.name}
+              </strong>
+            </Link>
+          </h1>
+          {organization.description != null &&
+            <div className="navbar-context-description">
+              <p className="text-limited text-top" title={organization.description}>
+                {organization.description}
+              </p>
+            </div>}
+        </div>
 
-            <ul className="nav navbar-nav nav-tabs">
-              <li>
-                <Link
-                  to={`/organizations/${organization.key}/projects`}
-                  className={isHomeActive ? 'active' : ''}>
-                  {translate('projects.page')}
-                </Link>
-              </li>
-              <li>
-                <Link to={`/organizations/${organization.key}/members`} activeClassName="active">
-                  {translate('organization.members.page')}
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to={`/organizations/${organization.key}/quality_profiles`}
-                  activeClassName="active">
-                  {translate('quality_profiles.page')}
-                </Link>
-              </li>
-              <li>
-                <Link to={`/organizations/${organization.key}/rules`} activeClassName="active">
-                  {translate('coding_rules.page')}
-                </Link>
-              </li>
-              {this.renderExtensions(moreActive)}
-              {organization.canAdmin && this.renderAdministration(adminActive)}
-            </ul>
-          </div>
+        <div className="navbar-context-meta">
+          {!!organization.avatar &&
+            <img src={organization.avatar} height={30} alt={organization.name} />}
+          {organization.url != null &&
+            <div>
+              <p className="text-limited text-top">
+                <a
+                  className="link-underline"
+                  href={organization.url}
+                  title={organization.url}
+                  rel="nofollow">
+                  {organization.url}
+                </a>
+              </p>
+            </div>}
         </div>
-      </nav>
+
+        <NavBarTabs>
+          <li>
+            <Link
+              to={`/organizations/${organization.key}/projects`}
+              className={isHomeActive ? 'active' : ''}>
+              {translate('projects.page')}
+            </Link>
+          </li>
+          <li>
+            <Link to={`/organizations/${organization.key}/members`} activeClassName="active">
+              {translate('organization.members.page')}
+            </Link>
+          </li>
+          <li>
+            <Link
+              to={`/organizations/${organization.key}/quality_profiles`}
+              activeClassName="active">
+              {translate('quality_profiles.page')}
+            </Link>
+          </li>
+          <li>
+            <Link to={`/organizations/${organization.key}/rules`} activeClassName="active">
+              {translate('coding_rules.page')}
+            </Link>
+          </li>
+          {this.renderExtensions(moreActive)}
+          {organization.canAdmin && this.renderAdministration(adminActive)}
+        </NavBarTabs>
+      </ContextNavBar>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
index 06ffb28889b..05104c2e4d8 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
@@ -1,59 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`admin 1`] = `
-<nav
-  className="navbar navbar-context page-container"
+<ContextNavBar
+  height={65}
   id="context-navigation"
 >
   <div
-    className="navbar-context-inner"
+    className="navbar-context-header"
   >
-    <div
-      className="container"
+    <h1
+      className="display-inline-block"
     >
-      <h2
-        className="navbar-context-title"
-      >
-        <span
-          className="navbar-context-title-qualifier little-spacer-right"
-        >
-          <OrganizationIcon />
-        </span>
-        <Link
-          className="link-base-color"
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          to="/organizations/foo"
-        >
-          <strong>
-            Foo
-          </strong>
-        </Link>
-      </h2>
-      <div
-        className="navbar-context-meta"
+      <OrganizationIcon
+        className="little-spacer-right"
       />
+      <Link
+        className="link-base-color link-no-underline"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo"
+      >
+        <strong>
+          Foo
+        </strong>
+      </Link>
+    </h1>
+  </div>
+  <div
+    className="navbar-context-meta"
+  />
+  <NavBarTabs>
+    <li>
+      <Link
+        className=""
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/projects"
+      >
+        projects.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/members"
+      >
+        organization.members.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/quality_profiles"
+      >
+        quality_profiles.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/rules"
+      >
+        coding_rules.page
+      </Link>
+    </li>
+    <li
+      className="dropdown"
+    >
+      <a
+        className="dropdown-toggle is-admin"
+        data-toggle="dropdown"
+        href="#"
+      >
+        layout.settings
+         
+        <i
+          className="icon-dropdown"
+        />
+      </a>
       <ul
-        className="nav navbar-nav nav-tabs"
+        className="dropdown-menu"
       >
         <li>
           <Link
-            className=""
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to="/organizations/foo/projects"
-          >
-            projects.page
-          </Link>
-        </li>
-        <li>
-          <Link
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/members"
+            to="/organizations/foo/groups"
           >
-            organization.members.page
+            user_groups.page
           </Link>
         </li>
         <li>
@@ -61,9 +102,9 @@ exports[`admin 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/quality_profiles"
+            to="/organizations/foo/permissions"
           >
-            quality_profiles.page
+            permissions.page
           </Link>
         </li>
         <li>
@@ -71,140 +112,9 @@ exports[`admin 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/rules"
+            to="/organizations/foo/permission_templates"
           >
-            coding_rules.page
-          </Link>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            className="dropdown-toggle navbar-admin-link"
-            data-toggle="dropdown"
-            href="#"
-          >
-            layout.settings
-             
-            <i
-              className="icon-dropdown"
-            />
-          </a>
-          <ul
-            className="dropdown-menu"
-          >
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/groups"
-              >
-                user_groups.page
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/permissions"
-              >
-                permissions.page
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/permission_templates"
-              >
-                permission_templates
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/projects_management"
-              >
-                projects_management
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/edit"
-              >
-                edit
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/delete"
-              >
-                delete
-              </Link>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-`;
-
-exports[`regular user 1`] = `
-<nav
-  className="navbar navbar-context page-container"
-  id="context-navigation"
->
-  <div
-    className="navbar-context-inner"
-  >
-    <div
-      className="container"
-    >
-      <h2
-        className="navbar-context-title"
-      >
-        <span
-          className="navbar-context-title-qualifier little-spacer-right"
-        >
-          <OrganizationIcon />
-        </span>
-        <Link
-          className="link-base-color"
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          to="/organizations/foo"
-        >
-          <strong>
-            Foo
-          </strong>
-        </Link>
-      </h2>
-      <div
-        className="navbar-context-meta"
-      />
-      <ul
-        className="nav navbar-nav nav-tabs"
-      >
-        <li>
-          <Link
-            className=""
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to="/organizations/foo/projects"
-          >
-            projects.page
+            permission_templates
           </Link>
         </li>
         <li>
@@ -212,9 +122,9 @@ exports[`regular user 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/members"
+            to="/organizations/foo/projects_management"
           >
-            organization.members.page
+            projects_management
           </Link>
         </li>
         <li>
@@ -222,9 +132,9 @@ exports[`regular user 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/quality_profiles"
+            to="/organizations/foo/edit"
           >
-            quality_profiles.page
+            edit
           </Link>
         </li>
         <li>
@@ -232,61 +142,186 @@ exports[`regular user 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/rules"
+            to="/organizations/foo/delete"
           >
-            coding_rules.page
+            delete
           </Link>
         </li>
       </ul>
-    </div>
+    </li>
+  </NavBarTabs>
+</ContextNavBar>
+`;
+
+exports[`regular user 1`] = `
+<ContextNavBar
+  height={65}
+  id="context-navigation"
+>
+  <div
+    className="navbar-context-header"
+  >
+    <h1
+      className="display-inline-block"
+    >
+      <OrganizationIcon
+        className="little-spacer-right"
+      />
+      <Link
+        className="link-base-color link-no-underline"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo"
+      >
+        <strong>
+          Foo
+        </strong>
+      </Link>
+    </h1>
   </div>
-</nav>
+  <div
+    className="navbar-context-meta"
+  />
+  <NavBarTabs>
+    <li>
+      <Link
+        className=""
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/projects"
+      >
+        projects.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/members"
+      >
+        organization.members.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/quality_profiles"
+      >
+        quality_profiles.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/rules"
+      >
+        coding_rules.page
+      </Link>
+    </li>
+  </NavBarTabs>
+</ContextNavBar>
 `;
 
 exports[`undeletable org 1`] = `
-<nav
-  className="navbar navbar-context page-container"
+<ContextNavBar
+  height={65}
   id="context-navigation"
 >
   <div
-    className="navbar-context-inner"
+    className="navbar-context-header"
   >
-    <div
-      className="container"
+    <h1
+      className="display-inline-block"
     >
-      <h2
-        className="navbar-context-title"
-      >
-        <span
-          className="navbar-context-title-qualifier little-spacer-right"
-        >
-          <OrganizationIcon />
-        </span>
-        <Link
-          className="link-base-color"
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          to="/organizations/foo"
-        >
-          <strong>
-            Foo
-          </strong>
-        </Link>
-      </h2>
-      <div
-        className="navbar-context-meta"
+      <OrganizationIcon
+        className="little-spacer-right"
       />
+      <Link
+        className="link-base-color link-no-underline"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo"
+      >
+        <strong>
+          Foo
+        </strong>
+      </Link>
+    </h1>
+  </div>
+  <div
+    className="navbar-context-meta"
+  />
+  <NavBarTabs>
+    <li>
+      <Link
+        className=""
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/projects"
+      >
+        projects.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/members"
+      >
+        organization.members.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/quality_profiles"
+      >
+        quality_profiles.page
+      </Link>
+    </li>
+    <li>
+      <Link
+        activeClassName="active"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        to="/organizations/foo/rules"
+      >
+        coding_rules.page
+      </Link>
+    </li>
+    <li
+      className="dropdown"
+    >
+      <a
+        className="dropdown-toggle is-admin"
+        data-toggle="dropdown"
+        href="#"
+      >
+        layout.settings
+         
+        <i
+          className="icon-dropdown"
+        />
+      </a>
       <ul
-        className="nav navbar-nav nav-tabs"
+        className="dropdown-menu"
       >
         <li>
           <Link
-            className=""
+            activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/projects"
+            to="/organizations/foo/groups"
           >
-            projects.page
+            user_groups.page
           </Link>
         </li>
         <li>
@@ -294,9 +329,9 @@ exports[`undeletable org 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/members"
+            to="/organizations/foo/permissions"
           >
-            organization.members.page
+            permissions.page
           </Link>
         </li>
         <li>
@@ -304,9 +339,9 @@ exports[`undeletable org 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/quality_profiles"
+            to="/organizations/foo/permission_templates"
           >
-            quality_profiles.page
+            permission_templates
           </Link>
         </li>
         <li>
@@ -314,82 +349,23 @@ exports[`undeletable org 1`] = `
             activeClassName="active"
             onlyActiveOnIndex={false}
             style={Object {}}
-            to="/organizations/foo/rules"
+            to="/organizations/foo/projects_management"
           >
-            coding_rules.page
+            projects_management
           </Link>
         </li>
-        <li
-          className=""
-        >
-          <a
-            className="dropdown-toggle navbar-admin-link"
-            data-toggle="dropdown"
-            href="#"
-          >
-            layout.settings
-             
-            <i
-              className="icon-dropdown"
-            />
-          </a>
-          <ul
-            className="dropdown-menu"
+        <li>
+          <Link
+            activeClassName="active"
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            to="/organizations/foo/edit"
           >
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/groups"
-              >
-                user_groups.page
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/permissions"
-              >
-                permissions.page
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/permission_templates"
-              >
-                permission_templates
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/projects_management"
-              >
-                projects_management
-              </Link>
-            </li>
-            <li>
-              <Link
-                activeClassName="active"
-                onlyActiveOnIndex={false}
-                style={Object {}}
-                to="/organizations/foo/edit"
-              >
-                edit
-              </Link>
-            </li>
-          </ul>
+            edit
+          </Link>
         </li>
       </ul>
-    </div>
-  </div>
-</nav>
+    </li>
+  </NavBarTabs>
+</ContextNavBar>
 `;