From e0ea257f0703aa0c3a43c3325ecaea4ab87cb3cd Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 3 Apr 2024 12:15:36 +0200
Subject: [PATCH] fix: tabs alignment (#6768)

---
 .../banners/EdgeUpgradeBanner/EdgeUpgradeBanner.tsx |  2 +-
 .../OutdatedSdksBanner/OutdatedSdksBanner.tsx       |  2 +-
 frontend/src/component/project/Project/Project.tsx  | 13 ++++++++-----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/banners/EdgeUpgradeBanner/EdgeUpgradeBanner.tsx b/frontend/src/component/banners/EdgeUpgradeBanner/EdgeUpgradeBanner.tsx
index 70f37290f58..cf132250c14 100644
--- a/frontend/src/component/banners/EdgeUpgradeBanner/EdgeUpgradeBanner.tsx
+++ b/frontend/src/component/banners/EdgeUpgradeBanner/EdgeUpgradeBanner.tsx
@@ -6,7 +6,7 @@ import type { IBanner } from '../../../interfaces/banner';
 export const EdgeUpgradeBanner = () => {
     const displayUpgradeEdgeBanner = useUiFlag('displayUpgradeEdgeBanner');
     const upgradeEdgeBanner: IBanner = {
-        message: `We noticed that you're using an outdated Unleash Edge. To ensure you continue to receive metrics, we recommend upgrading to v17.0.0 or later.`,
+        message: `We noticed that an outdated Edge version is connected to this Unleash instance. To ensure you continue to receive metrics, we recommend upgrading to v17.0.0 or later.`,
         link: 'https://github.com/Unleash/unleash-edge',
         linkText: 'Get latest',
         variant: 'warning',
diff --git a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx b/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx
index 5b48e831d4d..ebb54ccc37a 100644
--- a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx
+++ b/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx
@@ -32,7 +32,7 @@ export const OutdatedSdksBanner = () => {
     };
 
     const outdatedSdksBanner: IBanner = {
-        message: `We noticed that you're using outdated SDKs. `,
+        message: `We noticed that an outdated SDK version is connected to this Unleash instance.`,
         variant: 'warning',
         link: 'dialog',
         linkText: 'Please update those versions',
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index acb9716ba32..a976f9523f5 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -272,20 +272,23 @@ export const Project = () => {
                                         tab.isEnterprise ? 'end' : undefined
                                     }
                                     icon={
-                                        <span>
+                                        <>
                                             <ConditionallyRender
                                                 condition={Boolean(tab.new)}
                                                 show={
-                                                    <StyledBadge color='success'>
-                                                        Beta
-                                                    </StyledBadge>
+                                                    // extra span to avoid badge getting color override from the overly specific parent component
+                                                    <span>
+                                                        <StyledBadge color='success'>
+                                                            Beta
+                                                        </StyledBadge>
+                                                    </span>
                                                 }
                                             />
                                             {(tab.isEnterprise &&
                                                 isPro() &&
                                                 enterpriseIcon) ||
                                                 undefined}
-                                        </span>
+                                        </>
                                     }
                                 />
                             );