SONAR-18776 New layout for project header

8 files changed, 67 insertions, 25 deletions

diff --git a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
index 03bbe3bdf6e..0a9b068bd48 100644
--- a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
+++ b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx
@@ -50,7 +50,6 @@ export interface InteractiveIconProps {
 export class InteractiveIconBase extends React.PureComponent<InteractiveIconProps> {
   handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     const { disabled, onClick, stopPropagation = true } = this.props;
-    event.currentTarget.blur();
 
     if (stopPropagation) {
       event.stopPropagation();
diff --git a/server/sonar-web/design-system/src/components/MainAppBar.tsx b/server/sonar-web/design-system/src/components/MainAppBar.tsx
index 97303a00158..6de796006c2 100644
--- a/server/sonar-web/design-system/src/components/MainAppBar.tsx
+++ b/server/sonar-web/design-system/src/components/MainAppBar.tsx
@@ -37,8 +37,8 @@ const MainAppBarDiv = styled.div`
   ${tw`sw-flex`};
   ${tw`sw-items-center`};
   ${tw`sw-left-0`};
-  ${tw`sw-px-6`};
   ${tw`sw-right-0`};
+  ${tw`sw-px-6`};
   ${tw`sw-w-full`};
   ${tw`sw-box-border`};
   ${tw`sw-z-global-navbar`};
diff --git a/server/sonar-web/design-system/src/components/TopBar.tsx b/server/sonar-web/design-system/src/components/TopBar.tsx
new file mode 100644
index 00000000000..a35bd832632
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/TopBar.tsx
@@ -0,0 +1,50 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import styled from '@emotion/styled';
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+import tw from 'twin.macro';
+import { LAYOUT_GLOBAL_NAV_HEIGHT } from '../helpers';
+import { themeColor, themeContrast } from '../helpers/theme';
+
+interface Props {
+  id?: string;
+}
+
+export function TopBar({
+  children,
+  ...props
+}: PropsWithChildren<Props> & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
+  return (
+    <BaseStyle style={{ top: LAYOUT_GLOBAL_NAV_HEIGHT }} {...props}>
+      {children}
+    </BaseStyle>
+  );
+}
+
+const BaseStyle = styled.nav`
+  ${tw`sw-sticky`}
+  ${tw`sw-z-top-navbar`}
+  ${tw`sw-px-6 sw-pt-4`}
+  ${tw`sw-font-sans`}
+  ${tw`sw-text-sm`}
+
+  background-color: ${themeColor('backgroundPrimary')};
+  color: ${themeContrast('backgroundPrimary')};
+`;
diff --git a/server/sonar-web/design-system/src/components/icons/Icon.tsx b/server/sonar-web/design-system/src/components/icons/Icon.tsx
index 0f5f743f4d4..5edea8c38c0 100644
--- a/server/sonar-web/design-system/src/components/icons/Icon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/Icon.tsx
@@ -71,6 +71,7 @@ export function OcticonHoc(
 ): React.ComponentType<IconProps> {
   function IconWrapper({ fill, ...props }: IconProps) {
     const theme = useTheme();
+
     return (
       <WrappedOcticon
         fill={fill && themeColor(fill)({ theme })}
diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts
index 452c570433e..67b83f5d7af 100644
--- a/server/sonar-web/design-system/src/components/index.ts
+++ b/server/sonar-web/design-system/src/components/index.ts
@@ -37,3 +37,4 @@ export * from './popups';
 export * from './SonarQubeLogo';
 export * from './Text';
 export { default as Tooltip } from './Tooltip';
+export { TopBar } from './TopBar';
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
index 8ca22c7edfb..785922bdb95 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
@@ -17,9 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import classNames from 'classnames';
+import { TopBar } from 'design-system';
 import * as React from 'react';
-import ContextNavBar from '../../../../components/ui/ContextNavBar';
 import { translate } from '../../../../helpers/l10n';
 import {
   ProjectAlmBindingConfigurationErrors,
@@ -101,18 +100,8 @@ export default function ComponentNav(props: ComponentNavProps) {
   }
 
   return (
-    <ContextNavBar
-      height={contextNavHeight}
-      id="context-navigation"
-      label={translate('qualifier', component.qualifier)}
-      notif={<>{prDecoNotifComponent}</>}
-    >
-      <div
-        className={classNames('display-flex-center display-flex-space-between', {
-          'padded-bottom little-padded-top': warnings.length === 0,
-          'little-padded-bottom': warnings.length > 0,
-        })}
-      >
+    <TopBar id="context-navigation" aria-label={translate('qualifier', component.qualifier)}>
+      <div className="sw-flex sw-justify-between">
         <Header
           branchLikes={branchLikes}
           component={component}
@@ -143,7 +132,9 @@ export default function ComponentNav(props: ComponentNavProps) {
       />
       <InfoDrawer
         displayed={displayProjectInfo}
-        onClose={() => setDisplayProjectInfo(false)}
+        onClose={() => {
+          setDisplayProjectInfo(false);
+        }}
         top={globalNavHeightRaw + contextNavHeight}
       >
         <ProjectInformation
@@ -152,6 +143,7 @@ export default function ComponentNav(props: ComponentNavProps) {
           onComponentChange={props.onComponentChange}
         />
       </InfoDrawer>
-    </ContextNavBar>
+      {prDecoNotifComponent}
+    </TopBar>
   );
 }
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 1cff50e993b..f706073a9de 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
@@ -76,7 +76,7 @@ export function HeaderMeta(props: HeaderMetaProps) {
         </span>
       )}
       {isLoggedIn(currentUser) && currentPage !== undefined && !isPullRequest(branchLike) && (
-        <HomePageSelect className="sw-ml-4" currentPage={currentPage} />
+        <HomePageSelect className="sw-ml-2" currentPage={currentPage} />
       )}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
index cb65d92527a..18d52363492 100644
--- a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
+++ b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import classNames from 'classnames';
-import { BareButton, HomeFillIcon, HomeIcon, Tooltip } from 'design-system';
+import { DiscreetInteractiveIcon, HomeFillIcon, HomeIcon, Tooltip } from 'design-system';
 import * as React from 'react';
 import { setHomePage } from '../../api/users';
 import { CurrentUserContextInterface } from '../../app/components/current-user/CurrentUserContext';
@@ -73,19 +73,18 @@ export class HomePageSelect extends React.PureComponent<Props> {
         {isDefault ? (
           <span
             aria-label={tooltip}
-            className={classNames('display-inline-block', className)}
+            className={classNames('sw-inline-block', className)}
             role="img"
           >
             <HomeFillIcon />
           </span>
         ) : (
-          <BareButton
+          <DiscreetInteractiveIcon
             aria-label={tooltip}
             className={className}
+            Icon={isChecked ? HomeFillIcon : HomeIcon}
             onClick={isChecked ? this.handleReset : this.handleClick}
-          >
-            {isChecked ? <HomeFillIcon /> : <HomeIcon />}
-          </BareButton>
+          />
         )}
       </Tooltip>
     );