refactor: Inline workspace badge (#4774)

site/src/components/PageHeader/PageHeader.tsx

@@ -62,6 +62,7 @@ const useStyles = makeStyles((theme) => ({
 
   title: {
     fontSize: theme.spacing(3),
+    fontWeight: 400,
     margin: 0,
     display: "flex",
     alignItems: "center",

site/src/components/Pill/Pill.tsx

@@ -39,6 +39,7 @@ const useStyles = makeStyles<Theme, PillProps>((theme) => ({
       icon ? theme.spacing(0.75) : theme.spacing(1.5),
     paddingRight: theme.spacing(1.5),
     whiteSpace: "nowrap",
+    fontWeight: 400,
   },
 
   pillColor: {
@@ -54,16 +55,16 @@ const useStyles = makeStyles<Theme, PillProps>((theme) => ({
 
   iconWrapper: {
     marginRight: theme.spacing(0.5),
-    width: theme.spacing(2),
+    width: theme.spacing(1.75),
-    height: theme.spacing(2),
+    height: theme.spacing(1.75),
     lineHeight: 0,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
 
     "& > svg": {
-      width: theme.spacing(2),
+      width: theme.spacing(1.75),
-      height: theme.spacing(2),
+      height: theme.spacing(1.75),
     },
   },
 }))

site/src/components/Workspace/Workspace.tsx

@@ -155,10 +155,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
           </Stack>
         }
       >
-        <WorkspaceStatusBadge
-          build={workspace.latest_build}
-          className={styles.statusBadge}
-        />
         <Stack direction="row" spacing={3} alignItems="center">
           {hasTemplateIcon && (
             <img
@@ -168,7 +164,13 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
             />
           )}
           <div>
-            <PageHeaderTitle>{workspace.name}</PageHeaderTitle>
+            <PageHeaderTitle>
+              {workspace.name}
+              <WorkspaceStatusBadge
+                build={workspace.latest_build}
+                className={styles.statusBadge}
+              />
+            </PageHeaderTitle>
             <PageHeaderSubtitle condensed>
               {workspace.owner_name}
             </PageHeaderSubtitle>
@@ -241,7 +243,7 @@ const spacerWidth = 300
 export const useStyles = makeStyles((theme) => {
   return {
     statusBadge: {
-      marginBottom: theme.spacing(3),
+      marginLeft: theme.spacing(2),
     },
 
     actions: {

site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

@@ -88,7 +88,6 @@ export const getStatus = (
         icon: <LoadingIcon />,
       }
   }
-  throw new Error("unknown text " + status)
 }
 
 export type WorkspaceStatusBadgeProps = {