From 0192fc7938bff9d457ce939ccc2c0893d6f3c60b Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com>
Date: Wed, 30 Jun 2021 12:18:36 +0200
Subject: [PATCH 1/3] Add welcome text and button

---
 src/NotesMainPanel.js | 53 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js
index dd1fa60..793f6f7 100644
--- a/src/NotesMainPanel.js
+++ b/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';
@@ -53,6 +55,10 @@ class NotesMainPanel extends React.Component {
     this.setState({notes: notesIDs});
   };
 
+  goToNoteCreationPage = () => {
+    NativeModules.NoteWidgetClickHandler.goToCreationPage();
+  };
+
   getDataFromDatabase = () => {
     NativeModules.Database.getAllNotesIDs()
       .then(result => this.createNotesKeys(result))
@@ -63,12 +69,34 @@ 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 with React Native Windows application</Text>
+        <View style={styles.createYourFirstButton}>
+          <Button title={"Create"} onPress={this.goToNoteCreationPage}/>
+        </View>
+      </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 +109,24 @@ 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: 15,
+    color: "white"
+  },
+  createYourFirstButton: {
+    width: 100
+  },
+  introductionText: {
+    fontSize: 18,
+    margin: 15,
+    fontFamily: "Calibri",
+    color: "white"
   }
 });
 

From 80ce41295af372d671b18ba5331d3ddfec181ff0 Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com>
Date: Wed, 30 Jun 2021 12:52:50 +0200
Subject: [PATCH 2/3] 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.
---
 src/NotesMainPanel.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js
index 793f6f7..cb1a58f 100644
--- a/src/NotesMainPanel.js
+++ b/src/NotesMainPanel.js
@@ -55,10 +55,6 @@ class NotesMainPanel extends React.Component {
     this.setState({notes: notesIDs});
   };
 
-  goToNoteCreationPage = () => {
-    NativeModules.NoteWidgetClickHandler.goToCreationPage();
-  };
-
   getDataFromDatabase = () => {
     NativeModules.Database.getAllNotesIDs()
       .then(result => this.createNotesKeys(result))
@@ -74,10 +70,9 @@ class NotesMainPanel extends React.Component {
     return(
       <View style={styles.welcomePage}>
         <Text style={styles.logoText}>ReactNativeNotes</Text>
-        <Text style={styles.introductionText}>Create your first note with React Native Windows application</Text>
-        <View style={styles.createYourFirstButton}>
-          <Button title={"Create"} onPress={this.goToNoteCreationPage}/>
-        </View>
+        <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>
     )
   };
@@ -119,8 +114,9 @@ const styles = StyleSheet.create({
     margin: 15,
     color: "white"
   },
-  createYourFirstButton: {
-    width: 100
+  plusIcon: {
+    fontSize: 30,
+    color: "white"
   },
   introductionText: {
     fontSize: 18,

From f696faef6259e899eaad9cdfbc8c65c407e71bc4 Mon Sep 17 00:00:00 2001
From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com>
Date: Wed, 30 Jun 2021 13:00:29 +0200
Subject: [PATCH 3/3] Adjust fonts for introduction text

---
 src/NotesMainPanel.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js
index cb1a58f..5635c3b 100644
--- a/src/NotesMainPanel.js
+++ b/src/NotesMainPanel.js
@@ -111,16 +111,17 @@ const styles = StyleSheet.create({
   },
   logoText: {
     fontSize: 35,
-    margin: 15,
+    margin: 25,
     color: "white"
   },
   plusIcon: {
     fontSize: 30,
+    fontWeight: "bold",
     color: "white"
   },
   introductionText: {
     fontSize: 18,
-    margin: 15,
+    margin: 0,
     fontFamily: "Calibri",
     color: "white"
   }