ui: first pass on redesign (#228)

src/pages/about.tsx

@@ -4,6 +4,8 @@ import { MarkdownRemark } from "../../generated/graphql"
 import { ComponentQuery } from "../../typings"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
+import { PageContent } from "../components/PageContent"
+import { HeaderBarebone } from "../components/HeaderBarebone"
 
 function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   const { md } = data
@@ -11,7 +13,9 @@ function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   return (
     <Fragment>
       <SEO title="About" />
-      <Markdown content={md.html!} />
+      <HeaderBarebone title="About us" />
+
+      <PageContent content={<Markdown content={md.html!} />} />
     </Fragment>
   )
 }

src/pages/archives/index.tsx

@@ -1,18 +1,26 @@
 import React, { Fragment } from "react"
 
+import { HeaderBarebone } from "../../components/HeaderBarebone"
 import { Link } from "../../components/Link"
+import { PageContent } from "../../components/PageContent"
 import { SEO } from "../../components/SEO"
 
 function ArchivesPage() {
   return (
     <Fragment>
       <SEO title="Tech Spotlights Archives" />
-      <p>Welcome to the TPH tech spotlights archives.</p>
-      <p>
-        This regroups the archives of our occasional, temporary channels that
-        cover a piece of technology that might be unknown to part of our users.
-        You can find those on <Link to="/about">The Programmer's Hangout</Link>.
-      </p>
+      <HeaderBarebone title="Welcome to the TPH tech spotlights archives." />
+
+      <PageContent
+        content={
+          <p>
+            This regroups the archives of our occasional, temporary channels
+            that cover a piece of technology that might be unknown to part of
+            our users. You can find those on{" "}
+            <Link to="/about">The Programmer's Hangout</Link>.
+          </p>
+        }
+      />
     </Fragment>
   )
 }

src/pages/resources/index.tsx

@@ -1,26 +1,35 @@
-import React, { Fragment } from "react"
+import React from "react"
 
 import packageJson from "../../../package.json"
+import { HeaderBarebone } from "../../components/HeaderBarebone"
 import { Link } from "../../components/Link"
+import { PageContent } from "../../components/PageContent"
 import { ResourcesList } from "../../components/ResourcesList"
 import { SEO } from "../../components/SEO"
 
 function ResourcesPage() {
   return (
-    <Fragment>
+    <>
       <SEO title="Resources" />
-      <p>Welcome to the TPH resources.</p>
-      <p>
-        This is meant as a small knowledge base for commonly answered questions
-        on our Discord community,{" "}
-        <Link to="/about">The Programmer's Hangout</Link>.
-      </p>
-      <p>
-        All of it is open source, and you can contribute to it on{" "}
-        <Link to={packageJson.repository.url}>GitHub</Link>.
-      </p>
-      <ResourcesList />
-    </Fragment>
+      <HeaderBarebone
+        title="Welcome to the TPH resources"
+        content={
+          <>
+            <p>
+              This is meant as a small knowledge base for commonly answered
+              questions on our Discord community,{" "}
+              <Link to="/about">The Programmer's Hangout</Link>.
+            </p>
+            <p>
+              All of it is open source, and you can contribute to it on{" "}
+              <Link to={packageJson.repository.url}>GitHub</Link>.
+            </p>
+          </>
+        }
+      />
+
+      <PageContent content={<ResourcesList />} />
+    </>
   )
 }
 

src/pages/rules.tsx

@@ -2,7 +2,9 @@ import { graphql } from "gatsby"
 import React, { Fragment } from "react"
 import { MarkdownRemark } from "../../generated/graphql"
 import { ComponentQuery } from "../../typings"
+import { HeaderBarebone } from "../components/HeaderBarebone"
 import { Markdown } from "../components/Markdown"
+import { PageContent } from "../components/PageContent"
 import { SEO } from "../components/SEO"
 
 function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
@@ -11,7 +13,9 @@ function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   return (
     <Fragment>
       <SEO title="Rules" />
-      <Markdown content={md.html!} />
+      <HeaderBarebone title="Rules" />
+
+      <PageContent content={<Markdown content={md.html!} />} />
     </Fragment>
   )
 }