Add some notes to help onboarding

src/screen/AddAccount/AddAccount.tsx

@@ -1,4 +1,4 @@
-import { Alert, ScrollView } from 'react-native';
+import { Alert, ScrollView, View } from 'react-native';
 import React, { useState } from 'react';
 
 import { useDispatch } from '@hook/store';
@@ -10,6 +10,7 @@ import ColorPicker from '@component/ColorPicker/ColorPicker';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { v4 as uuid } from 'uuid';
+import Note from '@component/Note/Note';
 
 const Container = styled(ScrollView)`
   background-color: #fff;
@@ -63,15 +64,13 @@ export default function AddAccount(): JSX.Element {
       />
       <ColorPicker onSelect={setColor} />
       <PrimaryButton title={'Add'} onPress={handleAdd} />
-      <SecondaryButton
-        title={'Fill by scanning QR'}
-        onPress={() =>
-          Alert.alert(
-            'Coming soon!',
-            'This functionality is work in progress. Till it gets released please fill in the details by hand.',
-          )
-        }
-      />
+      <View style={{ margin: 16 }}>
+        <Note
+          content={
+            'You will soon be able to fill in these details by scanning QR codes. Stay tuned!'
+          }
+        />
+      </View>
     </Container>
   );
 }

src/screen/Overview/EmptyList.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { SecondaryButton } from '@component/Button/Button';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
+import Note from '@component/Note/Note';
 
 const Container = styled(View)`
   flex: 1;
@@ -17,7 +18,15 @@ export default function EmptyList(): JSX.Element {
 
   return (
     <Container>
-      <SecondaryButton title={'Add Account'} onPress={() => navigation.push('Add')} />
+      <View style={{ margin: 16 }}>
+        <Note
+          content={
+            'It looks a bit empty here! Add some accounts and Owky will manage your Two-Factor codes. ⚡️'
+          }
+        >
+          <SecondaryButton title={'New Account'} onPress={() => navigation.push('Add')} />
+        </Note>
+      </View>
     </Container>
   );
 }

src/screen/Settings/Settings.tsx

@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from '@hook/store';
 import { setLocalAuthenticationStatus } from '@slice/settings';
 import { DangerButton } from '@component/Button/Button';
 import { wipe } from '@slice/account';
+import Note from '@component/Note/Note';
 
 const Container = styled(View)`
   background-color: #fff;
@@ -60,6 +61,11 @@ export default function Settings(): JSX.Element {
       />
       <SectionTitle>Data</SectionTitle>
       <DangerButton title={'Wipe all data'} onPress={handleDataWipe} />
+      <Note
+        content={
+          'Thank you for using Owky! Really! The app is and will remain free and opensource. Owky is made by one person, as a side project. Next features: backup & restore, QR scanning, dark mode, and maybe Android support. All in all, I want to keep it nice and simple. If you want to get in touch, you can use catalin@charlietango.co. Cheers!'
+        }
+      />
     </Container>
   );
 }