SONAR-19068 - UI glitch when announcement message is set

3 files changed, 44 insertions, 34 deletions

diff --git a/server/sonar-web/design-system/src/components/Banner.tsx b/server/sonar-web/design-system/src/components/Banner.tsx
index 61a6975b125..2a63980f8cb 100644
--- a/server/sonar-web/design-system/src/components/Banner.tsx
+++ b/server/sonar-web/design-system/src/components/Banner.tsx
@@ -21,12 +21,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import tw from 'twin.macro';
-import {
-  LAYOUT_BANNER_HEIGHT,
-  LAYOUT_VIEWPORT_MIN_WIDTH,
-  themeColor,
-  themeContrast,
-} from '../helpers';
+import { LAYOUT_BANNER_HEIGHT, LAYOUT_VIEWPORT_MIN_WIDTH, themeColor } from '../helpers';
 import { ThemeColors } from '../types';
 import { InteractiveIconBase } from './InteractiveIcon';
 import { CloseIcon, FlagErrorIcon, FlagInfoIcon, FlagSuccessIcon, FlagWarningIcon } from './icons';
@@ -78,12 +73,17 @@ export function Banner({ children, onDismiss, variant }: Props) {
         fontColor={variantInfo.fontColor}
       >
         <BannerInner>
-          {variantInfo.icon}
-          {children}
+          <div className="sw-flex">
+            <div className="sw-mr-3">{variantInfo.icon}</div>
+            {children}
+          </div>
+
           {onDismiss && (
             <BannerCloseIcon
               Icon={CloseIcon}
               aria-label={intl.formatMessage({ id: 'dismiss' })}
+              backGroundColor={variantInfo.backGroundColor}
+              fontColor={variantInfo.fontColor}
               onClick={onDismiss}
               size="small"
             />
@@ -110,17 +110,19 @@ const BannerWrapper = styled.div<{
 const BannerInner = styled.div`
   width: 100%;
   height: inherit;
-
   ${tw`sw-box-border`}
-  ${tw`sw-flex sw-items-center sw-gap-3`}
+  ${tw`sw-flex sw-items-center sw-justify-between sw-gap-3`}
   ${tw`sw-px-4`}
   ${tw`sw-body-sm`}
 `;
 
-const BannerCloseIcon = styled(InteractiveIconBase)`
-  --background: ${themeColor('bannerIcon')};
-  --backgroundHover: ${themeColor('bannerIconHover')};
-  --color: ${themeContrast('bannerIcon')};
-  --colorHover: ${themeContrast('bannerIconHover')};
+const BannerCloseIcon = styled(InteractiveIconBase)<{
+  backGroundColor: ThemeColors;
+  fontColor: ThemeColors;
+}>`
+  --background: ${({ backGroundColor }) => themeColor(backGroundColor)};
+  --backgroundHover: ${({ fontColor }) => themeColor(fontColor)};
+  --color: ${({ fontColor }) => themeColor(fontColor)};
+  --colorHover: ${({ backGroundColor }) => themeColor(backGroundColor)};
   --focus: ${themeColor('bannerIconFocus', 0.2)};
 `;
diff --git a/server/sonar-web/design-system/src/components/TopBar.tsx b/server/sonar-web/design-system/src/components/TopBar.tsx
index 114cda97745..de789f4a228 100644
--- a/server/sonar-web/design-system/src/components/TopBar.tsx
+++ b/server/sonar-web/design-system/src/components/TopBar.tsx
@@ -19,11 +19,10 @@
  */
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
-import { LAYOUT_GLOBAL_NAV_HEIGHT, LAYOUT_VIEWPORT_MIN_WIDTH } from '../helpers';
+import { LAYOUT_VIEWPORT_MIN_WIDTH } from '../helpers';
 import { themeColor, themeContrast, themeShadow } from '../helpers/theme';
 
 export const TopBar = styled.nav`
-  ${tw`sw-sticky sw-top-0`}
   ${tw`sw-z-top-navbar`}
   ${tw`sw-px-6 sw-pt-4`}
   ${tw`sw-box-border`};
@@ -32,7 +31,6 @@ export const TopBar = styled.nav`
   ${tw`sw-text-sm`}
 
   min-width: ${LAYOUT_VIEWPORT_MIN_WIDTH}px;
-  top: ${LAYOUT_GLOBAL_NAV_HEIGHT}px;
 
   background-color: ${themeColor('navbar')};
   color: ${themeContrast('navbar')};
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 f81c5a66e04..4984e5305ac 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
@@ -19,6 +19,7 @@
  */
 import { TopBar } from 'design-system';
 import * as React from 'react';
+import ScreenPositionHelper from '../../../../components/common/ScreenPositionHelper';
 import { translate } from '../../../../helpers/l10n';
 import {
   ProjectAlmBindingConfigurationErrors,
@@ -60,26 +61,35 @@ export default function ComponentNav(props: ComponentNavProps) {
     }
   }, [component, component.key]);
 
-  let prDecoNotifComponent;
+  let prDecoNotifComponent: JSX.Element;
   if (projectBindingErrors !== undefined) {
     prDecoNotifComponent = <ComponentNavProjectBindingErrorNotif component={component} />;
   }
 
   return (
-    <>
-      <TopBar id="context-navigation" aria-label={translate('qualifier', component.qualifier)}>
-        <div className="sw-min-h-10 sw-flex sw-justify-between">
-          <Header component={component} projectBinding={projectBinding} />
-          <HeaderMeta
-            component={component}
-            currentTask={currentTask}
-            isInProgress={isInProgress}
-            isPending={isPending}
-          />
-        </div>
-        <Menu component={component} isInProgress={isInProgress} isPending={isPending} />
-      </TopBar>
-      {prDecoNotifComponent}
-    </>
+    <ScreenPositionHelper className="sw-inline">
+      {({ top }) => (
+        <>
+          <TopBar
+            className="sw-sticky"
+            id="context-navigation"
+            aria-label={translate('qualifier', component.qualifier)}
+            style={{ top: `${top}px` }}
+          >
+            <div className="sw-min-h-10 sw-flex sw-justify-between">
+              <Header component={component} projectBinding={projectBinding} />
+              <HeaderMeta
+                component={component}
+                currentTask={currentTask}
+                isInProgress={isInProgress}
+                isPending={isPending}
+              />
+            </div>
+            <Menu component={component} isInProgress={isInProgress} isPending={isPending} />
+          </TopBar>
+          {prDecoNotifComponent}
+        </>
+      )}
+    </ScreenPositionHelper>
   );
 }