+
diff --git a/statusboard/src/components/App/App.scss b/statusboard/src/components/App/App.scss
new file mode 100644
index 00000000..23ace6bc
--- /dev/null
+++ b/statusboard/src/components/App/App.scss
@@ -0,0 +1,5 @@
+#App {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
\ No newline at end of file
diff --git a/statusboard/src/components/Footer/Footer.scss b/statusboard/src/components/Footer/Footer.scss
new file mode 100644
index 00000000..50a0caf0
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/statusboard/src/components/Footer/Footer.test.tsx b/statusboard/src/components/Footer/Footer.test.tsx
new file mode 100644
index 00000000..6d667d88
--- /dev/null
+++ b/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:
', () => {
+ it('should contain a link to open a bug report', function () {
+ const { getByText } = render(
);
+ 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(
);
+ 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='
+ );
+ });
+});
diff --git a/statusboard/src/components/Footer/Footer.tsx b/statusboard/src/components/Footer/Footer.tsx
new file mode 100644
index 00000000..aafe500f
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/statusboard/src/components/PageContents/PageContents.css b/statusboard/src/components/PageContents/PageContents.css
index 6dd09f2f..bc9c8684 100644
--- a/statusboard/src/components/PageContents/PageContents.css
+++ b/statusboard/src/components/PageContents/PageContents.css
@@ -1,6 +1,6 @@
.contents {
- display: block;
- padding: 3rem 5vw 0 5vw;
+ flex: 1;
+ padding: 3rem 5vw 3rem 5vw;
}
.text-content {
diff --git a/statusboard/src/index.scss b/statusboard/src/index.scss
index 54bc7ee0..2d1205b7 100644
--- a/statusboard/src/index.scss
+++ b/statusboard/src/index.scss
@@ -10,7 +10,6 @@ body {
margin: 0;
padding: 0;
font-size: 1.25rem;
- padding-bottom: 3rem;
}
a {