refactor(site): Improve and fix loading buttons (#7719)

site/src/components/Navbar/NavbarView.tsx

@@ -23,6 +23,7 @@ import Divider from "@mui/material/Divider"
 import HelpOutline from "@mui/icons-material/HelpOutline"
 import Tooltip from "@mui/material/Tooltip"
 import Skeleton from "@mui/material/Skeleton"
+import { BUTTON_SM_HEIGHT } from "theme/theme"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`
 
@@ -195,7 +196,7 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
     return (
       <Skeleton
         width="160px"
-        height={30}
+        height={BUTTON_SM_HEIGHT}
         sx={{ borderRadius: "4px", transform: "none" }}
       />
     )

site/src/components/UserDropdown/UsersDropdown.tsx

@@ -9,6 +9,7 @@ import { BorderedMenu } from "../BorderedMenu/BorderedMenu"
 import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
 import { UserAvatar } from "../UserAvatar/UserAvatar"
 import { UserDropdownContent } from "../UserDropdownContent/UserDropdownContent"
+import { BUTTON_SM_HEIGHT } from "theme/theme"
 
 export interface UserDropdownProps {
   user: TypesGen.User
@@ -42,7 +43,15 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
       >
         <div className={styles.inner}>
           <Badge overlap="circular">
-            <UserAvatar username={user.username} avatarURL={user.avatar_url} />
+            <UserAvatar
+              sx={{
+                width: BUTTON_SM_HEIGHT,
+                height: BUTTON_SM_HEIGHT,
+                fontSize: 16,
+              }}
+              username={user.username}
+              avatarURL={user.avatar_url}
+            />
           </Badge>
           {anchorEl ? (
             <CloseDropdown color={colors.gray[6]} />

site/src/components/WorkspaceActions/WorkspaceActions.tsx

@@ -102,10 +102,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
           ? buttonMapping[ButtonTypesEnum.updating]
           : buttonMapping[ButtonTypesEnum.update])}
       {isRestarting && buttonMapping[ButtonTypesEnum.restarting]}
-      {!isRestarting &&
+      {!isRestarting && actionsByStatus.map((action) => buttonMapping[action])}
-        actionsByStatus.map((action) => (
-          <span key={action}>{buttonMapping[action]}</span>
-        ))}
       {canCancel && <CancelButton handleAction={handleCancel} />}
       <div>
         <IconButton

site/src/theme/theme.ts

@@ -3,9 +3,9 @@ import { ThemeOptions, createTheme, Theme } from "@mui/material/styles"
 import { BODY_FONT_FAMILY, borderRadius } from "./constants"
 
 // MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit
-const BUTTON_LG_HEIGHT = 42
+export const BUTTON_LG_HEIGHT = 40
-const BUTTON_MD_HEIGHT = 36
+export const BUTTON_MD_HEIGHT = 36
-const BUTTON_SM_HEIGHT = 30
+export const BUTTON_SM_HEIGHT = 32
 
 export type PaletteIndex = keyof Theme["palette"]
 export type PaletteStatusIndex = Extract<
@@ -110,6 +110,8 @@ dark = createTheme(dark, {
         },
       },
     },
+    // Button styles are based on
+    // https://tailwindui.com/components/application-ui/elements/buttons
     MuiButtonBase: {
       defaultProps: {
         disableRipple: true,
@@ -127,20 +129,26 @@ dark = createTheme(dark, {
           fontWeight: 500,
           height: BUTTON_MD_HEIGHT,
           padding: theme.spacing(1, 2),
+          borderRadius: "6px",
+          fontSize: 14,
 
           whiteSpace: "nowrap",
           ":focus-visible": {
             outline: `2px solid ${theme.palette.primary.main}`,
           },
+
+          "& .MuiLoadingButton-loadingIndicator": {
+            width: 14,
+            height: 14,
+          },
+
+          "& .MuiLoadingButton-loadingIndicator .MuiCircularProgress-root": {
+            width: "inherit !important",
+            height: "inherit !important",
+          },
         }),
         sizeSmall: {
-          borderRadius: 6,
           height: BUTTON_SM_HEIGHT,
-
-          "& .MuiCircularProgress-root": {
-            width: "14px !important",
-            height: "14px !important",
-          },
         },
         sizeLarge: {
           height: BUTTON_LG_HEIGHT,
@@ -174,6 +182,9 @@ dark = createTheme(dark, {
             fontSize: 13,
           },
         },
+        startIcon: {
+          marginLeft: "-2px",
+        },
       },
     },
     MuiTableContainer: {