feat: add FAQ page (#105)

* feat: faq page

* feat: faq

* reactor: review changes

* fix: minor styling details

src/components/background/index.js

@@ -5,10 +5,10 @@ import injectSheet from 'react-jss';
 
 const styles = theme => ({
   wrapper: {
-    height: '100vh',
-    width: '100vw',
+    flex: 1,
     backgroundImage: 'linear-gradient(to bottom, #114357, #f29492)',
     flexDirection: 'column',
+    overflowY: 'auto',
   },
   boltz: {
     color: theme.colors.white,
@@ -30,7 +30,6 @@ const BackGround = ({ classes, children }) => (
     <span className={classes.boltz}>#reckless</span>
   </View>
 );
-
 BackGround.propTypes = {
   classes: PropTypes.object,
   children: PropTypes.node,

src/components/container/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import View from '../view';
 import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
 
@@ -10,9 +11,9 @@ const styles = () => ({
 });
 
 const Container = ({ classes, children, style }) => (
-  <div className={classes.wrapper} style={style ? style : undefined}>
+  <View className={classes.wrapper} style={style ? style : undefined}>
     {children}
-  </div>
+  </View>
 );
 
 Container.propTypes = {

src/components/nodeinfo/index.js

@@ -4,35 +4,42 @@ import injectSheet from 'react-jss';
 import View from '../view';
 import QrCode from '../qrcode';
 
-const styles = () => ({
-  node: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexDirection: 'column',
+const styles = theme => ({
+  wrapper: {
+    height: '300x',
+    width: '700px',
     justifyContent: 'center',
-    margin: '120px',
+    alignItems: 'center',
+    padding: '20px',
   },
-  name: {
-    marginBottom: '0px',
+  NodeInfo: {
+    flexDirection: 'column',
   },
   uri: {
-    flexWrap: 'wrap',
-    fontSize: '15px',
+    overflowWrap: 'anywhere',
     wordBreak: 'break-all',
+    fontSize: '18px',
+    color: theme.colors.tundoraGrey,
   },
-  qr: {
-    flexWrap: 'wrap',
+  name: {
+    fontSize: '25px',
+    fontWeight: 'bold',
+    marginBottom: '10px',
+    color: theme.colors.black,
   },
 });
 
-const NodeInfo = ({ classes, size, name, uri }) => (
-  <View className={classes.node}>
-    <h3 className={classes.name}>{name}:</h3>
-    <QrCode className={classes.qr} size={size} link={uri} />
-    <code className={classes.uri}>{uri}</code>
-  </View>
-);
+const NodeInfo = ({ classes, size, name, uri }) => {
+  return (
+    <View className={classes.wrapper}>
+      <View className={classes.NodeInfo}>
+        <span className={classes.name}>{name}:</span>
+        <code className={classes.uri}>{uri}</code>
+      </View>
+      <QrCode className={classes.qr} size={size} link={uri} />
+    </View>
+  );
+};
 
 NodeInfo.propTypes = {
   classes: PropTypes.object.isRequired,

src/components/qrcode/index.js

@@ -7,9 +7,9 @@ class QrCode extends React.Component {
 
   componentDidMount() {
     const { size, link } = this.props;
-
+    const element = document.getElementById(this.id);
     this.qr = new Qrious({
-      element: document.getElementById(this.id),
+      element,
     });
 
     this.qr.set({

src/components/question/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import View from '../view';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+
+const styles = theme => ({
+  wrapper: {
+    height: 'auto',
+    width: p => p.width,
+    flexDirection: 'column',
+    backgroundColor: theme.colors.white,
+    margin: '20px',
+    marginTop: '10px',
+    marginBottom: '10px',
+    padding: '10px',
+  },
+  title: {
+    color: theme.colors.black,
+    fontSize: '25px',
+    fontWeight: 'bold',
+    fontStyle: 'normal',
+    fontStretch: 'condensed',
+    lineHeight: 'normal',
+    letterSpacing: 'normal',
+  },
+  content: {
+    fontSize: '20px',
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontStretch: 'condensed',
+    lineHeight: 'normal',
+    letterSpacing: 'normal',
+    color: theme.colors.tundoraGrey,
+  },
+});
+
+const Question = ({ classes, title, content }) => (
+  <View className={classes.wrapper}>
+    {title(classes.title)}
+    {content(classes.content)}
+  </View>
+);
+
+Question.propTypes = {
+  classes: PropTypes.object,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.func.isRequired,
+  width: PropTypes.any,
+};
+
+export default injectSheet(styles)(Question);

src/components/taskbar/index.js

@@ -9,7 +9,7 @@ const boltz_logo = require('../../asset/icons/boltz_logo.png');
 const styles = theme => ({
   wrapper: {
     height: 'auto',
-    width: '100vw',
+    width: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
   },

src/constants/theme/colors.js

@@ -11,6 +11,7 @@ const colors = {
   hoverGrey: '#9D9D9D',
   white: '#fff',
   red: '#FF0000',
+  black: '#000',
 };
 
 export default colors;