Layoutupdates

client/src/components/Footer/Footer.css

@@ -0,0 +1,42 @@
+.Footer {
+    height: 300px;
+    border-top: 1px solid #e0e0e0;
+    padding-top: 35px;
+    background-image: url("https://static.skillshare.com/uploads/project/553fecf24f7dccf3168d92d7eca7d200/094d94fa");
+    font-size: 38px;
+   text-shadow: 1px 5px 2px rgba(150, 150, 150, 1);
+}
+
+
+h1, h2{
+
+	text-shadow: 1px 5px 2px rgba(150, 150, 150, 1);
+}
+
+a{
+	color: #FF4081;
+
+}
+
+/*a:hover{
+
+
+}*/
+
+.infobox{
+
+	font-family: 'Roboto', sans-serif;
+	/*text-align: center;*/
+}
+
+/*information in the list for the Build page */
+.infolist{
+
+	font-family: 'Roboto', sans-serif;
+}
+
+li, p {
+
+font-family: 'Roboto', sans-serif;
+
+}

client/src/components/Footer/Footer.js

@@ -0,0 +1,26 @@
+import React, {
+    Component
+} from 'react';
+import "./Footer.css";
+
+
+class Footer extends Component {
+
+    render() {
+        return (
+
+
+            <div className="Footer">
+  <div className="mui-container mui--text-center">
+    Made by <a href="#">Team Chain-React.ion</a>
+  </div>
+</div>
+
+
+        );
+
+    }
+
+}
+
+export default Footer;

client/src/components/Footer/index.js

@@ -0,0 +1 @@
+export { default } from "./Footer";

client/src/components/Newcompomenu/Newcompomenu.js

@@ -1,34 +1,41 @@
-import React from 'react';
+import React, { Component } from 'react';
 import Drawer from 'material-ui/Drawer';
 import AppBar from 'material-ui/AppBar';
-import RaisedButton from 'material-ui/RaisedButton';
+import MenuItem from 'material-ui/MenuItem';;
+//import RaisedButton from 'material-ui/RaisedButton';
 
 /*this will be the menu where people can select their components' styling*/
-class Newcompomenu extends React.Component {
+/*is the mouseover event the right one for this...it seems to be closing */
+ class Newcompomenu extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            open: false
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {open: true};
+  }
 
-    handleToggle = () => this.setState({
-        open: !this.state.open
-    });
+  handleToggle = () => this.setState({open: !this.state.open});
 
-    render() {
-        return (
-            <div>
-        <RaisedButton
-          label="Styling" fullWidth={false}    onClick={this.handleToggle}
-        />
-        <Drawer width={400} openPrimary={true} open={this.state.open} >
-          <AppBar title="Styling Bench" />
+  handleClose = () => this.setState({open: false});
+
+  render() {
+    return (
+      <div>
+
+        <Drawer
+          docked={false}
+          width={200}
+          open={this.state.open}
+          onRequestChange={(open) => this.setState({open})}
+        >
+          <MenuItem onMouseOver={this.handleToggle}>Style Option</MenuItem>
+          <MenuItem onMouseOver={this.handleToggle}>Style Option</MenuItem>
+          <MenuItem onMouseOver={this.handleToggle}>Style Option</MenuItem>
+          <MenuItem onMouseOver={this.handleToggle}>Style Option</MenuItem>
+          <MenuItem onMouseOver={this.handleToggle}>Style Option</MenuItem>
         </Drawer>
       </div>
-        );
-    }
+    );
+  }
 }
 
 export default Newcompomenu;

client/src/pages/about/Aboutpage.js

@@ -1,24 +1,28 @@
 import React from "react";
 import Backgroundimage from "../../components/backgroundimage";
-//import Footer 
+import Footer from "../../components/Footer";
 
 const Aboutpage = () =>
   <div>
     <Backgroundimage src={"https://static.skillshare.com/uploads/project/553fecf24f7dccf3168d92d7eca7d200/094d94fa"} />
       <h1>FISSION</h1>
       <h2>Making Your Components, Easier</h2>
-
-          <p>
-            ABOUT PAGE WOOOO~
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-            aliquet diam tortor, id consequat mauris ullamcorper eu. Orci varius
-            natoque penatibus et magnis dis parturient montes, nascetur
-            ridiculus mus. Pellentesque et dui id justo finibus sollicitudin at
-            et metus. Ut feugiat tellus nec metus commodo, sed suscipit nisi
-            gravida. Duis eget vestibulum quam, ut porttitor sem. Donec sagittis
-            mi sollicitudin turpis semper, et interdum risus lobortis.
-          </p>
-
+       <div className="infobox">
+          <p>Welcome to Fission! This application will generate react component based on old-fashion html markups. Insert any html component you like and it will return a React component file and its css file.</p>
+      <p>On the Build page insert your html markups. Currently you can give compiling configuration inline style as tag properties. These options are supported:</p>
+      <ul className="infolist">
+        <li>name (file name)</li>
+        <li>component (stateful || stateless)</li>
+        <li>group (group component into its own folder)</li>
+        <li>style (any css markup)</li>
+        <li>expand (shallow || deep)</li>
+      </ul>
+      <p>Nesting html is supported but this is still a prototype there might be some errors when generating components nesting component</p>
+  </div>          
+
+
+          <Footer />
+
   </div>;
 
 export default Aboutpage;

client/src/pages/canvas/Canvaspage.js

@@ -1,10 +1,5 @@
 import React, { Component } from 'react';
 import Container from "reactstrap/lib/Container";
-//import Grid from "reactstrap/lib/Grid";
-//import Col from "reactstrap/lib/Col";
-//import Row from "reactstrap/lib/Row";
-//import NavbarBrandNew from "../components/Navbar";
-//import Sidebarmenunew from "../../components/Sidebarmenunew";
 import Newcompomenu from "../../components/Newcompomenu";
 import FissionButton from "../../components/FissionButton";
 import Previewdisplay from "../../components/Displaycode";
@@ -14,6 +9,8 @@ import CodeEditor from "../../components/Editor";
 import ReactDOM from 'react-dom';
 import { Draggable, Droppable } from 'react-drag-and-drop';
 import RaisedButton from "material-ui/RaisedButton";
+
+
 class Canvaspage extends Component {
 
 showData =()=> this.setState({
@@ -32,9 +29,9 @@ onDrop(data){
 
     <Container>
           <p>
- Your Reactor page, a space to preview and style your final 
- selected components before saving a "fission file" 
- of your work, with the button below
+ This is your Reactor, a space to preview and style your final 
+ selected components before saving a "Fission file" 
+ of your work with the Fission Button Below.  
           </p>
 
           <div className ="row"> 

client/src/pages/reactor/Reactorpage.js

@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
 //import Draggable from 'react-draggable'; // The default
 import { Draggable, Droppable } from 'react-drag-and-drop';
 import RaisedButton from "material-ui/RaisedButton";
- import "./Reactorpage.css";
+ //import "./Reactorpage.css";
 import CodeEditor from "../../components/Editor";
 
 //make a bunch of buttons with this data and label them like drag and drop menu?