Typed Sass Styling (#69)

* Addresses issue #16 -
Add styles via sass and module imports
Adds typed scss imports via gatsby-plugin-sass.
Makes use of .d.scss file generated by gatsby-plugin-scss-typescript,
but avoids importing that directly while they work out issue in gatsby v3.

* adding vscode config for easier local debugging

client/src/components/J40footer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Footer } from '@trussworks/react-uswds';
+import {Link} from 'gatsby';
+
+const footerLinks = [
+    <Link to="/">Home</Link>
+];
+
+const J40Footer = () => {
+    return (
+        <>
+        <Footer primary={[]} secondary={footerLinks} />
+        </>
+    );
+};
+
+export default J40Footer;

client/src/components/J40header.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { GovBanner, Header, Title, PrimaryNav } from '@trussworks/react-uswds';
+import { useStaticQuery, graphql, Link } from "gatsby";
+
+const headerLinks = [
+    <Link to="/">Home</Link>
+];
+
+const J40Header = () => {
+    const data: any = useStaticQuery(graphql`
+      query MyQuery {
+        site {
+          siteMetadata {
+            title
+          }
+        }
+      }
+  `)
+
+  const siteTitle: string = data.site.siteMetadata?.title || `Title`
+    return (
+        <>
+        <GovBanner />
+        <Header>
+            <Title>{siteTitle}</Title>
+            <PrimaryNav items={headerLinks}/>
+        </Header>
+        </>
+    );
+};
+
+export default J40Header;

client/src/components/layout.module.scss

@@ -0,0 +1,9 @@
+.site {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.site-content {
+  flex: 1;
+}

client/src/components/layout.module.scss.d.ts

@@ -0,0 +1,13 @@
+declare namespace LayoutModuleScssNamespace {
+  export interface ILayoutModuleScss {
+    site: string;
+    siteContent: string;
+  }
+}
+
+declare const LayoutModuleScssModule: LayoutModuleScssNamespace.ILayoutModuleScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: LayoutModuleScssNamespace.ILayoutModuleScss;
+};
+
+export = LayoutModuleScssModule;

client/src/components/layout.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import * as styles from './layout.module.scss';
+import J40Header from './J40Header';
+import J40Footer from "./J40Footer";
+interface ILayoutProps {
+  children: ReactNode
+}
+
+const Layout = ({ children }: ILayoutProps) => {
+  return (
+      <div className={styles.site}>
+        <J40Header />
+        <div className={styles.siteContent}>{children}</div>
+        <J40Footer />
+      </div>
+  );
+};
+
+export default Layout;

client/src/pages/index.tsx

@@ -1,15 +1,11 @@
 import * as React from "react"
-import {GovBanner} from '@trussworks/react-uswds';
+import Layout from '../components/layout';
 
 // markup
-const IndexPage = () => {
+export default function IndexPage() {
   return (
-      <main>
-        <GovBanner />
+      <Layout>
         <title>Justice40</title>
-        <h1>Justice40</h1>
-      </main>
+      </Layout>
   )
-}
-
-export default IndexPage;
+}