import React from 'react'
import Colors from '../Theme/Colors'
import AppStyles from '../Theme/AppStyles'
import Header from '../Foundation/Header'
import HelpKeystrokes from './HelpKeystrokes'
import HelpFeedback from './HelpFeedback'

const FEEDBACK = "Let's Connect!"
const KEYSTROKES = 'Keystrokes'
// const pjson = require('../../package.json');

const logoUrl = require('../Theme/Reactotron-128.png')

const Styles = {
  container: {
    ...AppStyles.Layout.vbox,
    margin: 0,
    flex: 1
  },
  content: {
    padding: 20,
    overflowY: 'scroll',
    overflowX: 'hidden',
    ...AppStyles.Layout.vbox
  },
  logoPanel: {
    alignSelf: 'center'
  },
  logo: {
    alignSelf: 'center',
    height: 128,
    marginTop: 20,
    marginBottom: 20
  },
  title: {
    fontSize: 18,
    marginTop: 10,
    marginBottom: 10,
    color: Colors.foregroundLight,
    paddingBottom: 2,
    borderBottom: `1px solid ${Colors.highlight}`
  }
}

const Help = () => (
  <div style={Styles.container}>
    <Header title={`Using Reactotron`} />
    <div style={Styles.content}>
      <div style={Styles.logoPanel}>
        <img src={logoUrl} style={Styles.logo} />
      </div>

      <div style={Styles.title}>{FEEDBACK}</div>
      <HelpFeedback />

      <div style={Styles.title}>{KEYSTROKES}</div>
      <HelpKeystrokes />
    </div>
  </div>
)

export default Help

import React from 'react'
import Colors from '../Theme/Colors'
import AppStyles from '../Theme/AppStyles'
import Header from '../Foundation/Header'
import HelpKeystrokes from './HelpKeystrokes'
import HelpFeedback from './HelpFeedback'

const FEEDBACK = "Let's Connect!"
const KEYSTROKES = 'Keystrokes'
const pjson = require('../../package.json');

const logoUrl = require('../Theme/Reactotron-128.png')

const Styles = {
  container: {
    ...AppStyles.Layout.vbox,
    margin: 0,
    flex: 1
  },
  content: {
    padding: 20,
    overflowY: 'scroll',
    overflowX: 'hidden',
    ...AppStyles.Layout.vbox
  },
  logoPanel: {
    alignSelf: 'center'
  },
  logo: {
    alignSelf: 'center',
    height: 128,
    marginTop: 20,
    marginBottom: 20
  },
  title: {
    fontSize: 18,
    marginTop: 10,
    marginBottom: 10,
    color: Colors.foregroundLight,
    paddingBottom: 2,
    borderBottom: `1px solid ${Colors.highlight}`
  }
}

const Help = () => (
  <div style={Styles.container}>
    <Header title={`Using Reactotron ${pjson.version}`} />
    <div style={Styles.content}>
      <div style={Styles.logoPanel}>
        <img src={logoUrl} style={Styles.logo} />
      </div>

      <div style={Styles.title}>{FEEDBACK}</div>
      <HelpFeedback />

      <div style={Styles.title}>{KEYSTROKES}</div>
      <HelpKeystrokes />
    </div>
  </div>
)

export default Help

Fix version number on help page