diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx index 92c230a4a23f7..52cdfaeb01a11 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx @@ -41,7 +41,9 @@ export const FeatureStageBadge: FC = ({ {...delegatedProps} > (This is a - {featureStageBadgeTypes[contentType]} + + {featureStageBadgeTypes[contentType]} + feature) )} @@ -99,6 +101,13 @@ const styles = { backgroundColor: theme.branding.featureStage.hover.background, }), + badgeLabel: { + // Have to set display mode to anything other than inline, or else the + // CSS capitalization algorithm won't capitalize the element + display: "inline-block", + textTransform: "capitalize", + }, + badgeLargeText: { fontSize: "1rem", }, diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 30ed5b0c527a0..1dec847e65093 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -10,7 +10,6 @@ interface HeaderProps { secondary?: boolean; docsHref?: string; tooltip?: ReactNode; - badges?: ReactNode; } export const SettingsHeader: FC = ({ @@ -19,38 +18,34 @@ export const SettingsHeader: FC = ({ docsHref, secondary, tooltip, - badges, }) => { const theme = useTheme(); return (
- - -

- {title} -

- {tooltip} -
- {badges} + +

+ {title} +

+ {tooltip}
{description && ( diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx index 5e845e7bb78a5..beff71098fbac 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx @@ -5,7 +5,6 @@ import { organizationPermissions } from "api/queries/organizations"; import { deleteOrganizationRole, organizationRoles } from "api/queries/roles"; import type { Role } from "api/typesGenerated"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; -import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; import { Loader } from "components/Loader/Loader"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; @@ -67,7 +66,6 @@ export const CustomRolesPage: FC = () => { } /> {permissions.assignOrgRole && isCustomRolesEnabled && (