adding base component when no active focus

app/client/web/src/App.tsx

@@ -23,8 +23,8 @@ const theme = createTheme({
     'light-text': ['#000000', '#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'],
     'dark-databag-green': ['#99bb99', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83'],
     'light-databag-green': ['#888888', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844'],
-    'dark-tab': ['#111111', '#222222', '#333333', '#444444', '#444444', '#444444', '#444444', '#444444', '#444444', '#444444'],
-    'light-tab': ['#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#aaaaaa'],
+    'dark-tab': ['#111111', '#222222', '#333333', '#444444', '#444444', '#444444', '#444444', '#444444', '#444444', '#333333'],
+    'light-tab': ['#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#aaaaaa', '#8fbea7'],
     'dark-status': ['#555555', '#cccccc', '#aaaa44', '#aa44aa', '#22aacc', '#44aa44', '#dd6633', '#888888', '#888888', '#888888'],
     'light-status': ['#555555', '#cccccc', '#aaaa44', '#aa44aa', '#22aacc', '#44aa44', '#dd6633', '#888888', '#888888', '#888888'],
     dbgreen: virtualColor({

app/client/web/src/base/Base.module.css

@@ -0,0 +1,50 @@
+.base {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--mantine-color-tab-9);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 15vh;
+  padding-bottom: 15vh;
+
+  .image {
+    width: 60%;
+    max-height: 60%;
+    opacity: 0.4;
+  }
+
+  .icon {
+    color: var(--mantine-color-text-8);
+    margin: 8px;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 20px;
+    color: var(--mantine-color-text-6);
+  }
+
+  .label {
+    font-size: 16px;
+    color: var(--mantine-color-text-6);
+  }
+
+  .steps {
+    display: flex;
+    align-items: center;
+  
+    .step {
+      font-size: 16px;
+      color: var(--mantine-color-text-6);
+    }
+  }
+} 

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useBase } from './useBase.hook'
+import classes from './Base.module.css'
+import light from '../images/lightness.png'
+import dark from '../images/darkness.png'
+import { useMantineTheme, Image, Text } from '@mantine/core'
+import { IconChevronRight } from '@tabler/icons-react'
+
+export function Base() {
+  const { state } = useBase();
+  const theme = useMantineTheme();
+
+console.log(theme);
+
+  return (
+    <div className={classes.base}>
+      <div className={classes.header}>
+        <Text className={classes.title}>Databag</Text>
+        <Text className={classes.label}>{ state.strings.communication }</Text>
+      </div>
+      <Image className={classes.image} src={state.scheme === 'dark' ? dark : light} fit="contain" />
+      <div className={classes.steps}>
+        <Text className={classes.step}>{ state.strings.setupProfile }</Text>
+        <IconChevronRight className={classes.icon} />
+        <Text className={classes.step}>{ state.strings.connectPeople }</Text>
+        <IconChevronRight className={classes.icon} />
+        <Text className={classes.step}>{ state.strings.startConversation }</Text>
+      </div>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,26 @@
+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,
+    scheme: display.state.scheme,
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+  
+  useEffect(() => {
+    const { strings, scheme } = display.state;
+    updateState({ strings, scheme });
+  }, [display.state]);
+
+  const actions = {
+  }
+
+  return { state, actions }
+}

app/client/web/src/constants/Strings.ts

@@ -18,6 +18,7 @@ export const en = {
   setup: 'Setup',
   accounts: 'Accounts',
   noAccounts: 'No Accounts',
+  selectShare: 'Select Sharing Topic',
 
   membership: 'Membership',
   channelGuest: 'Topic Guest',
@@ -311,6 +312,7 @@ export const fr = {
   setup: 'Installation',
   accounts: 'Comptes',
   noAccounts: 'Aucun Compte',
+  selectShare: 'Sélectionnez le Sujet de Partage',
 
   addingTitle: 'Ajout d\'un Compte',
   addingLink: 'Utilisez le lien suivant pour créer un compte',
@@ -599,6 +601,7 @@ export const sp = {
   setup: 'Configuración',
   accounts: 'Cuentas',
   noAccounts: 'No hay cuentas',
+  selectShare: 'Seleccionar Tema Para Compartir',
 
   addingTitle: 'Añadiendo cuenta',
   addingLink: 'Utilice el siguiente enlace para crear una cuenta',
@@ -887,6 +890,7 @@ export const pt = {
   setup: 'configurar',
   accounts: 'Contas',
   noAccounts: 'Sem Contas',
+  selectShare: 'Selecione o Tópico de Compartilhamento',
 
   addingTitle: 'Adicionando conta',
   addingLink: 'Use o seguinte link para criar uma conta',
@@ -1176,7 +1180,8 @@ export const de = {
   setup: 'Aufstellen',
   accounts: 'Konten',
   noAccounts: 'Keine Konten',
-  
+  selectShare: 'Wählen Sie Das Thema Zum Teilen Aus',
+ 
   addingTitle: 'Konto hinzufügen',
   addingLink: 'Verwenden Sie den folgenden Link, um ein Konto zu erstellen',
   addingToken: 'Verwenden Sie das folgende Token, um ein Konto vom Anmeldebildschirm aus zu erstellen',
@@ -1464,6 +1469,7 @@ export const ru = {
   setup: 'настраивать',
   accounts: 'Учетные записи',
   noAccounts: 'Нет учетных записей',
+  selectShare: 'Выберите тему для обмена',
 
   addingTitle: 'Добавление аккаунта',
   addingLink: 'Используйте следующую ссылку для создания аккаунта',

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

@@ -17,6 +17,7 @@ import { Conversation } from '../conversation/Conversation'
 import { Focus, Card } from 'databag-client-sdk'
 import { useDisclosure } from '@mantine/hooks'
 import { IconAlertCircle } from '@tabler/icons-react'
+import { Base } from '../base/Base';
 import { Ring } from '../ring/Ring';
 import { Call } from '../call/Call';
 
@@ -141,6 +142,7 @@ export function Session() {
             <div className={classes.right}>
               <Ring />
               <div className={classes.conversation}>
+                {!state.focus && <Base />}
                 {state.focus && <Conversation openDetails={openDetails} />}
               </div>
             </div>