fix: update spacing for tooltip

Parkreiner · Parkreiner · commit f73ba71e4e5b · 2023-10-18T14:58:35.000Z
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -5,16 +5,23 @@ import { FC } from "react";
 import { css, type Interpolation, type Theme } from "@emotion/react";
 
 export type AvatarProps = MuiAvatarProps & {
-  size?: "sm" | "md" | "xl";
+  size?: "xs" | "sm" | "md" | "xl";
   colorScheme?: "light" | "darken";
   fitImage?: boolean;
 };
 
 const sizeStyles = {
+  xs: (theme) => ({
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    fontSize: theme.spacing(1),
+    fontWeight: 700,
+  }),
   sm: (theme) => ({
     width: theme.spacing(3),
     height: theme.spacing(3),
     fontSize: theme.spacing(1.5),
+    fontWeight: 600,
   }),
   md: {},
   xl: (theme) => ({
diff --git a/site/src/pages/UsersPage/UsersTable/GroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/GroupsCell.tsx
@@ -84,7 +84,7 @@ export function GroupsCell({ userGroups }: GroupsCellProps) {
                   display: "flex",
                   flexFlow: "column nowrap",
                   fontSize: theme.typography.body2.fontSize,
-                  padding: theme.spacing(1, 0.5),
+                  padding: theme.spacing(0.5, 0.25),
                   gap: theme.spacing(0),
                 }}
               >
@@ -94,11 +94,11 @@ export function GroupsCell({ userGroups }: GroupsCellProps) {
                     <ListItem
                       key={group.id}
                       css={{
-                        columnGap: theme.spacing(1.5),
+                        columnGap: theme.spacing(1.25),
                         alignItems: "center",
                       }}
                     >
-                      <Avatar size="sm" src={group.avatar_url} alt={groupName}>
+                      <Avatar size="xs" src={group.avatar_url} alt={groupName}>
                         {groupName}
                       </Avatar>
 
