Welcome page - Text and introduction (#19)

* Add welcome text and button

* Remove Create button

The Create button is a very problematic as it would require changing the
navigation root to open a screen on UWP layer from different frame.
To simplify the solution the button was replaced by user-firendly text
guiding to the navigation panel.

* Adjust fonts for introduction text

Author: BartoszKlonowski

src/NotesMainPanel.js

@@ -7,10 +7,12 @@ import React from 'react';
 import {
   Alert,
   AppRegistry,
+  Button,
   Dimensions,
   FlatList,
   NativeModules,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
 import NoteWidget from './Widgets/NoteWidget';
@@ -63,12 +65,33 @@ class NotesMainPanel extends React.Component {
     return <NoteWidget width={noteWidgetWidth} ID={notes.item.key} title={notes.item.title} shortMessage={notes.item.shortMessage}/>
   };
 
-  render() {
+
+  renderWelcomePage = () => {
+    return(
+      <View style={styles.welcomePage}>
+        <Text style={styles.logoText}>ReactNativeNotes</Text>
+        <Text style={styles.introductionText}>Create your first note by clicking</Text>
+        <Text style={styles.plusIcon}>+</Text>
+        <Text style={styles.introductionText}>on the navigation panel</Text>
+      </View>
+    )
+  };
+
+  renderNotesPage = () => {
     return(
       <View style={styles.mainContainer}>
         <FlatList key={this.state.columns} numColumns={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
       </View>
-    );
+    )
+  }
+
+  render() {
+    if(this.state.notes.length > 0){
+      return this.renderNotesPage();
+    }
+    else {
+      return this.renderWelcomePage();
+    }
   }
 };
 
@@ -81,9 +104,26 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent",
     justifyContent: "space-around",
   },
-  welcomeText: {
-    fontSize: 25,
-    fontFamily: "Papyrus",
+  welcomePage: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  logoText: {
+    fontSize: 35,
+    margin: 25,
+    color: "white"
+  },
+  plusIcon: {
+    fontSize: 30,
+    fontWeight: "bold",
+    color: "white"
+  },
+  introductionText: {
+    fontSize: 18,
+    margin: 0,
+    fontFamily: "Calibri",
+    color: "white"
   }
 });