Fix a few style inconsistencies

BrunoQuaresma · BrunoQuaresma · commit 0a0b1cf639b3 · 2024-12-18T20:57:44.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -10,7 +10,12 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import type * as TypesGen from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { Avatar, AvatarImage } from "components/Avatar/Avatar";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+	avatarLetter,
+} from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
@@ -98,16 +103,13 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app }) => {
 	return (
 		<TableRow key={app.id} data-testid={`app-${app.id}`} {...clickableProps}>
 			<TableCell>
-				<AvatarData
-					title={app.name}
-					avatar={
-						Boolean(app.icon) && (
-							<Avatar variant="icon" size="lg">
-								<AvatarImage src={app.icon} />
-							</Avatar>
-						)
-					}
-				/>
+				<Stack direction="row" spacing={1}>
+					<Avatar variant="icon">
+						<AvatarImage src={app.icon} />
+						<AvatarFallback>{avatarLetter(app.name)}</AvatarFallback>
+					</Avatar>
+					<span className="font-semibold">{app.name}</span>
+				</Stack>
 			</TableCell>
 
 			<TableCell>
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -165,7 +165,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 						<AvatarImage src={app.display_icon} />
 						<AvatarFallback>{avatarLetter(name)}</AvatarFallback>
 					</Avatar>
-					{name}
+					<span className="font-semibold">{name}</span>
 					{/*
 					 * If the link is authenticated and has a refresh token, show that it will automatically
 					 * attempt to authenticate when the token expires.
diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
@@ -2,7 +2,12 @@ import ParameterIcon from "@mui/icons-material/CodeOutlined";
 import GeneralIcon from "@mui/icons-material/SettingsOutlined";
 import ScheduleIcon from "@mui/icons-material/TimerOutlined";
 import type { Workspace } from "api/typesGenerated";
-import { Avatar, AvatarFallback, AvatarImage } from "components/Avatar/Avatar";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+	avatarLetter,
+} from "components/Avatar/Avatar";
 import {
 	Sidebar as BaseSidebar,
 	SidebarHeader,
@@ -22,7 +27,7 @@ export const Sidebar: FC<SidebarProps> = ({ username, workspace }) => {
 				avatar={
 					<Avatar variant="icon">
 						<AvatarImage>{workspace.template_icon}</AvatarImage>
-						<AvatarFallback>{workspace.name}</AvatarFallback>
+						<AvatarFallback>{avatarLetter(workspace.name)}</AvatarFallback>
 					</Avatar>
 				}
 				title={workspace.name}
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -11,7 +11,12 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import { visuallyHidden } from "@mui/utils";
 import type { Template, Workspace } from "api/typesGenerated";
-import { Avatar, AvatarFallback, AvatarImage } from "components/Avatar/Avatar";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+	avatarLetter,
+} from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
@@ -188,7 +193,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 											avatar={
 												<Avatar variant="icon">
 													<AvatarImage src={workspace.template_icon} />
-													<AvatarFallback>{workspace.name}</AvatarFallback>
+													<AvatarFallback>
+														{avatarLetter(workspace.name)}
+													</AvatarFallback>
 												</Avatar>
 											}
 										/>
