mirror of
https://github.com/balzack/databag.git
synced 2025-02-12 03:29:16 +00:00
styling welcome screen
This commit is contained in:
parent
104c61b1cf
commit
24d73f7caa
@ -50,6 +50,7 @@ export const LightTheme = {
|
|||||||
enabledArea: '#448866',
|
enabledArea: '#448866',
|
||||||
disabledArea: '#cccccc',
|
disabledArea: '#cccccc',
|
||||||
mainText: '#444444',
|
mainText: '#444444',
|
||||||
|
descriptionText: '#585858',
|
||||||
hintText: '#777777',
|
hintText: '#777777',
|
||||||
activeText: '#ffffff',
|
activeText: '#ffffff',
|
||||||
idleText: '#aaaaaa',
|
idleText: '#aaaaaa',
|
||||||
@ -76,6 +77,7 @@ export const DarkTheme = {
|
|||||||
enabledArea: '#448866',
|
enabledArea: '#448866',
|
||||||
disabledArea: '#888888',
|
disabledArea: '#888888',
|
||||||
mainText: '#ffffff',
|
mainText: '#ffffff',
|
||||||
|
descriptionText: '#999999',
|
||||||
hintText: '#aaaaaa',
|
hintText: '#aaaaaa',
|
||||||
activeText: '#ffffff',
|
activeText: '#ffffff',
|
||||||
idleText: '#aaaaaa',
|
idleText: '#aaaaaa',
|
||||||
|
@ -19,7 +19,12 @@ export const en = {
|
|||||||
subjectOptional: 'Subject (optional)',
|
subjectOptional: 'Subject (optional)',
|
||||||
members: 'Members',
|
members: 'Members',
|
||||||
sealedTopic: 'Sealed Topic',
|
sealedTopic: 'Sealed Topic',
|
||||||
start: 'Start',
|
start: 'Start',
|
||||||
|
|
||||||
|
communication: 'Communication for the decentralized web',
|
||||||
|
setupProfile: 'Setup your profile',
|
||||||
|
connectPeople: 'Connect with people',
|
||||||
|
startConversation: 'Start a conversation',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const fr = {
|
export const fr = {
|
||||||
@ -44,5 +49,10 @@ export const fr = {
|
|||||||
members: 'Membres',
|
members: 'Membres',
|
||||||
sealedTopic: 'Sujet Sécurisé',
|
sealedTopic: 'Sujet Sécurisé',
|
||||||
start: 'Commencer',
|
start: 'Commencer',
|
||||||
|
|
||||||
|
communication: 'Communication pour le web décentralisé',
|
||||||
|
setupProfile: 'Configurez votre profil',
|
||||||
|
connectPeople: 'Connectez avec les gens',
|
||||||
|
startConversation: 'Commencez une conversation',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -180,7 +180,7 @@ export function Session() {
|
|||||||
</div>
|
</div>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="reframe">
|
<div class="reframe">
|
||||||
<Welcome theme={state.theme} />
|
<Welcome />
|
||||||
</div>
|
</div>
|
||||||
{ state.conversation && (
|
{ state.conversation && (
|
||||||
<div class="reframe">
|
<div class="reframe">
|
||||||
@ -244,7 +244,7 @@ export function Session() {
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="reframe">
|
<div class="reframe">
|
||||||
<Welcome theme={state.theme} />
|
<Welcome />
|
||||||
</div>
|
</div>
|
||||||
{ state.conversation && (
|
{ state.conversation && (
|
||||||
<div class="reframe">
|
<div class="reframe">
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Colors } from 'constants/Colors';
|
|
||||||
|
|
||||||
export const ChannelsWrapper = styled.div`
|
export const ChannelsWrapper = styled.div`
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Colors } from 'constants/Colors';
|
|
||||||
|
|
||||||
export const AddChannelWrapper = styled.div`
|
export const AddChannelWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Colors } from 'constants/Colors';
|
|
||||||
|
|
||||||
export const ChannelItemWrapper = styled.div`
|
export const ChannelItemWrapper = styled.div`
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
@ -32,7 +32,6 @@ export function useSession() {
|
|||||||
remoteStream: null,
|
remoteStream: null,
|
||||||
remoteVideo: false,
|
remoteVideo: false,
|
||||||
remoteAudio: false,
|
remoteAudio: false,
|
||||||
theme: null,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const app = useContext(AppContext);
|
const app = useContext(AppContext);
|
||||||
|
@ -1,30 +1,34 @@
|
|||||||
import { WelcomeWrapper } from './Welcome.styled';
|
import { WelcomeWrapper } from './Welcome.styled';
|
||||||
import { RightOutlined } from '@ant-design/icons';
|
import { RightOutlined } from '@ant-design/icons';
|
||||||
import { Space } from 'antd';
|
import { Space } from 'antd';
|
||||||
|
import { useWelcome } from './useWelcome.hook';
|
||||||
|
|
||||||
import light from 'images/session.png';
|
import light from 'images/session.png';
|
||||||
import dark from 'images/darksess.png';
|
import dark from 'images/darksess.png';
|
||||||
|
|
||||||
export function Welcome({ theme }) {
|
export function Welcome() {
|
||||||
|
|
||||||
|
const { state } = useWelcome();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WelcomeWrapper>
|
<WelcomeWrapper>
|
||||||
<div className="title">
|
<div className="title">
|
||||||
<div className="header">Databag</div>
|
<div className="header">Databag</div>
|
||||||
<div>Communication for the decentralized web</div>
|
<div>{ state.strings.communication }</div>
|
||||||
</div>
|
</div>
|
||||||
{ theme === 'light' && (
|
{ state.theme === 'light' && (
|
||||||
<img className="session" src={light} alt="Session Background" />
|
<img className="session" src={light} alt="Session Background" />
|
||||||
)}
|
)}
|
||||||
{ theme === 'dark' && (
|
{ state.theme === 'dark' && (
|
||||||
<img className="session" src={dark} alt="Session Background" />
|
<img className="session" src={dark} alt="Session Background" />
|
||||||
)}
|
)}
|
||||||
<div className="message">
|
<div className="message">
|
||||||
<Space>
|
<Space>
|
||||||
<div>Setup your profile</div>
|
<div>{ state.strings.setupProfile }</div>
|
||||||
<RightOutlined />
|
<RightOutlined />
|
||||||
<div>Connect with people</div>
|
<div>{ state.strings.connectPeople }</div>
|
||||||
<RightOutlined />
|
<RightOutlined />
|
||||||
<div>Start a conversation</div>
|
<div>{ state.strings.startConversation }</div>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
</WelcomeWrapper>
|
</WelcomeWrapper>
|
||||||
|
@ -7,7 +7,7 @@ export const WelcomeWrapper = styled.div`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: ${props => props.theme.hintColor};
|
color: ${props => props.theme.descriptionColor};
|
||||||
background-color: ${props => props.theme.baseArea};
|
background-color: ${props => props.theme.baseArea};
|
||||||
|
|
||||||
.video {
|
.video {
|
||||||
@ -25,12 +25,12 @@ export const WelcomeWrapper = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
color: ${props => props.theme.hintText};
|
color: ${props => props.theme.descriptionText};
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: ${props => props.theme.hintText};
|
color: ${props => props.theme.descriptionText};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -52,7 +52,7 @@ export const WelcomeWrapper = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
color: ${props => props.theme.hintText};
|
color: ${props => props.theme.descriptionText};
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
26
net/web/src/session/welcome/useWelcome.hook.js
Normal file
26
net/web/src/session/welcome/useWelcome.hook.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { useContext, useState, useEffect } from 'react';
|
||||||
|
import { SettingsContext } from 'context/SettingsContext';
|
||||||
|
|
||||||
|
export function useWelcome() {
|
||||||
|
|
||||||
|
const [state, setState] = useState({
|
||||||
|
theme: null,
|
||||||
|
strings: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
const settings = useContext(SettingsContext);
|
||||||
|
|
||||||
|
const updateState = (value) => {
|
||||||
|
setState((s) => ({ ...s, ...value }));
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const { theme, strings } = settings.state;
|
||||||
|
updateState({ theme, strings });
|
||||||
|
}, [settings.state]);
|
||||||
|
|
||||||
|
const actions = {};
|
||||||
|
|
||||||
|
return { state, actions };
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user