what

App.css

@@ -38,22 +38,38 @@
   flex-shrink: 0;
   position: fixed;
   height: 100vh;
+  display: flex;
+  flex-direction: row;
+
+}
+
+.horizontal_bars .toolbox .tool_icon_bar{
+  width: 48px;
+  background: #F1F1F1 0% 0% no-repeat padding-box;
+  box-shadow: 1px 0px 1px rgb(0, 0, 0,0.16);
+
+}
+
+.horizontal_bars .toolbox .moduleBar{
 
 }
 
  .horizontal_bars .sidebar{
   width: 311px;
-  background: #F1F1F1;
   z-index: 1;
 
   flex-shrink: 0;
   position: fixed;
   right: 0;
   height: 100vh;
+  background: #F1F1F1 0% 0% no-repeat padding-box;
+opacity: 1;
 
 }
 
 
+
+
 .playground{
   margin-top: 20px;
   height: 100vh;

App.js

@@ -71,7 +71,8 @@ export default class App extends React.Component {
         </div>
         <div className="horizontal_bars">
           <div ref={this.toolboxRef} className="toolbox">
-            {this.GUI.renderToolBox()}
+            <div className="tool_icon_bar">{this.GUI.renderToolBox()}</div>
+            <div className="moduleBar">{this.GUI.renderModuleBar()}</div>
           </div> 
           <div className="sidebar">
             {this.GUI.renderSideBar()}
@@ -131,13 +132,6 @@ const styles = StyleSheet.create({
   },
 
 
-  attributesView: {
-    width:256, 
-    alignSelf: 'stretch',
-    flexDirection: 'column',
-    backgroundColor:'blue'
-  }
-
 
 
 

Systems/Gui.js

@@ -7,7 +7,7 @@ import {StyleSheet, View, Text} from 'react-native';
 import Library from 'trapilib/dist/lib';
 import SideBar from './SideBar';
 import MainBar from  './MainBar';
-
+import ModuleBar from './ModuleBar';
 
 
 let {
@@ -18,6 +18,7 @@ let {
 
 export default class Gui {
 	constructor(phone , toolbox) {
+    this.ModuleBar = new ModuleBar();
 		this.Keyboard = new Keyboard();
     this.phone = phone;
     this.toolbox = toolbox;
@@ -143,6 +144,14 @@ export default class Gui {
 	     	</View>)
   	}
 
+    renderModuleBar(){
+      return (
+        <View>
+          {this.ModuleBar.render()}
+        </View>
+        )
+    }
+
 
 }
 
@@ -197,7 +206,6 @@ const styles = StyleSheet.create({
     width:256, 
     alignSelf: 'stretch',
     flexDirection: 'column',
-    backgroundColor:'blue'
   }
 
 

Systems/ModuleBar.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {StyleSheet, View, Text , Button} from 'react-native';
+
+import { TextInput } from 'react-native';
+
+
+export default class ModuleBar {
+	constructor(){
+
+	}
+
+	render(){
+		return(
+			<Text> This is the Module Bar</Text>
+			)
+	}
+}

Systems/ToolBox.js

@@ -72,11 +72,10 @@ export default class ToolBox{
 /** Must be remove from here**/
 const styles = StyleSheet.create({
 	tool:{
-		backgroundColor: 'gray',
-		padding: 10
+		padding: 5
 	},
 	activeTool:{
 		backgroundColor:'green',
-		padding: 10
+		padding: 5
 	}
 })

Tools/InsertForm.js

@@ -16,7 +16,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     borderWidth: 1,
     borderColor: '#d6d7da',
-    backgroundColor: 'blue',
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -52,20 +51,15 @@ export default class InsertForm extends Tool{
 
 	render(){
 		return(
-			<View style={mStyle.container}>
+			<View>
 				<Button 
 				title={<Icon  name='comment'
+				color="#606060"
 	  				/>}
 				/>
-				<Text>Insert Text</Text>
+				
 			</View>
 			)
 	}
 }
 
-const mStyle = StyleSheet.create({
-	container:{
-		flex:1,
-		flexDirection:'row'
-	}
-})

Tools/add.js

@@ -16,20 +16,16 @@ export default class Add extends Tool{
 
 	render(){
 		return(	
-			<View style={mStyle.container}>
-				<Button 
+			<View style={{backgroundColor:"red"}}>
+				<Button style={{backgroundColor:"red"}}
 				title={<Icon  name='add'
+				color="#606060"
+
 	  				/>}
 				/>
-				<Text>Add Item</Text>
+			
 			</View>
 			)
 	}
 }
 
-const mStyle = StyleSheet.create({
-	container:{
-		flex:1,
-		flexDirection:'row'
-	}
-})

Tools/select.js

@@ -76,8 +76,8 @@ export default class Select extends Tool{
 		return(
 			<View styles={mStyle.container}>
 				<Button title={<Icon  name='sc-telegram'
-	  				type='evilicon'/>}/>
-	  			<Text> Select</Text>
+	  				type='evilicon'
+	  				color="#606060"/>}/>
 			</View>
 		)
 	}