From 31a5887b7bf4bf25f4f093f2a38ca096d0e62070 Mon Sep 17 00:00:00 2001
From: ajmaley <maleya@mail.gvsu.edu>
Date: Mon, 12 Nov 2018 19:03:00 -0500
Subject: [PATCH] Removed Info.js and replaced with About.js for clarity. Also
 added some stylings for FlameLink images using css.

---
 src/components/FlameLinkFieldSetContent.js | 10 +++----
 src/components/FlameLinkImage.js           |  4 +--
 src/components/Main.js                     |  4 +--
 src/css/FlameLinkImage.css                 |  4 +++
 src/pages/About.js                         | 34 ++++++++++++++++++++++
 5 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 src/css/FlameLinkImage.css
 create mode 100644 src/pages/About.js

diff --git a/src/components/FlameLinkFieldSetContent.js b/src/components/FlameLinkFieldSetContent.js
index 61db810..b8b4514 100644
--- a/src/components/FlameLinkFieldSetContent.js
+++ b/src/components/FlameLinkFieldSetContent.js
@@ -21,11 +21,11 @@ class FlameLinkFieldSetContent extends Component {
                         )
         }
         if(type === 'textarea'){
-            return  (
-                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
-                    {fieldsetContent[key]}
-                    </Typography>
-                    )               
+                return  (
+                        <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                        {fieldsetContent[key]}
+                        </Typography>
+                        ) 
         }
         if (type === 'media'){
             for (var val in fieldsetContent[key]){
diff --git a/src/components/FlameLinkImage.js b/src/components/FlameLinkImage.js
index aede55f..0a474f4 100644
--- a/src/components/FlameLinkImage.js
+++ b/src/components/FlameLinkImage.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import flamelinkApp from '../flamelink.js';
-
+import '../css/FlameLinkImage.css';
 
 class FlameLinkImage extends Component {
     constructor() {
@@ -20,7 +20,7 @@ class FlameLinkImage extends Component {
     render() {
         return(
                 <Typography align='center'>
-                    <img src={this.state.mediaURL} width="70%" alt='' />
+                    <img src={this.state.mediaURL} className='flamelinkImage' alt='' />
                 </Typography>
         );
     }
diff --git a/src/components/Main.js b/src/components/Main.js
index 8ecb20a..d64d8bf 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -21,7 +21,7 @@ import ListIcon from '@material-ui/icons/List';
 import SlideshowIcon from '@material-ui/icons/Slideshow';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
-import Info from '../pages/Info';
+import About from '../pages/About';
 import Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
@@ -195,7 +195,7 @@ class ResponsiveDrawer extends React.Component {
                     {this.state.key === 'Report' && <Report />}
                     {this.state.key === 'Map' && <ViewMap />}
                     {this.state.key === 'List' && <SightingList />}
-                    {this.state.key === 'About' && <Info />}
+                    {this.state.key === 'About' && <About />}
                     {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                     {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
                     {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
diff --git a/src/css/FlameLinkImage.css b/src/css/FlameLinkImage.css
new file mode 100644
index 0000000..7abf189
--- /dev/null
+++ b/src/css/FlameLinkImage.css
@@ -0,0 +1,4 @@
+.flamelinkImage {
+  width: 100%;
+  max-width: 500px;
+}
diff --git a/src/pages/About.js b/src/pages/About.js
new file mode 100644
index 0000000..1eb02c6
--- /dev/null
+++ b/src/pages/About.js
@@ -0,0 +1,34 @@
+import React, { Component, Fragment } from 'react';
+import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import flamelinkApp from '../flamelink.js';
+
+class About extends Component {
+    constructor() {
+        super();
+
+        global.schemaName = 'martenSchemaDemo';
+
+        this.state = {
+          schemaDetails: '',
+        }
+
+        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
+        .then(result => this.setState({
+          schemaDetails: result
+        }))
+      }
+
+    render() {
+        
+        return (
+            <div>
+                <Fragment>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
+                </Fragment>
+          
+            </div>
+        );
+    }
+}
+
+export default About;