Add Support component

3 files changed, 114 insertions, 0 deletions

diff --git a/app/components/Support.css b/app/components/Support.css
new file mode 100644
index 0000000000..218371f6dd
--- /dev/null
+++ b/app/components/Support.css
@@ -0,0 +1,60 @@
+.support {
+  background: #192E45;
+  height: 100%;
+}
+
+.support__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.support__header {
+  flex: 0 0 auto;
+  padding: 40px 24px 24px;
+  position: relative; /* anchor for close button */
+}
+
+.support__close {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  top: 24px;
+  left: 12px;
+  z-index: 1; /* part of .support__container convers the button */
+
+}
+
+.support__close-icon {
+  opacity: 0.6;
+  margin-right: 8px;
+}
+
+.support__close-title {
+  font-family: "Open Sans";
+	font-size: 13px;
+	font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.support__title {
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: #FFFFFF;
+}
+
+.support__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.support__main {
+  margin-bottom: 24px;
+}
\ No newline at end of file
diff --git a/app/components/Support.js b/app/components/Support.js
new file mode 100644
index 0000000000..8564c8e51c
--- /dev/null
+++ b/app/components/Support.js
@@ -0,0 +1,39 @@
+// @flow
+import React, { Component } from 'react';
+import { Layout, Container, Header } from './Layout';
+
+export type SupportProps = {
+  onClose: () => void;
+};
+
+export default class Support extends Component {
+  props: SupportProps;
+
+  render() {
+    return (
+      <Layout>
+        <Header hidden={ true } style={ 'defaultDark' } />
+        <Container>
+          <div className="support">
+            <div className="support__close" onClick={ this.props.onClose }>
+              <img className="support__close-icon" src="./assets/images/icon-back.svg" />
+              <span className="support__close-title">Settings</span>
+            </div>
+            <div className="support__container">
+
+              <div className="support__header">
+                <h2 className="support__title">Support</h2>
+              </div>
+
+              <div className="support__content">
+                <div className="support__main">
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}
diff --git a/app/containers/SupportPage.js b/app/containers/SupportPage.js
new file mode 100644
index 0000000000..c35aa50ade
--- /dev/null
+++ b/app/containers/SupportPage.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
+import Support from '../components/Support';
+
+const mapStateToProps = (state) => {
+  return state;
+};
+
+const mapDispatchToProps = (dispatch, _props) => {
+  return {
+    onClose: () => dispatch(push('/settings'))
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Support);