martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-05 07:55:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added welcome content

Browse Source
This commit is contained in:
Roland Osborne 2022-08-24 14:07:16 -07:00
parent 5f69780d81
commit 53d51efab2
5 changed files with 67 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
net/web/src/images/session.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

4
net/web/src/session/Session.jsx
View File

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

4
net/web/src/session/Session.styled.js
View File

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

19
net/web/src/session/welcome/Welcome.jsx
View File

@ -1,4 +1,21 @@
import { WelcomeWrapper } from './Welcome.styled';
import session from 'images/session.png';
export function Welcome() { 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>
);
} }

45
net/web/src/session/welcome/Welcome.styled.js Normal file
View File

@ -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;
}
`