SONAR-18776 Fixes for project menu after UX validation

server/sonar-web/design-system/src/components/NavBarTabs.tsx

@@ -35,7 +35,7 @@ interface Props extends React.HTMLAttributes<HTMLUListElement> {
 
 export function NavBarTabs({ children, className, ...other }: Props) {
   return (
-    <ul className={`sw-flex sw-items-end sw-gap-6 ${className ?? ''}`} {...other}>
+    <ul className={`sw-flex sw-items-end sw-gap-8 ${className ?? ''}`} {...other}>
       {children}
     </ul>
   );

server/sonar-web/design-system/src/components/QualityGateIndicator.tsx

@@ -74,7 +74,11 @@ export default function QualityGateIndicator(props: Props) {
       StatusComponent = <QGFailed {...iconProps} />;
       break;
   }
-  return <div aria-label={ariaLabel}>{StatusComponent}</div>;
+  return (
+    <div aria-label={ariaLabel} className="sw-flex sw-justify-center sw-items-center">
+      {StatusComponent}
+    </div>
+  );
 }
 
 const COMMON_PROPS = {

server/sonar-web/design-system/src/components/TopBar.tsx

@@ -20,7 +20,7 @@
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { LAYOUT_GLOBAL_NAV_HEIGHT, LAYOUT_VIEWPORT_MIN_WIDTH } from '../helpers';
-import { themeColor, themeContrast } from '../helpers/theme';
+import { themeColor, themeContrast, themeShadow } from '../helpers/theme';
 
 export const TopBar = styled.nav`
   ${tw`sw-sticky sw-top-0`}
@@ -36,4 +36,5 @@ export const TopBar = styled.nav`
 
   background-color: ${themeColor('navbar')};
   color: ${themeContrast('navbar')};
+  box-shadow: ${themeShadow('lg')};
 `;

server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx

@@ -57,7 +57,7 @@ export function Breadcrumb(props: BreadcrumbProps) {
             >
               <TextMuted text={breadcrumbElement.name} />
             </HoverLink>
-            {isNotLast && <span className="slash-separator sw-mx-2.5" />}
+            {isNotLast && <span className="slash-separator sw-mx-2" />}
           </div>
         );
       })}

server/sonar-web/src/main/js/app/components/nav/component/Header.tsx

@@ -42,7 +42,7 @@ export function Header(props: HeaderProps) {
       <Breadcrumb component={component} currentUser={currentUser} />
       {currentBranchLike && (
         <>
-          <span className="slash-separator sw-ml-2" />
+          <span className="slash-separator sw-mx-2" />
           <BranchLikeNavigation
             branchLikes={branchLikes}
             component={component}

server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx

@@ -69,7 +69,7 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) {
   };
 
   return (
-    <div className="sw-flex sw-items-center sw-ml-2 it__branch-like-navigation-toggler-container">
+    <div className="sw-flex sw-items-center it__branch-like-navigation-toggler-container">
       <Popup
         allowResizing={true}
         overlay={
@@ -95,7 +95,7 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) {
         zLevel={PopupZLevel.Global}
       >
         <ButtonSecondary
-          className="sw-max-w-abs-350"
+          className="sw-max-w-abs-350 sw-px-3"
           onClick={() => {
             setIsMenuOpen(!isMenuOpen);
           }}

server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx

@@ -159,7 +159,7 @@ export class Menu extends React.PureComponent<Props, State> {
 
     return (
       <DropdownMenu
-        className="sw-overflow-y-auto sw-overflow-x-hidden it__branch-like-navigation-menu"
+        className="sw-overflow-y-auto sw-overflow-x-hidden sw-min-w-abs-350 it__branch-like-navigation-menu"
         maxHeight="38rem"
         size="auto"
       >

server/sonar-web/src/main/js/app/components/nav/component/branch-like/PRLink.tsx

@@ -59,7 +59,7 @@ export default function PRLink({
     component.alm?.key ||
     (isPullRequest(currentBranchLike) && getPRUrlAlmKey(currentBranchLike.url));
   return (
-    <div>
+    <>
       {currentBranchLike.url !== undefined && (
         <Link
           icon={
@@ -78,6 +78,6 @@ export default function PRLink({
           {!almKey && translate('branches.see_the_pr')}
         </Link>
       )}
-    </div>
+    </>
   );
 }

server/sonar-web/src/main/js/app/components/nav/component/branch-like/QualityGateStatus.tsx

@@ -56,8 +56,8 @@ export default function QualityGateStatus({
   const formatted = formatMeasure(status, MetricType.Level);
   const ariaLabel = translateWithParameters('overview.quality_gate_x', formatted);
   return (
-    <div className={classNames(className, `it__level-${status}`)}>
-      <QualityGateIndicator status={status} className="sw-mr-2" ariaLabel={ariaLabel} />
+    <div className={classNames(`it__level-${status}`, className)}>
+      <QualityGateIndicator status={status} className="sw-mr-2" ariaLabel={ariaLabel} size="sm" />
       {showStatusText && <span>{formatted}</span>}
     </div>
   );