fix highcontrast bug

microsoft · Jul 5, 2023 · 7305910 · 7305910
1 parent 32633cd
commit 7305910
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 33 deletions.
diff --git a/packages/tools/devtools/devtools-view/src/components/AudienceHistoryTable.tsx b/packages/tools/devtools/devtools-view/src/components/AudienceHistoryTable.tsx
@@ -12,6 +12,7 @@ import {
 	Table,
 	TableHeader,
 	TableHeaderCell,
+	makeStyles,
 } from "@fluentui/react-components";
 import {
 	DoorArrowLeftRegular,
@@ -21,16 +22,28 @@ import {
 	ArrowExitRegular,
 } from "@fluentui/react-icons";
 import { ThemeContext } from "../ThemeHelper";
+import { ThemeOption } from "./SettingsView";
 import { clientIdTooltipText } from "./TooltipTexts";
 import { TransformedAudienceHistoryData } from "./AudienceView";
 import { LabelCellLayout } from "./utility-components";
 
-/**
- * Returns the text color based on the current color theme of the devtools.
- */
-function setThemeStyle(themeName: string): string {
-	return themeName === "highContrast" ? "#FFF" : "";
-}
+const audienceStyles = makeStyles({
+	joined: {
+		backgroundColor: tokens.colorPaletteRoyalBlueBackground2,
+	},
+	left: {
+		backgroundColor: tokens.colorPaletteRedBackground2,
+	},
+	highContrast: {
+		"color": "#FFF",
+		"&:hover": {
+			"color": "#000",
+			"& *": {
+				color: "#000",
+			},
+		},
+	},
+});
 
 /**
  * Represents audience history data filtered to the attributes that will be displayed in the history table.
@@ -50,6 +63,8 @@ export function AudienceHistoryTable(props: AudienceHistoryTableProps): React.Re
 	const { audienceHistoryItems } = props;
 	const { themeInfo } = React.useContext(ThemeContext);
 
+	const style = audienceStyles();
+
 	// Columns for rendering audience history
 	const audienceHistoryColumns = [
 		{ columnKey: "event", label: "Event" },
@@ -92,36 +107,29 @@ export function AudienceHistoryTable(props: AudienceHistoryTableProps): React.Re
 						// The list of items here is never reordered, and is strictly appended to,
 						// so using the index as the key here is safe.
 						key={itemIndex}
-						style={{
-							backgroundColor:
-								item.changeKind === "joined"
-									? tokens.colorPaletteRoyalBlueBackground2
-									: tokens.colorPaletteRedBackground2,
-						}}
+						className={
+							themeInfo.name === ThemeOption.HighContrast
+								? style.highContrast
+								: item.changeKind === "joined"
+								? style.joined
+								: style.left
+						}
 					>
 						<TableCell>
 							<LabelCellLayout
 								icon={
 									item.changeKind === "joined" ? (
-										<ArrowJoinRegular
-											style={{ color: setThemeStyle(themeInfo.name) }}
-										/>
+										<ArrowJoinRegular />
 									) : (
-										<ArrowExitRegular
-											style={{ color: setThemeStyle(themeInfo.name) }}
-										/>
+										<ArrowExitRegular />
 									)
 								}
 							>
 								{item.changeKind}
 							</LabelCellLayout>
 						</TableCell>
-						<TableCell style={{ color: setThemeStyle(themeInfo.name) }}>
-							{item.clientId}
-						</TableCell>
-						<TableCell style={{ color: setThemeStyle(themeInfo.name) }}>
-							{item.time}
-						</TableCell>
+						<TableCell>{item.clientId}</TableCell>
+						<TableCell>{item.time}</TableCell>
 					</TableRow>
 				))}
 			</TableBody>

diff --git a/packages/tools/devtools/devtools-view/src/components/AudienceStateTable.tsx b/packages/tools/devtools/devtools-view/src/components/AudienceStateTable.tsx
@@ -12,9 +12,11 @@ import {
 	Table,
 	TableHeader,
 	TableHeaderCell,
+	makeStyles,
 } from "@fluentui/react-components";
 import { EditRegular, Search12Regular, Person12Regular } from "@fluentui/react-icons";
 import { ThemeContext } from "../ThemeHelper";
+import { ThemeOption } from "./SettingsView";
 import {
 	clientIdTooltipText,
 	userIdTooltipText,
@@ -24,6 +26,22 @@ import {
 import { TransformedAudienceStateData } from "./AudienceView";
 import { LabelCellLayout } from "./utility-components";
 
+const audienceStateStyle = makeStyles({
+	currentUser: {
+		"backgroundColor": tokens.colorPaletteGreenBackground2,
+		"&:hover": {
+			backgroundColor: tokens.colorPaletteGreenBackground2,
+		},
+	},
+	currentUserHighContrast: {
+		"color": "#FFF",
+		"&:hover": {
+			color: "#FFF",
+			backgroundColor: "#000",
+		},
+	},
+});
+
 /**
  * Represents audience state data filtered to the attributes that will be displayed in the state table.
  */
@@ -42,6 +60,8 @@ export function AudienceStateTable(props: AudienceStateTableProps): React.ReactE
 	const { audienceStateItems } = props;
 	const { themeInfo } = React.useContext(ThemeContext);
 
+	const style = audienceStateStyle();
+
 	// Columns for rendering audience state
 	const audienceStateColumns = [
 		{ columnKey: "clientId", label: "Client ID" },
@@ -101,15 +121,13 @@ export function AudienceStateTable(props: AudienceStateTableProps): React.ReactE
 					return (
 						<TableRow
 							key={itemIndex}
-							style={{
-								backgroundColor: isCurrentUser
-									? tokens.colorPaletteGreenBackground2
-									: "",
-								color:
-									themeInfo.name === "highContrast" && isCurrentUser
-										? "#FFF"
-										: "",
-							}}
+							className={
+								isCurrentUser
+									? themeInfo.name === ThemeOption.HighContrast
+										? style.currentUserHighContrast
+										: style.currentUser
+									: ""
+							}
 						>
 							<TableCell>
 								{item.clientId}