refactor: Minor improvements and fixes for the page headers (#4045)

site/src/components/PageHeader/PageHeader.tsx

@@ -32,8 +32,13 @@ export const PageHeaderTitle: React.FC<React.PropsWithChildren<unknown>> = ({ ch
   return <h1 className={styles.title}>{children}</h1>
 }
 
-export const PageHeaderSubtitle: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const styles = useStyles()
+export const PageHeaderSubtitle: React.FC<React.PropsWithChildren<{ condensed?: boolean }>> = ({
+  children,
+  condensed,
+}) => {
+  const styles = useStyles({
+    condensed,
+  })
 
   return <h2 className={styles.subtitle}>{children}</h2>
 }
@@ -52,8 +57,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   title: {
-    fontSize: theme.spacing(4),
-    fontWeight: 400,
+    fontSize: theme.spacing(3),
     margin: 0,
     display: "flex",
     alignItems: "center",
@@ -61,12 +65,13 @@ const useStyles = makeStyles((theme) => ({
   },
 
   subtitle: {
-    fontSize: theme.spacing(2.25),
+    fontSize: theme.spacing(2),
     color: theme.palette.text.secondary,
     fontWeight: 400,
     display: "block",
     margin: 0,
-    marginTop: theme.spacing(1),
+    marginTop: ({ condensed }: { condensed?: boolean }) =>
+      condensed ? theme.spacing(0.5) : theme.spacing(1),
   },
 
   actions: {

site/src/components/Workspace/Workspace.tsx

@@ -1,4 +1,3 @@
-import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
@@ -106,15 +105,15 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
         }
       >
         <WorkspaceStatusBadge build={workspace.latest_build} className={styles.statusBadge} />
-        <Box display="flex">
+        <Stack direction="row" spacing={3} alignItems="center">
           {hasTemplateIcon && (
             <img alt="" src={workspace.template_icon} className={styles.templateIcon} />
           )}
           <div>
             <PageHeaderTitle>{workspace.name}</PageHeaderTitle>
-            <PageHeaderSubtitle>{workspace.owner_name}</PageHeaderSubtitle>
+            <PageHeaderSubtitle condensed>{workspace.owner_name}</PageHeaderSubtitle>
           </div>
-        </Box>
+        </Stack>
       </PageHeader>
 
       <Stack direction="column" className={styles.firstColumnSpacer} spacing={2.5}>
@@ -184,10 +183,8 @@ export const useStyles = makeStyles((theme) => {
     },
 
     templateIcon: {
-      width: 40,
-      height: 40,
-      marginRight: theme.spacing(2),
-      marginTop: theme.spacing(0.5),
+      width: theme.spacing(6),
+      height: theme.spacing(6),
     },
 
     timelineContents: {

site/src/pages/TemplatePage/TemplatePageView.tsx

@@ -130,7 +130,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
             </div>
             <div>
               <PageHeaderTitle>{template.name}</PageHeaderTitle>
-              <PageHeaderSubtitle>
+              <PageHeaderSubtitle condensed>
                 {template.description === "" ? Language.noDescription : template.description}
               </PageHeaderSubtitle>
             </div>

site/src/pages/UsersPage/UsersPageView.tsx

@@ -70,14 +70,12 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
         <PageHeaderTitle>{Language.pageTitle}</PageHeaderTitle>
       </PageHeader>
 
-      <div style={{ marginTop: "15px" }}>
-        <SearchBarWithFilter
-          filter={filter}
-          onFilter={onFilter}
-          presetFilters={presetFilters}
-          error={error}
-        />
-      </div>
+      <SearchBarWithFilter
+        filter={filter}
+        onFilter={onFilter}
+        presetFilters={presetFilters}
+        error={error}
+      />
 
       <UsersTable
         users={users}