CSS modules ➡️ Stitches 🧵 (#799)

pages/leo.tsx

@@ -3,9 +3,18 @@ import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import Link from "../components/Link/Link";
 import Video from "../components/Video/Video";
+import { styled } from "../lib/styles/stitches.config";
 
 import thumbnail from "../public/static/images/leo/thumb.png";
 
+const Copyright = styled("p", {
+  textAlign: "center",
+  fontSize: "0.9em",
+  lineHeight: 1.8,
+  margin: "1.25em 1em 0 1em",
+  color: "$mediumLight",
+});
+
 const Leo = () => (
   <>
     <NextSeo
@@ -28,7 +37,7 @@ const Leo = () => (
         subs="/static/images/leo/subs.en.vtt"
       />
 
-      <p className="copyright">
+      <Copyright>
         Video is property of{" "}
         <Link href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/" style={{ fontWeight: 700 }}>
           G4techTV Canada
@@ -38,18 +47,8 @@ const Leo = () => (
           Leo Laporte
         </Link>
         . &copy; 2007 G4 Media, Inc.
-      </p>
+      </Copyright>
     </Content>
-
-    <style jsx>{`
-      .copyright {
-        text-align: center;
-        font-size: 0.9em;
-        line-height: 1.8;
-        margin: 1.25em 1em 0 1em;
-        color: var(--medium-light);
-      }
-    `}</style>
   </>
 );