From a3d195cbf94421a1ae151aa2a44952e961afee3f Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 30 May 2023 18:30:34 +0000
Subject: [PATCH 1/4] Fix buttons

---
 .../components/UserDropdown/UsersDropdown.tsx | 11 ++++++-
 .../WorkspaceActions/WorkspaceActions.tsx     |  5 +--
 site/src/theme/theme.ts                       | 32 +++++++++++++------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx
index 32582b6fd08b2..1e77e5ad6bf3d 100644
--- a/site/src/components/UserDropdown/UsersDropdown.tsx
+++ b/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]} />
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index a842426871a23..194b3a6d94314 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/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 &&
-        actionsByStatus.map((action) => (
-          <span key={action}>{buttonMapping[action]}</span>
-        ))}
+      {!isRestarting && actionsByStatus.map((action) => buttonMapping[action])}
       {canCancel && <CancelButton handleAction={handleCancel} />}
       <div>
         <IconButton
diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 74a0b81927805..42686361617d0 100644
--- a/site/src/theme/theme.ts
+++ b/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
-const BUTTON_MD_HEIGHT = 36
-const BUTTON_SM_HEIGHT = 30
+export const BUTTON_LG_HEIGHT = 40
+export const BUTTON_MD_HEIGHT = 36
+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,
@@ -126,21 +128,28 @@ dark = createTheme(dark, {
           letterSpacing: "normal",
           fontWeight: 500,
           height: BUTTON_MD_HEIGHT,
-          padding: theme.spacing(1, 2),
+          padding: theme.spacing(1, 1.5),
+          borderRadius: "6px",
+          fontSize: 14,
 
           whiteSpace: "nowrap",
           ":focus-visible": {
             outline: `2px solid ${theme.palette.primary.main}`,
           },
+
+          "& .MuiLoadingButton-loadingIndicator": {
+            width: 14,
+            height: 14,
+            left: 10,
+          },
+
+          "& .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 +183,9 @@ dark = createTheme(dark, {
             fontSize: 13,
           },
         },
+        startIcon: {
+          marginLeft: "-2px",
+        },
       },
     },
     MuiTableContainer: {

From 40e88b57a7c5bafa80c62a9916acb366cf3584a5 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 30 May 2023 18:32:23 +0000
Subject: [PATCH 2/4] Rollback padding

---
 site/src/theme/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 42686361617d0..8232d1a6ff94d 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -128,7 +128,7 @@ dark = createTheme(dark, {
           letterSpacing: "normal",
           fontWeight: 500,
           height: BUTTON_MD_HEIGHT,
-          padding: theme.spacing(1, 1.5),
+          padding: theme.spacing(1, 2),
           borderRadius: "6px",
           fontSize: 14,
 

From 23c721ee6a14198e36c56c6193973d6278f2aef6 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 30 May 2023 18:37:05 +0000
Subject: [PATCH 3/4] Fix padding

---
 site/src/theme/theme.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 8232d1a6ff94d..48adafe05408d 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -140,7 +140,6 @@ dark = createTheme(dark, {
           "& .MuiLoadingButton-loadingIndicator": {
             width: 14,
             height: 14,
-            left: 10,
           },
 
           "& .MuiLoadingButton-loadingIndicator .MuiCircularProgress-root": {

From dfde0b939bd89d52cec7f80e907cdf1803e97c70 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 30 May 2023 18:43:45 +0000
Subject: [PATCH 4/4] Fix proxy skeleton

---
 site/src/components/Navbar/NavbarView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
index 176a9ae446aad..8167590fbac05 100644
--- a/site/src/components/Navbar/NavbarView.tsx
+++ b/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" }}
       />
     )