more conversation refactor

net/web/src/session/conversation/Conversation.jsx

@@ -1,9 +1,8 @@
 import { useRef } from 'react';
 import { ConversationWrapper, StatusError } from './Conversation.styled';
-import { ExclamationCircleOutlined, SettingOutlined, CloseOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import ReactResizeDetector from 'react-resize-detector';
 import { useConversation } from './useConversation.hook';
-import { Logo } from 'logo/Logo';
 import { AddTopic } from './addTopic/AddTopic';
 import { TopicItem } from './topicItem/TopicItem';
 import { List, Spin, Tooltip } from 'antd';

net/web/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -1,6 +1,4 @@
 import { useContext, useState, useEffect } from 'react';
-import { CardContext } from 'context/CardContext';
-import { ChannelContext } from 'context/ChannelContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { encryptTopicSubject } from 'context/sealUtil';
 
@@ -19,8 +17,6 @@ export function useAddTopic() {
     busy: false,
   });
 
-  const card = useContext(CardContext);
-  const channel = useContext(ChannelContext);
   const conversation = useContext(ConversationContext);
 
   const updateState = (value) => {

net/web/src/session/conversation/useConversation.hook.js

@@ -7,7 +7,6 @@ import { StoreContext } from 'context/StoreContext';
 import { CardContext } from 'context/CardContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { isUnsealed, getChannelSeals, getContentKey, encryptTopicSubject } from 'context/sealUtil';
-import { JSEncrypt } from 'jsencrypt'
 
 import { decryptTopicSubject } from 'context/sealUtil';
 import { getProfileByGuid } from 'context/cardUtil';

net/web/src/session/welcome/Welcome.jsx

@@ -1,4 +1,6 @@
 import { WelcomeWrapper } from './Welcome.styled';
+import { RightOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
 
 import session from 'images/session.png';
 
@@ -6,14 +8,18 @@ export function Welcome() {
   return (
     <WelcomeWrapper>
       <div class="title">
-        <div class="header">Welcome to Databag</div>
+        <div class="header">Databag</div>
         <div>Communication for the decentralized web</div>
       </div>
       <img class="session" src={session} alt="Session Background" />
       <div class="message">
-        <p>Step 1: setup your profile</p>
-        <p>Step 2: connect with people</p>
-        <p>Step 3: start a conversation topic</p>
+        <Space>
+          <div>Setup your profile</div>
+          <RightOutlined />
+          <div>Connect with people</div>
+          <RightOutlined />
+          <div>Start a conversation topic</div>
+        </Space>
       </div>
     </WelcomeWrapper>
   );

net/web/src/session/welcome/Welcome.styled.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Colors from 'constants/Colors';
 
 export const WelcomeWrapper = styled.div`
   height: 100%;
@@ -7,6 +8,7 @@ export const WelcomeWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  color: #555555;
 
   .title {
     width: 100%;
@@ -30,13 +32,13 @@ export const WelcomeWrapper = styled.div`
     display: flex;
     align-items: center;
     min-height: 0;
-    opacity: 0.5;
+    opacity: 0.3;
   }
 
   .message {
     width: 100%;
     display: flex;
-    flex-direction: column;
+    flex-row: column;
     align-items: center;
     justify-content: center;
     align-items: center;