Refactor

src/components/Layout/Layout.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import styles from './Layout.scss';
+
+class Layout extends React.Component {
+  static propTypes = {
+
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.header }>
+          <div className={ styles.teamName }>Coinbase</div>
+          <div className={ styles.user }>
+            <img src={ this.props.avatarUrl } />
+          </div>
+        </div>
+        <div className={ styles.content }>
+          { this.props.children }
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    avatarUrl: state.user ? state.user.avatarUrl : null,
+  }
+};
+
+export default connect(mapStateToProps)(Layout);

src/components/Layout/Layout.scss

@@ -0,0 +1,35 @@
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+
+  height: 42px;
+  border-bottom: 1px solid #eee;
+}
+
+.teamName {
+  font-family: 'Atlas Grotesk';
+  font-weight: bold;
+}
+
+.user {
+
+  img {
+    height: 24px;
+    width: 24px;
+    border-radius: 12px;
+  }
+}
+
+.content {
+  flex: 1;
+}

src/components/Layout/index.js

@@ -0,0 +1,2 @@
+import Layout from './Layout';
+export default Layout;