Removed Info.js and replaced with About.js for clarity. Also added some stylings for FlameLink images using css.

src/components/FlameLinkFieldSetContent.js

@@ -21,11 +21,11 @@ class FlameLinkFieldSetContent extends Component {
                         )
         }
         if(type === 'textarea'){
-            return  (
+                return  (
-                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                        <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
-                    {fieldsetContent[key]}
+                        {fieldsetContent[key]}
-                    </Typography>
+                        </Typography>
-                    )               
+                        ) 
         }
         if (type === 'media'){
             for (var val in fieldsetContent[key]){

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>
         );
     }

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'/>}

src/css/FlameLinkImage.css

@@ -0,0 +1,4 @@
+.flamelinkImage {
+  width: 100%;
+  max-width: 500px;
+}

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;