coder · jaaydenh · Sep 13, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
@@ -106,15 +106,32 @@ export const DisabledBadge: FC = forwardRef<
 	);
 });
 
+export const EnterpriseBadge: FC = () => {
+	return (
+		<span
+			css={[
+				styles.badge,
+				(theme) => ({
+					backgroundColor: theme.branding.enterprise.background,
+					border: `1px solid ${theme.branding.enterprise.border}`,
+					color: theme.branding.enterprise.text,
+				}),
+			]}
+		>
+			Enterprise
+		</span>
+	);
+};
+
 export const PremiumBadge: FC = () => {
 	return (
 		<span
 			css={[
 				styles.badge,
 				(theme) => ({
-					backgroundColor: theme.branding.background,
-					border: `1px solid ${theme.branding.border}`,
-					color: theme.roles.notice.text,
+					backgroundColor: theme.branding.premium.background,
+					border: `1px solid ${theme.branding.premium.border}`,
+					color: theme.branding.premium.text,
 				}),
 			]}
 		>

diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
@@ -19,15 +19,7 @@ export const Paywall: FC<PaywallProps> = ({
 	documentationLink,
 }) => {
 	return (
-		<div
-			css={[
-				styles.root,
-				(theme) => ({
-					backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
-					border: `1px solid ${theme.branding.border}`,
-				}),
-			]}
-		>
+		<div css={styles.root}>
 			<div>
 				<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
 					<h5 css={styles.title}>{message}</h5>
@@ -45,7 +37,7 @@ export const Paywall: FC<PaywallProps> = ({
 				</Link>
 			</div>
 			<div css={styles.separator} />
-			<Stack direction="column" alignItems="center" spacing={3}>
+			<Stack direction="column" alignItems="left" spacing={3}>
 				<ul css={styles.featureList}>
 					<li css={styles.feature}>
 						<FeatureIcon />
@@ -64,16 +56,18 @@ export const Paywall: FC<PaywallProps> = ({
 						Unlimited Git & external auth integrations
 					</li>
 				</ul>
-				<Button
-					href={docs("/enterprise")}
-					target="_blank"
-					rel="noreferrer"
-					startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
-					variant="outlined"
-					color="neutral"
-				>
-					Learn about Premium
-				</Button>
+				<div css={styles.learnButton}>
+					<Button
+						href={docs("/enterprise")}
+						target="_blank"
+						rel="noreferrer"
+						startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
+						variant="outlined"
+						color="neutral"
+					>
+						Learn about Premium
+					</Button>
+				</div>
 			</Stack>
 		</div>
 	);
@@ -84,15 +78,15 @@ const FeatureIcon: FC = () => {
 		<TaskAltIcon
 			css={[
 				(theme) => ({
-					color: theme.branding.border,
+					color: theme.branding.premium.border,
 				}),
 			]}
 		/>
 	);
 };
 
 const styles = {
-	root: () => ({
+	root: (theme) => ({
 		display: "flex",
 		flexDirection: "row",
 		justifyContent: "center",
@@ -101,6 +95,8 @@ const styles = {
 		padding: 24,
 		borderRadius: 8,
 		gap: 32,
+		backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
+		border: `1px solid ${theme.branding.premium.border}`,
 	}),
 	title: {
 		fontWeight: 600,
@@ -116,9 +112,12 @@ const styles = {
 	separator: (theme) => ({
 		width: 1,
 		height: 220,
-		backgroundColor: theme.branding.divider,
+		backgroundColor: theme.branding.premium.divider,
 		marginLeft: 8,
 	}),
+	learnButton: {
+		padding: "0 28px",
+	},
 	featureList: {
 		listStyle: "none",
 		margin: 0,

diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -23,8 +23,8 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 			css={[
 				styles.root,
 				(theme) => ({
-					backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
-					border: `1px solid ${theme.branding.border}`,
+					backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
+					border: `1px solid ${theme.branding.premium.border}`,
 				}),
 			]}
 		>
@@ -45,7 +45,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 				</Link>
 			</div>
 			<div css={styles.separator} />
-			<Stack direction="column" alignItems="center" spacing={2}>
+			<Stack direction="column" alignItems="left" spacing={2}>
 				<ul css={styles.featureList}>
 					<li css={styles.feature}>
 						<FeatureIcon /> High availability & workspace proxies
@@ -60,16 +60,18 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 						<FeatureIcon /> Unlimited Git & external auth integrations
 					</li>
 				</ul>
-				<Button
-					href={docs("/enterprise")}
-					target="_blank"
-					rel="noreferrer"
-					startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
-					variant="outlined"
-					color="neutral"
-				>
-					Learn about Premium
-				</Button>
+				<div css={styles.learnButton}>
+					<Button
+						href={docs("/enterprise")}
+						target="_blank"
+						rel="noreferrer"
+						startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
+						variant="outlined"
+						color="neutral"
+					>
+						Learn about Premium
+					</Button>
+				</div>
 			</Stack>
 		</div>
 	);
@@ -80,7 +82,7 @@ const FeatureIcon: FC = () => {
 		<TaskAltIcon
 			css={[
 				(theme) => ({
-					color: theme.branding.border,
+					color: theme.branding.premium.border,
 				}),
 			]}
 		/>
@@ -92,7 +94,7 @@ const styles = {
 		display: "flex",
 		flexDirection: "row",
 		alignItems: "center",
-		maxWidth: 600,
+		maxWidth: 770,
 		padding: "24px 36px",
 		borderRadius: 8,
 		gap: 18,
@@ -106,7 +108,7 @@ const styles = {
 	description: (theme) => ({
 		marginTop: 8,
 		fontFamily: "inherit",
-		maxWidth: 420,
+		maxWidth: 360,
 		lineHeight: "160%",
 		color: theme.palette.text.secondary,
 		fontSize: 14,
@@ -121,10 +123,13 @@ const styles = {
 		listStyle: "none",
 		margin: 0,
 		marginRight: 8,
-		padding: "0 12px",
+		padding: "0 0 0 24px",
 		fontSize: 13,
 		fontWeight: 500,
 	},
+	learnButton: {
+		padding: "0 28px",
+	},
 	feature: {
 		display: "flex",
 		alignItems: "center",

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
@@ -3,6 +3,7 @@ import { appearanceConfigKey, updateAppearance } from "api/queries/appearance";
 import type { UpdateAppearanceConfig } from "api/typesGenerated";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
@@ -15,6 +16,7 @@ import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView";
 // the command line would be a significantly worse user experience.
 const AppearanceSettingsPage: FC = () => {
 	const { appearance, entitlements } = useDashboard();
+	const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility();
 	const queryClient = useQueryClient();
 	const updateAppearanceMutation = useMutation(updateAppearance(queryClient));
 
@@ -46,6 +48,7 @@ const AppearanceSettingsPage: FC = () => {
 				isEntitled={
 					entitlements.features.appearance.entitlement !== "not_entitled"
 				}
+				isPremium={hasPremiumLicense}
 			/>
 		</>
 	);

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -4,8 +4,7 @@ import TextField from "@mui/material/TextField";
 import type { UpdateAppearanceConfig } from "api/typesGenerated";
 import {
 	Badges,
-	DisabledBadge,
-	EntitledBadge,
+	EnterpriseBadge,
 	PremiumBadge,
 } from "components/Badges/Badges";
 import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
@@ -24,14 +23,15 @@ import { AnnouncementBannerSettings } from "./AnnouncementBannerSettings";
 export type AppearanceSettingsPageViewProps = {
 	appearance: UpdateAppearanceConfig;
 	isEntitled: boolean;
+	isPremium: boolean;
 	onSaveAppearance: (
 		newConfig: Partial<UpdateAppearanceConfig>,
 	) => Promise<void>;
 };
 
 export const AppearanceSettingsPageView: FC<
 	AppearanceSettingsPageViewProps
-> = ({ appearance, isEntitled, onSaveAppearance }) => {
+> = ({ appearance, isEntitled, isPremium, onSaveAppearance }) => {
 	const applicationNameForm = useFormik<{
 		application_name: string;
 	}>({
@@ -60,13 +60,17 @@ export const AppearanceSettingsPageView: FC<
 			/>
 
 			<Badges>
-				{isEntitled ? <EntitledBadge /> : <DisabledBadge />}
 				<Popover mode="hover">
-					<PopoverTrigger>
-						<span>
-							<PremiumBadge />
-						</span>
-					</PopoverTrigger>
+					{isEntitled && !isPremium ? (
+						<EnterpriseBadge />
+					) : (
+						<PopoverTrigger>
+							<span>
+								<PremiumBadge />
+							</span>
+						</PopoverTrigger>
+					)}
+
 					<PopoverContent css={{ transform: "translateY(-28px)" }}>
 						<PopoverPaywall
 							message="Appearance"

diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx
@@ -1,5 +1,6 @@
 import { Loader } from "components/Loader/Loader";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
@@ -9,6 +10,7 @@ import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
 const ObservabilitySettingsPage: FC = () => {
 	const { deploymentValues } = useDeploySettings();
 	const { entitlements } = useDashboard();
+	const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility();
 
 	return (
 		<>
@@ -20,6 +22,7 @@ const ObservabilitySettingsPage: FC = () => {
 				<ObservabilitySettingsPageView
 					options={deploymentValues.options}
 					featureAuditLogEnabled={entitlements.features.audit_log.enabled}
+					isPremium={hasPremiumLicense}
 				/>
 			) : (
 				<Loader />

diff --git a/.../src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/.../src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx
@@ -1,10 +1,15 @@
 import type { SerpentOption } from "api/typesGenerated";
 import {
 	Badges,
-	DisabledBadge,
-	EnabledBadge,
+	EnterpriseBadge,
 	PremiumBadge,
 } from "components/Badges/Badges";
+import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
@@ -15,11 +20,12 @@ import OptionsTable from "../OptionsTable";
 export type ObservabilitySettingsPageViewProps = {
 	options: SerpentOption[];
 	featureAuditLogEnabled: boolean;
+	isPremium: boolean;
 };
 
 export const ObservabilitySettingsPageView: FC<
 	ObservabilitySettingsPageViewProps
-> = ({ options, featureAuditLogEnabled }) => {
+> = ({ options, featureAuditLogEnabled, isPremium }) => {
 	return (
 		<>
 			<Stack direction="column" spacing={6}>
@@ -33,8 +39,25 @@ export const ObservabilitySettingsPageView: FC<
 					/>
 
 					<Badges>
-						{featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
-						<PremiumBadge />
+						<Popover mode="hover">
+							{featureAuditLogEnabled && !isPremium ? (
+								<EnterpriseBadge />
+							) : (
+								<PopoverTrigger>
+									<span>
+										<PremiumBadge />
+									</span>
+								</PopoverTrigger>
+							)}
+
+							<PopoverContent css={{ transform: "translateY(-28px)" }}>
+								<PopoverPaywall
+									message="Observability"
+									description="With a Premium license, you can monitor your application with logs and metrics."
+									documentationLink="https://coder.com/docs/admin/appearance"
+								/>
+							</PopoverContent>
+						</Popover>
 					</Badges>
 				</div>