added welcome content

net/web/src/session/Session.jsx

@@ -78,6 +78,9 @@ export function Session() {
             </div>
           </div>
           <div class="center">
+            <div class="reframe">
+              <Welcome />
+            </div>
             { state.conversation && (
               <div class="reframe">
                 <Conversation closeConversation={actions.closeConversation}
@@ -97,7 +100,6 @@ export function Session() {
             )}
           </div>
           <div class="right">
-            <Welcome />
             { (state.conversation || state.details) && (
               <div class="reframe">
                 <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}

net/web/src/session/Session.styled.js

@@ -8,6 +8,7 @@ export const SessionWrapper = styled.div`
     position: absolute;
     width: 100%;
     height: 100%;
+    z-index: 2;
   }
 
   .desktop-layout {
@@ -21,7 +22,6 @@ export const SessionWrapper = styled.div`
       max-width: 384px;
       width: 20%;
       height: 100%;
-      background-color: yellow; 
       display: flex;
       flex-direction: column;
       position: relative;
@@ -40,7 +40,6 @@ export const SessionWrapper = styled.div`
       max-width: 384px;
       width: 20%;
       height: 100%;
-      background-color: yellow; 
       display: flex;
       flex-direction: column;
       position: relative;
@@ -58,7 +57,6 @@ export const SessionWrapper = styled.div`
       max-width: 384px;
       width: 30%;
       height: 100%;
-      background-color: yellow; 
       display: flex;
       flex-direction: column;
       position: relative;

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

@@ -1,4 +1,21 @@
+import { WelcomeWrapper } from './Welcome.styled';
+
+import session from 'images/session.png';
+
 export function Welcome() {
-  return <></>;
+  return (
+    <WelcomeWrapper>
+      <div class="title">
+        <div class="header">Welcome to 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</p>
+      </div>
+    </WelcomeWrapper>
+  );
 }
 

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

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+export const WelcomeWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .title {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    padding: 16px;
+
+    .header {
+      font-weight: bold;
+    }
+  }
+
+  .session {
+    width: 100%;
+    object-fit: contain;
+    display: flex;
+    align-items: center;
+    min-height: 0;
+  }
+
+  .message {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    padding: 16px;
+  }
+`
+