From d879236e672da7cfc16ddf3c91af26781f8a9d23 Mon Sep 17 00:00:00 2001
From: WildScotsmen <thewildscotsmen@gmail.com>
Date: Mon, 10 Dec 2018 17:25:42 -0500
Subject: [PATCH] Added paper to collections.

---
 .../FlameLinkCollectionComponentCreations.js  | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/flamelink/FlameLinkCollectionComponentCreations.js b/src/components/flamelink/FlameLinkCollectionComponentCreations.js
index 1611c80..587913d 100644
--- a/src/components/flamelink/FlameLinkCollectionComponentCreations.js
+++ b/src/components/flamelink/FlameLinkCollectionComponentCreations.js
@@ -1,25 +1,48 @@
-import React, { Component} from 'react';
+import React, { Component } from 'react';
 import Grid from '@material-ui/core/Grid';
 import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme => ({
+    root: {
+        ...theme.mixins.gutters(),
+        margin: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 2,
+        paddingBottom: theme.spacing.unit * 2,
+        width: '100%'
+    },
+});
 
 class FlameLinkCollectionComponentCreations extends Component {
 
-    createCollectionEntries(schemaData, schemaContent, arr){
+    createCollectionEntries(schemaData, schemaContent, arr) {
         var collectionInfo = [schemaData, schemaContent];
         return arr.map(this.createCollectionComponents, collectionInfo);
     }
 
-    createCollectionComponents(num){
-        return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+    createCollectionComponents(num) {
+        return (
+            <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+        );
     }
 
     render() {
-        return(
+        const { classes } = this.props;
+
+        return (
+            <Paper className={classes.root} elevation={4}>
                 <Grid container>
                     {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
                 </Grid>
+            </Paper>
         );
     }
 }
 
-export default FlameLinkCollectionComponentCreations;
\ No newline at end of file
+FlameLinkCollectionComponentCreations.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FlameLinkCollectionComponentCreations);
\ No newline at end of file