refactor: Refactor last built by column (#2968)

site/src/components/AvatarData/AvatarData.tsx

@@ -17,9 +17,7 @@ export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link }) => {
 
   return (
     <div className={styles.root}>
-      <Avatar variant="square" className={styles.avatar}>
-        {firstLetter(title)}
-      </Avatar>
+      <Avatar className={styles.avatar}>{firstLetter(title)}</Avatar>
 
       {link ? (
         <Link
@@ -46,11 +44,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
   },
   avatar: {
-    borderRadius: 2,
-    marginRight: theme.spacing(1),
-    width: 24,
-    height: 24,
-    fontSize: 16,
+    marginRight: theme.spacing(1.5),
   },
   info: {
     display: "flex",

site/src/components/UserAvatar/UserAvatar.tsx

@@ -1,7 +1,5 @@
 import Avatar from "@material-ui/core/Avatar"
-import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
-import { combineClasses } from "../../util/combineClasses"
 import { firstLetter } from "../../util/firstLetter"
 
 export interface UserAvatarProps {
@@ -10,17 +8,5 @@ export interface UserAvatarProps {
 }
 
 export const UserAvatar: FC<UserAvatarProps> = ({ username, className }) => {
-  const styles = useStyles()
-  return (
-    <Avatar variant="square" className={combineClasses([styles.avatar, className])}>
-      {firstLetter(username)}
-    </Avatar>
-  )
+  return <Avatar className={className}>{firstLetter(username)}</Avatar>
 }
-
-const useStyles = makeStyles((theme) => ({
-  avatar: {
-    borderRadius: 2,
-    border: `1px solid ${theme.palette.divider}`,
-  },
-}))

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -45,6 +45,12 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
       <TableCellLink to={workspacePageLink}>
         <AvatarData title={workspace.name} subtitle={workspace.owner_name} />
       </TableCellLink>
+      <TableCellLink to={workspacePageLink}>
+        <AvatarData
+          title={initiatedBy.initiatedBy}
+          subtitle={dayjs().to(dayjs(workspace.latest_build.created_at))}
+        />
+      </TableCellLink>
       <TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink>
       <TableCellLink to={workspacePageLink}>
         {workspace.outdated ? (
@@ -60,14 +66,7 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
           <span style={{ color: theme.palette.text.secondary }}>{Language.upToDateLabel}</span>
         )}
       </TableCellLink>
-      <TableCellLink to={workspacePageLink}>
-        <span data-chromatic="ignore" style={{ color: theme.palette.text.secondary }}>
-          {dayjs().to(dayjs(workspace.latest_build.created_at))}
-        </span>
-      </TableCellLink>
-      <TableCellLink to={workspacePageLink}>
-        <span style={{ color: initiatedBy.color }}>{initiatedBy.initiatedBy}</span>
-      </TableCellLink>
+
       <TableCellLink to={workspacePageLink}>
         <span style={{ color: status.color }}>{status.status}</span>
       </TableCellLink>
@@ -108,4 +107,8 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     gap: theme.spacing(0.5),
   },
+  buildTime: {
+    color: theme.palette.text.secondary,
+    fontSize: 12,
+  },
 }))

site/src/components/WorkspacesTable/WorkspacesTable.tsx

@@ -11,9 +11,8 @@ const Language = {
   name: "Name",
   template: "Template",
   version: "Version",
-  lastBuilt: "Last Built",
   status: "Status",
-  lastBuiltBy: "By",
+  lastBuiltBy: "Last Built By",
 }
 
 export interface WorkspacesTableProps {
@@ -27,11 +26,10 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({ isLoading, workspace
     <Table>
       <TableHead>
         <TableRow>
-          <TableCell width="30%">{Language.name}</TableCell>
-          <TableCell width="15%">{Language.template}</TableCell>
-          <TableCell width="10%">{Language.version}</TableCell>
-          <TableCell width="15%">{Language.lastBuilt}</TableCell>
-          <TableCell width="15%">{Language.lastBuiltBy}</TableCell>
+          <TableCell width="25%">{Language.name}</TableCell>
+          <TableCell width="20%">{Language.lastBuiltBy}</TableCell>
+          <TableCell width="20%">{Language.template}</TableCell>
+          <TableCell width="20%">{Language.version}</TableCell>
           <TableCell width="15%">{Language.status}</TableCell>
           <TableCell width="1%"></TableCell>
         </TableRow>

site/src/theme/overrides.ts

@@ -6,10 +6,10 @@ export const getOverrides = (palette: PaletteOptions) => {
   return {
     MuiAvatar: {
       root: {
-        width: 32,
-        height: 32,
-        fontSize: 24,
-        border: `1px solid ${palette.divider}`,
+        borderColor: palette.divider,
+        width: 36,
+        height: 36,
+        fontSize: 20,
       },
     },
     MuiButton: {