just text mock up

f0ssel · f0ssel · commit 94d02b2ae225 · 2022-06-08T22:09:54.000Z
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
@@ -32,6 +32,12 @@ 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",
@@ -58,6 +64,15 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(1),
   },
 
+  text: {
+    fontSize: theme.spacing(2),
+    color: theme.palette.text.secondary,
+    fontWeight: 400,
+    display: "block",
+    margin: 0,
+    marginTop: theme.spacing(1),
+  },
+
   actions: {
     marginLeft: "auto",
   },
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -9,7 +9,7 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { FC } from "react"
-import { useNavigate } from "react-router-dom"
+import { useNavigate, Link as RouterLink } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { AvatarData } from "../../components/AvatarData/AvatarData"
 import { CodeExample } from "../../components/CodeExample/CodeExample"
@@ -22,7 +22,7 @@ import {
   HelpTooltipTitle,
 } from "../../components/HelpTooltip/HelpTooltip"
 import { Margins } from "../../components/Margins/Margins"
-import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
+import { PageHeader, PageHeaderText, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
 import { Stack } from "../../components/Stack/Stack"
 import { TableLoader } from "../../components/TableLoader/TableLoader"
 
@@ -84,6 +84,12 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
             <TemplateHelpTooltip />
           </Stack>
         </PageHeaderTitle>
+        {props.templates && props.templates.length > 0 && (
+          <PageHeaderText>
+              Choose a template to create a new workspace.
+          </PageHeaderText>
+        )}
+
       </PageHeader>
 
       <Table>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -33,7 +33,7 @@ import {
   HelpTooltipTitle,
 } from "../../components/HelpTooltip/HelpTooltip"
 import { Margins } from "../../components/Margins/Margins"
-import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
+import { PageHeader, PageHeaderTitle, PageHeaderText } from "../../components/PageHeader/PageHeader"
 import { Stack } from "../../components/Stack/Stack"
 import { TableLoader } from "../../components/TableLoader/TableLoader"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
@@ -133,11 +133,14 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
     <Margins>
       <PageHeader
         actions={
-          <Link underline="none" component={RouterLink} to="/templates">
-            <Button startIcon={<ReplyIcon style={{ transform: "scaleX(-1)" }} />} style={{ height: "44px" }}>
-              {Language.createFromTemplateButton}
-            </Button>
-          </Link>
+          <PageHeaderText>
+            Create a new workspace from a <Link
+              component={RouterLink}
+              to="/templates"
+            >
+              Template
+            </Link>.
+          </PageHeaderText>
         }
       >
         <PageHeaderTitle>
