UI

App.css

@@ -7,26 +7,24 @@
   width: 100%;
 }*/
  .mainbar{
-    z-index: 2;
+    z-index: 1;
     display: flex;
     justify-content: space-between;
-    position: fixed;
     height: 48px;
     background: #F1F1F1;
     top: 0;
     width: 100%;
-    background: #F1F1F1 0% 0% no-repeat padding-box;
-    box-shadow: 0px 1px 1px #000000;
-    opacity: 0.5;
+    border-bottom: 1px solid  rgb(0, 0, 0,0.16);
+    opacity: 1;
 
 }
  .horizontal_bars {
 
- 
+
   display: flex;
   flex-direction: row;
   justify-content:space-between;
-  margin-top: 50px
+
 }
 
  .horizontal_bars .toolbox{
@@ -58,7 +56,7 @@
   z-index: 1;
 
   flex-shrink: 0;
-  position: fixed;
+  position: absolute;
   right: 0;
   height: calc(100vh - 50px);
   background: #F1F1F1 0% 0% no-repeat padding-box;
@@ -81,19 +79,14 @@
   margin:0 auto;
 }
 
- .paegNav{
+ .pageNav{
   background-color: white;
   margin-bottom: 10px;
   margin-left:285px;
- 
-  
-
-
-  height: 48px;
-  background: #F8F8F8 0% 0% no-repeat padding-box;
-  box-shadow: 0px 1px 1px -1px #000000 0.5;
+  height: 47px;
+  background: #F8F8F8 0% 0% no-repeat;
+  width:100%;
+  box-shadow: 0px 1px  0px 0px #F8F8F8;
   opacity: 1;
-  width:70%;
 
-  
-}
+}

App.js

@@ -83,7 +83,7 @@ export default class App extends React.Component {
        
         {/*This is a comment*/}
         <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
-          <div className="paegNav">{  this.GUI.renderPageBar()}</div>
+          <div className="pageNav">{  this.GUI.renderPageBar()}</div>
           <div className="phone">
 
             {this.GUI.mobileRender()}

Systems/Gui.js

@@ -3,7 +3,7 @@ import ToolBox from './ToolBox';
 import Keyboard from './keyboard';
 import Mouse from './mouse';
 import React from 'react';
-import {Dimensions, StyleSheet, View, Text , Button 
+import {Dimensions, StyleSheet, View, Text , Button
 } from 'react-native';
 import { Icon } from 'react-native-elements'
 import Library from 'trapilib/dist/lib';
@@ -49,7 +49,7 @@ export default class Gui extends BaseSystem {
     this.MainBar.onSave( () => {
       this.saveEnv();
       this.forceUpdate()
-    })    
+    })
 
  		this.load();
     // Setup mainContainer
@@ -57,7 +57,7 @@ export default class Gui extends BaseSystem {
     let container = cview.getDefaultContainer();
     let mainContent = new ViewNode(Math.random(), 'BaseContainer', {width: 1125/3, height: 2436/3 - 10});
     cview.setContent(mainContent, container);
-    
+
 
 
   }
@@ -75,7 +75,7 @@ export default class Gui extends BaseSystem {
       .on('LeftDown',(e) => this.ToolManagement(e))
 
       this.phoneMouse.listen()
-      .on('LeftDown',(e) => this.ToolManagement(e))     
+      .on('LeftDown',(e) => this.ToolManagement(e))
       .on('Drop', (e) => this.dropContent(e))
     }
   }
@@ -107,7 +107,7 @@ export default class Gui extends BaseSystem {
       }else{
         this.CoreSystem.import(JSON.parse(env));
       }
-      
+
       this.forceUpdate();
     } catch(e) {
       console.log(e);
@@ -123,7 +123,7 @@ export default class Gui extends BaseSystem {
   dropContent({event, data}) {
     data = JSON.parse(data);
     let Node = this.CoreSystem.ray({event});
-    // Node.content 
+    // Node.content
     Node.props.selected = true;
     console.log(Node, data);
     let node = new ViewNode(Math.random(), data.ctor, {}, data.namespace);
@@ -132,7 +132,7 @@ export default class Gui extends BaseSystem {
 
     this.forceUpdate();
   }
-  
+
 
   mobileRender(){
     return this.Environment.render();
@@ -183,16 +183,20 @@ export default class Gui extends BaseSystem {
             this.CoreSystem.goto(route)
             this.forceUpdate()
           }}>
-            
-            <Text style={PageButtons.text}>{route}</Text>
+            <View style = {{ flex:1,
+           justifyContent:'center',
+          alignItems:'center'}}>
+
+              <Text style={PageButtons.text}>{route}</Text>
+            </View>
           </View>
-         
+
           )
     })
 
     return (
       <View style={PageButtons.container}>
-       <Button 
+       <Button
         color="#F1F1F1"
         title={<Icon  name='filter'
         color="#36BBAD"
@@ -200,13 +204,15 @@ export default class Gui extends BaseSystem {
         }
         />
         {pages}
-       
+
         <View style={PageButtons.addNew}  onClick = {() => this.addFrame()}>
-          <Text >Add new </Text>
-          <Icon color="#606060"  name='add'/>
+          <View style=  {PageButtons.addNewContainer}>
+            <Text style={PageButtons.addNewText}>Add new </Text>
+            <Icon color="white"  name='add'/>
+          </View>
         </View>
-        
-      
+
+
       </View>);
 
 
@@ -228,35 +234,45 @@ const PageButtons = StyleSheet.create({
     color:"white"
   },
   text:{
-    flex:1,
-    justifyContent:"center",
-    alignItems:"center",
     fontSize:16,
     letterSpacing: 0,
     color: '#D9D9D9',
     opacity: 1,
   },
   page:{
-    padding:' 0 30px 0 25px',
-    borderColor:"white",
-    borderColor:'black',
+
+
+    borderRightWidth:"1px",
+		borderColor:"#B4b4b4",
+		
     backgroundColor:"#FFFFFF",
     cursor:'pointer',
     textAlign:"center",
-    position : "relative",
     overflow:'hidden',
-    display:'inline-block',
     width:160,
     height:49,
-    textcolor:"white"
   },
   addNew:{
-    
+
     textcolor:"white",
     backgroundColor:"#D6D6D6",
     cursor:'pointer',
     width:160,
     height:49,
+  },
+
+  addNewContainer:{
+    flex:1,
+    flexDirection:'row',
+    justifyContent:"center",
+    alignItems:'center'
+  },
+
+  addNewText:{
+    fontSize:16,
+    letterSpacing: 0,
+    color: 'white',
+    opacity: 1,
   }
 })
 
@@ -306,13 +322,13 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
     // iphone X
     width:1125/3,
-    height: 2436/3 
+    height: 2436/3
 
   },
 
 
   attributesView: {
-    width:256, 
+    width:256,
     alignSelf: 'stretch',
     flexDirection: 'column',
   }
@@ -320,4 +336,4 @@ const styles = StyleSheet.create({
 
 
 
-});
+});