From 5119db3cd264db95e4e402e19401bc6b1e0403d4 Mon Sep 17 00:00:00 2001
From: "blink-so[bot]" <211532188+blink-so[bot]@users.noreply.github.com>
Date: Thu, 16 Oct 2025 15:24:45 -0400
Subject: [PATCH] feat: underline links in announcement banner for better
 visibility (#20166)

## Overview

Links in announcement banners are now underlined to make them visually
distinguishable without requiring users to hover over them.

Context:
[Slack](https://codercom.slack.com/archives/C0989BZU23T/p1759503061267819)

## Changes

- Added `text-decoration: underline` to links in the announcement banner
component

---------

Co-authored-by: blink-so[bot] <211532188+blink-so[bot]@users.noreply.github.com>
Co-authored-by: blink-so[bot] <157993532+blink-so[bot]@users.noreply.github.com>
Co-authored-by: Michael Smith <michaelsmith@coder.com>
---
 site/e2e/tests/deployment/appearance.spec.ts  |  5 +--
 .../AnnouncementBannerView.tsx                | 32 +++----------------
 .../AnnouncementBanners.tsx                   |  8 ++++-
 3 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/site/e2e/tests/deployment/appearance.spec.ts b/site/e2e/tests/deployment/appearance.spec.ts
index c2b129c632..83b743814e 100644
--- a/site/e2e/tests/deployment/appearance.spec.ts
+++ b/site/e2e/tests/deployment/appearance.spec.ts
@@ -83,6 +83,7 @@ test("set service banner", async ({ page }) => {
 	await page.goto("/workspaces", { waitUntil: "domcontentloaded" });
 	await expectUrl(page).toHavePathName("/workspaces");
 
-	const bar = page.locator("div.service-banner", { hasText: message });
-	await expect(bar).toBeVisible();
+	const banner = page.getByTestId("service-banner");
+	await expect(banner).toBeVisible();
+	await expect(banner).toHaveText(message);
 });
diff --git a/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBannerView.tsx b/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBannerView.tsx
index 84df0b9796..f26e85709d 100644
--- a/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBannerView.tsx
+++ b/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBannerView.tsx
@@ -1,29 +1,24 @@
-import { css, type Interpolation, type Theme } from "@emotion/react";
 import { InlineMarkdown } from "components/Markdown/Markdown";
 import type { FC } from "react";
 import { readableForegroundColor } from "utils/colors";
 
 interface AnnouncementBannerViewProps {
-	message?: string;
-	backgroundColor?: string;
+	message: string;
+	backgroundColor: string;
 }
 
 export const AnnouncementBannerView: FC<AnnouncementBannerViewProps> = ({
 	message,
 	backgroundColor,
 }) => {
-	if (!message || !backgroundColor) {
-		return null;
-	}
-
 	return (
 		<div
-			css={styles.banner}
+			className="p-3 flex items-center"
 			style={{ backgroundColor }}
-			className="service-banner"
+			data-test-id="service-banner"
 		>
 			<div
-				css={styles.wrapper}
+				className="mx-auto font-normal [&_a]:text-inherit [&_a]:underline"
 				style={{ color: readableForegroundColor(backgroundColor) }}
 			>
 				<InlineMarkdown>{message}</InlineMarkdown>
@@ -31,20 +26,3 @@ export const AnnouncementBannerView: FC<AnnouncementBannerViewProps> = ({
 		</div>
 	);
 };
-
-const styles = {
-	banner: css`
-    padding: 12px;
-    display: flex;
-    align-items: center;
-  `,
-	wrapper: css`
-    margin-right: auto;
-    margin-left: auto;
-    font-weight: 400;
-
-    & a {
-      color: inherit;
-    }
-  `,
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBanners.tsx b/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBanners.tsx
index a962c291d1..1e4411edf7 100644
--- a/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBanners.tsx
+++ b/site/src/modules/dashboard/AnnouncementBanners/AnnouncementBanners.tsx
@@ -1,3 +1,4 @@
+import type { BannerConfig } from "api/typesGenerated";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
 import { AnnouncementBannerView } from "./AnnouncementBannerView";
@@ -15,7 +16,12 @@ export const AnnouncementBanners: FC = () => {
 	return (
 		<>
 			{announcementBanners
-				.filter((banner) => banner.enabled)
+				.filter(
+					(banner): banner is Required<BannerConfig> =>
+						banner.enabled &&
+						Boolean(banner.message) &&
+						Boolean(banner.background_color),
+				)
 				.map((banner) => (
 					<AnnouncementBannerView
 						key={banner.message}