SONAR-18776 Fixes for project menu after UX validation

diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx
index 87e8ce3f126a81fe4327b44f24dab70e8362fe89..710738cd454d4ce9dee239d18325037d8286f44d 100644 (file)
--- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx
+++ b/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>
   );

diff --git a/server/sonar-web/design-system/src/components/QualityGateIndicator.tsx b/server/sonar-web/design-system/src/components/QualityGateIndicator.tsx
index 5c8ac70cc71c47037e16e9fa753c6a420d381eb9..2f7df789576c303d43646acf72af8b025174e79b 100644 (file)
--- a/server/sonar-web/design-system/src/components/QualityGateIndicator.tsx
+++ b/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 = {

diff --git a/server/sonar-web/design-system/src/components/TopBar.tsx b/server/sonar-web/design-system/src/components/TopBar.tsx
index fd09469f997ee1bf07827ba79506fd01e8c0cfa3..114cda977456da934be271d18c2b066fba637981 100644 (file)
--- a/server/sonar-web/design-system/src/components/TopBar.tsx
+++ b/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')};
 `;

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx
index 2dd18a0151a4fd192243e78323aaf65a0cb9f501..ed0992e1a0ca2290eb8e4fb4f26b883c45bbb7b0 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx
+++ b/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>
         );
       })}

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx
index 08f786d3a91fcafc7c5e8995675794d80c529a04..d52c2dc672803f4de94abe874d38c3a33ed4433c 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx
+++ b/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}

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 db755f32bd447aee9fe067205e3405563abae6ad..dd9b31a6a4ace2e092098f38a44ac65337321ab7 100644 (file)
--- 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
@@ -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);
           }}

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx
index bab191696bbdfa0b5efe196a8256fe2edee1f5c8..cbfb3caefb009977b550261bd3f602d9bd87c3b9 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx
+++ b/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"
       >

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/PRLink.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/PRLink.tsx
index 43b590e6ed7726e9599968aadfbcc6bd799bf3c2..045906bb8e50c34be505de1b941aafa70de11cf6 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/PRLink.tsx
+++ b/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>
+    </>
   );
 }

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/QualityGateStatus.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/QualityGateStatus.tsx
index 492299f49c019fc0656498738e26325329aa37c3..861f7c84ea3ce3917c6b1176ad195d25df567964 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/QualityGateStatus.tsx
+++ b/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>
   );