chore: add beta badge to organizations settings page

Parkreiner · Parkreiner · commit 31e1fa7790a4 · 2024-09-17T18:08:38.000Z
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -34,7 +34,6 @@ const styles = {
 
 		cursor: "default",
 		flexShrink: 0,
-		alignSelf: "baseline",
 		padding: "4px 8px",
 		lineHeight: 1,
 		whiteSpace: "nowrap",
diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx
@@ -31,7 +31,7 @@ export const SettingsHeader: FC<HeaderProps> = ({
 								fontSize: 32,
 								fontWeight: 700,
 								display: "flex",
-								alignItems: "center",
+								alignItems: "baseline",
 								lineHeight: "initial",
 								margin: 0,
 								marginBottom: 4,
@@ -47,6 +47,7 @@ export const SettingsHeader: FC<HeaderProps> = ({
 					</h1>
 					{tooltip}
 				</Stack>
+
 				{description && (
 					<span
 						css={{
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -26,6 +26,7 @@ import {
 } from "utils/formUtils";
 import * as Yup from "yup";
 import { HorizontalContainer, HorizontalSection } from "./Horizontal";
+import { FeatureBadge } from "components/FeatureBadge/FeatureBadge";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
@@ -66,7 +67,10 @@ export const OrganizationSettingsPageView: FC<
 
 	return (
 		<div>
-			<SettingsHeader title="Settings" />
+			<SettingsHeader
+				title="Settings"
+				tooltip={<FeatureBadge type="beta" variant="interactive" size="lg" />}
+			/>
 
 			{Boolean(error) && !isApiValidationError(error) && (
 				<div css={{ marginBottom: 32 }}>
