fix: tabs alignment (#6768)

Unleash · Apr 3, 2024 · e0ea257 · e0ea257
1 parent 717e541
commit e0ea257
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>
+                                        </>
                                     }
                                 />
                             );