Update Pagenavx

App.css

@@ -107,13 +107,12 @@ body {
 
 
 .horizontal_bars .wrapper .pageNav{
-  background-color: white;
-  height: 47px;
-  background: #F8F8F8 0% 0% no-repeat;
-  /*width:auto;*/
-  box-shadow: 0px 1px  0px 0px #F8F8F8;
-  opacity: 1;
-  z-index: 1;
+    background-color: white;
+    height: 48px;
+    background: #F8F8F8 0% 0% no-repeat;
+    box-shadow: 0px 2px 6px #00000029;
+    opacity: 1;
+    z-index: 100;
 }
 
 

Systems/Gui.js

@@ -177,16 +177,17 @@ export default class Gui extends BaseSystem {
     let pages = Object.keys(this.CoreSystem.Routing.topology.nodes).map((route,index) => {
         let view = this.CoreSystem.Routing.getView(route)
         let background = view === currentView ?  PageButtons.activePage :(null)
+        let textColor = view === currentView ?  PageButtons.selectedText :(null)
         return (
           <View style={[PageButtons.page , background ] } onClick = {(e) => {
             this.CoreSystem.goto(route)
             this.forceUpdate()
           }}>
-            <View style = {{ flex:1,
-           justifyContent:'center',
-          alignItems:'center'}}>
+            <View style = {{  flex:1,
+                              justifyContent:'center',
+                              alignItems:'center'}}>
 
-              <Text style={PageButtons.text}>{route}</Text>
+              <Text style={[PageButtons.text, textColor]}>{route}</Text>
             </View>
           </View>
 
@@ -196,13 +197,11 @@ export default class Gui extends BaseSystem {
     return (
       <View style={PageButtons.container}>
        <View style={{borderRightWidth:"1px",
-          borderColor:"#B4b4b4",background:'white'}}>
+                      borderColor:"#B4b4b4",
+                      background:'white', paddingTop: 4}}>
          <Button
-          
           color="white"
-          title={<Icon containerStyle={{paddingLeft:14,paddingRight:14,paddingTop:2,paddingBottom:2}}  name='filter'
-          color="#36BBAD"
-              />
+          title={<Icon name='filter' color="#36BBAD" />
             }
           />
         </View>
@@ -211,7 +210,7 @@ export default class Gui extends BaseSystem {
         <View style={PageButtons.addNew}  onClick = {() => this.addFrame()}>
           <View style=  {PageButtons.addNewContainer}>
             <Text style={PageButtons.addNewText}>Add new </Text>
-            <Icon color="white"  name='add'/>
+            <Icon color="white"  name='add' iconStyle={{fontSize: 12, paddingTop: 8}}/>
           </View>
         </View>
 
@@ -229,25 +228,25 @@ const PageButtons = StyleSheet.create({
   container:{
     flex:1,
     flexDirection:'row',
-    width:40,
+    width:40
   },
   activePage:{
     backgroundColor:"#36BBAD",
     color:"white"
   },
   text:{
-    fontSize:16,
+    fontSize:14,
     letterSpacing: 0,
     color: '#D9D9D9',
     opacity: 1,
   },
+  selectedText: {
+    color: "#FFFFFF"
+  },
   page:{
-
-
     borderRightWidth:"1px",
 		borderColor:"#B4b4b4",
-		
-    backgroundColor:"#FFFFFF",
+    backgroundColor:"#F8F8F8",
     cursor:'pointer',
     textAlign:"center",
     overflow:'hidden',
@@ -256,7 +255,7 @@ const PageButtons = StyleSheet.create({
   },
   addNew:{
 
-    textcolor:"white",
+    color:"white",
     backgroundColor:"#D6D6D6",
     cursor:'pointer',
     width:160,
@@ -271,7 +270,7 @@ const PageButtons = StyleSheet.create({
   },
 
   addNewText:{
-    fontSize:16,
+    fontSize:14,
     letterSpacing: 0,
     color: 'white',
     opacity: 1,

yarn.lock

@@ -5716,17 +5716,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-"trapilib@file:.yalc/trapilib":
-  version "1.1.1-e75c5a3c"
-  dependencies:
-    expo "^34.0.0-experiment.8"
-    prop-types "^15.7.2"
-    react "16.8.3"
-    react-dom "^16.8.6"
-    react-native "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz"
-    react-native-elements "^1.1.0"
-    react-native-web "^0.11.5"
-
 "trapilib@http://git.onarbooks.com/Klapi/TrapiLib.git":
   version "1.1.1"
   resolved "http://git.onarbooks.com/Klapi/TrapiLib.git#f2fb44bb7ba4f8dbe61b966ebda4b867c63f02f7"