adding base welcome component

app/client/mobile/App.tsx

@@ -15,6 +15,7 @@ import {MD3LightTheme, MD3DarkTheme, PaperProvider} from 'react-native-paper';
 
 const databagColors = {
   light: {
+    name: 'light',
     primary: 'rgb(0, 108, 71)',
     onPrimary: 'rgb(255, 255, 255)',
     primaryContainer: 'rgb(142, 247, 193)',
@@ -55,8 +56,10 @@ const databagColors = {
     surfaceDisabled: 'rgba(25, 28, 26, 0.12)',
     onSurfaceDisabled: 'rgba(25, 28, 26, 0.38)',
     backdrop: 'rgba(42, 50, 45, 0.4)',
+    base: '#8fbea7',
   },
   dark: {
+    name: 'dark',
     primary: 'rgb(9, 178, 99)',
     onPrimary: 'rgb(0, 56, 35)',
     primaryContainer: 'rgb(0, 82, 52)',
@@ -97,6 +100,7 @@ const databagColors = {
     surfaceDisabled: 'rgba(225, 227, 223, 0.12)',
     onSurfaceDisabled: 'rgba(225, 227, 223, 0.38)',
     backdrop: 'rgba(42, 50, 45, 0.4)',
+    base: 'rgb(0,0,0)',
   },
 };
 

app/client/mobile/src/base/Base.styled.ts

@@ -0,0 +1,36 @@
+import {StyleSheet} from 'react-native';
+import { Colors } from '../constants/Colors';
+
+export const styles = StyleSheet.create({
+  base: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '50%',
+    height: '50%',
+    opacity: 0.2,
+  },
+  title: {
+    fontSize: 20,
+    color: Colors.label,
+  },
+  description: {
+    fontSize: 14,
+    color: Colors.label,
+  },
+  steps: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8,
+    paddingTop: 16,
+  },
+  step: {
+    color: Colors.label,
+    fontSize: 12,
+  },
+});

app/client/mobile/src/base/Base.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { View, Image } from 'react-native';
+import {useTheme, Text, Icon} from 'react-native-paper';
+import { styles } from './Base.styled';
+import dark from '../images/darkness.png';
+import light from '../images/lightness.png';
+import { useBase } from './useBase.hook';
+import { Colors } from '../constants/Colors';
+
+export function Base() {
+  const theme = useTheme();
+  const { state, actions } = useBase();
+
+  return (
+    <View style={{ ...styles.base, backgroundColor: theme.colors.base }}>
+      <Text style={styles.title}>Databag</Text>
+      <Text style={styles.description}>{ state.strings.communication }</Text>
+      <Image style={styles.image} source={theme.colors.name == 'light' ? light : dark} resizeMode="contain" />
+      <View style={styles.steps}>
+        <Text style={styles.step}>{ state.strings.setupProfile }</Text>
+        <Icon size={14} source="chevron-right" color={Colors.placeholder} />
+        <Text style={styles.step}>{ state.strings.connectPeople }</Text>
+        <Icon size={14} source="chevron-right" color={Colors.placeholder} />
+        <Text style={styles.step}>{ state.strings.startConversation }</Text>
+      </View>
+    </View>
+  );
+}
+

app/client/mobile/src/base/useBase.hook.ts

@@ -0,0 +1,20 @@
+import { useState, useContext, useEffect } from 'react'
+import { DisplayContext } from '../context/DisplayContext';
+import { ContextType } from '../context/ContextType'
+
+export function useBase() {
+  const display = useContext(DisplayContext) as ContextType
+  const [state, setState] = useState({
+    strings: display.state.strings,
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  const actions = {
+  }
+
+  return { state, actions }
+}

app/client/mobile/src/constants/Colors.ts

@@ -1,7 +1,9 @@
 export const Colors = {
   primary: '#408060',
+  secondary: '#8fbea7',
   danger: '#ff6666',
   placeholder: '#888888',
+  label: '#555555',
   unsaved: '#555555',
   confirmed: '#aaaaaa',
   pending: '#aaaa44',

app/client/mobile/src/content/Content.styled.ts

@@ -193,7 +193,7 @@ export const styles = StyleSheet.create({
     paddingVertical: 6,
   },
   members: {
-    height: 256,
+    height: 200,
     borderRadius: 4,
   },
   membersContainer: {},

app/client/mobile/src/session/Session.styled.ts

@@ -108,4 +108,9 @@ export const styles = StyleSheet.create({
   ring: {
     paddingLeft: 16,
   },
+  base: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
 });

app/client/mobile/src/session/Session.tsx

@@ -10,6 +10,7 @@ import {Registry} from '../registry/Registry';
 import {Profile, ContactParams} from '../profile/Profile';
 import {Details} from '../details/Details';
 import {Identity} from '../identity/Identity';
+import {Base} from '../base/Base';
 import {Conversation} from '../conversation/Conversation';
 import {useSession} from './useSession.hook';
 import {TransitionPresets} from '@react-navigation/stack';
@@ -457,14 +458,16 @@ function HomeScreen({nav}) {
           <Content share={nav.share} textCard={nav.textCard} closeAll={()=>{}} openConversation={()=>nav.setFocus(true)} />
         </Surface>
       </View>
-      <Surface style={styles.right} mode="flat">
+      <Surface style={styles.right} mode="flat">  
+        { !nav.focus && (
+          <Base />
+        )}
         <SafeAreaView style={styles.right} edges={['top']}>
           <View style={styles.ring}>
             <Ring />
           </View>
           <View style={styles.workarea}>
             {nav.focus && <Conversation openDetails={nav.details.openDrawer} close={()=>nav.setFocus(false)} wide={true} />}
-            {!nav.focus && <Text>FOCUS NOT SET</Text>}
           </View>
         </SafeAreaView>
       </Surface>