refactor: Replace PageHeaderText by PageHeaderSubtitle (#2287)

site/src/components/PageHeader/PageHeader.stories.tsx

@@ -1,15 +1,24 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import { PageHeader, PageHeaderTitle } from "./PageHeader"
+import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "./PageHeader"
 
 export default {
   title: "components/PageHeader",
   component: PageHeader,
 } as ComponentMeta<typeof PageHeader>
 
-const Template: Story = () => (
+const WithTitleTemplate: Story = () => (
   <PageHeader>
     <PageHeaderTitle>Templates</PageHeaderTitle>
   </PageHeader>
 )
 
-export const Example = Template.bind({})
+export const WithTitle = WithTitleTemplate.bind({})
+
+const WithSubtitleTemplate: Story = () => (
+  <PageHeader>
+    <PageHeaderTitle>Templates</PageHeaderTitle>
+    <PageHeaderSubtitle>Create a new workspace from a Template</PageHeaderSubtitle>
+  </PageHeader>
+)
+
+export const WithSubtitle = WithSubtitleTemplate.bind({})

site/src/components/PageHeader/PageHeader.tsx

@@ -32,12 +32,6 @@ export const PageHeaderSubtitle: React.FC = ({ children }) => {
   return <h2 className={styles.subtitle}>{children}</h2>
 }
 
-export const PageHeaderText: React.FC = ({ children }) => {
-  const styles = useStyles()
-
-  return <h3 className={styles.text}>{children}</h3>
-}
-
 const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
@@ -56,16 +50,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   subtitle: {
-    fontSize: theme.spacing(2.5),
-    color: theme.palette.text.secondary,
-    fontWeight: 400,
-    display: "block",
-    margin: 0,
-    marginTop: theme.spacing(1),
-  },
-
-  text: {
-    fontSize: theme.spacing(2),
+    fontSize: theme.spacing(2.25),
     color: theme.palette.text.secondary,
     fontWeight: 400,
     display: "block",

site/src/pages/TemplatePage/TemplatePageView.tsx

@@ -46,7 +46,6 @@ export const TemplatePageView: FC<TemplatePageViewProps> = ({ template, activeTe
       >
         <PageHeaderTitle>{template.name}</PageHeaderTitle>
         <PageHeaderSubtitle>
-          {" "}
           {template.description === "" ? Language.noDescription : template.description}
         </PageHeaderSubtitle>
       </PageHeader>

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -22,7 +22,7 @@ import {
   HelpTooltipTitle,
 } from "../../components/HelpTooltip/HelpTooltip"
 import { Margins } from "../../components/Margins/Margins"
-import { PageHeader, PageHeaderText, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
+import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
 import { Stack } from "../../components/Stack/Stack"
 import { TableLoader } from "../../components/TableLoader/TableLoader"
 
@@ -86,7 +86,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
           </Stack>
         </PageHeaderTitle>
         {props.templates && props.templates.length > 0 && (
-          <PageHeaderText>Choose a template to create a new workspace.</PageHeaderText>
+          <PageHeaderSubtitle>Choose a template to create a new workspace.</PageHeaderSubtitle>
         )}
       </PageHeader>
 

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -32,7 +32,7 @@ import {
   HelpTooltipTitle,
 } from "../../components/HelpTooltip/HelpTooltip"
 import { Margins } from "../../components/Margins/Margins"
-import { PageHeader, PageHeaderText, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
+import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
 import { Stack } from "../../components/Stack/Stack"
 import { TableLoader } from "../../components/TableLoader/TableLoader"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
@@ -130,23 +130,21 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
 
   return (
     <Margins>
-      <PageHeader
-        actions={
-          <PageHeaderText>
-            Create a new workspace from a{" "}
-            <Link component={RouterLink} to="/templates">
-              Template
-            </Link>
-            .
-          </PageHeaderText>
-        }
-      >
+      <PageHeader>
         <PageHeaderTitle>
           <Stack direction="row" spacing={1} alignItems="center">
             <span>Workspaces</span>
             <WorkspaceHelpTooltip />
           </Stack>
         </PageHeaderTitle>
+
+        <PageHeaderSubtitle>
+          Create a new workspace from a{" "}
+          <Link component={RouterLink} to="/templates">
+            Template
+          </Link>
+          .
+        </PageHeaderSubtitle>
       </PageHeader>
 
       <Stack direction="row" spacing={0} className={styles.filterContainer}>