Add footer

statusboard/src/components/App/App.js

@@ -3,16 +3,19 @@ import AppRouter from '../AppRouter/AppRouter';
 import Header from '../Header/Header';
 import PageContents from '../PageContents/PageContents';
 import { BrigadeDataContextProvider } from '../../contexts/BrigadeDataContext';
+import Footer from '../Footer/Footer';
 import { TaxonomyDataContextProvider } from '../../contexts/TaxonomyDataContext';
+import './App.scss';
 
 function App() {
   return (
-    <div className="App">
+    <div id="App">
       <TaxonomyDataContextProvider>
       <BrigadeDataContextProvider>
         <AppRouter>
           <Header />
           <PageContents />
+          <Footer />
         </AppRouter>
       </BrigadeDataContextProvider>
       </TaxonomyDataContextProvider>

statusboard/src/components/App/App.scss

@@ -0,0 +1,5 @@
+#App {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}

statusboard/src/components/Footer/Footer.scss

@@ -0,0 +1,23 @@
+.App-footer {
+  width: 100%;
+  min-height: 5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 1.25rem;
+  background-color: var(--cfa-purple-dark);
+
+  p {
+    color: var(--cfa-white);
+    font-family: var(--font-family-text);
+    margin-left: 1.0rem;
+    margin-right: 1.0rem;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .p {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+}

statusboard/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Footer from './Footer';
+
+describe('Footer: <Footer />', () => {
+  it('should contain a link to open a bug report', function () {
+    const { getByText } = render(<Footer />);
+    expect(getByText('bug report').closest('a')).toHaveAttribute(
+      'href',
+      'https://github.com/codeforamerica/brigade-project-index-statusboard/issues/new?assignees=&labels=&template=bug_report.md&title='
+    );
+  });
+
+  it('should contain a link to open a feature request', function () {
+    const { getByText } = render(<Footer />);
+    expect(getByText('feature request').closest('a')).toHaveAttribute(
+      'href',
+      'https://github.com/codeforamerica/brigade-project-index-statusboard/issues/new?assignees=&labels=&template=feature_request.md&title='
+    );
+  });
+});

statusboard/src/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import './Footer.scss';
+
+const submitBugReport =
+  'https://github.com/codeforamerica/brigade-project-index-statusboard/issues/new?assignees=&labels=&template=bug_report.md&title=';
+const submitFeatureRequest =
+  'https://github.com/codeforamerica/brigade-project-index-statusboard/issues/new?assignees=&labels=&template=feature_request.md&title=';
+const githubRepository =
+  'https://github.com/codeforamerica/brigade-project-index-statusboard';
+
+export default function Footer(): JSX.Element {
+  return (
+    <footer className="App-footer">
+      <p>
+        Submit a <a href={submitBugReport}>bug report</a> or{' '}
+        <a href={submitFeatureRequest}>feature request</a> to our GitHub{' '}
+        <a href={githubRepository}>repository</a>
+      </p>
+    </footer>
+  );
+}

statusboard/src/components/PageContents/PageContents.css

@@ -1,5 +1,5 @@
 .contents {
-  display: block;
+  flex: 1;
   padding: 3rem 5vw 0 5vw;
 }
 

statusboard/src/index.scss

@@ -10,7 +10,6 @@ body {
   margin: 0;
   padding: 0;
   font-size: 1.25rem;
-  padding-bottom: 3rem;
 }
 
 a {