styling welcome screen

This commit is contained in:
Roland Osborne 2024-02-16 21:10:14 -08:00
parent 104c61b1cf
commit 24d73f7caa
10 changed files with 56 additions and 18 deletions

View File

@ -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',

View File

@ -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',
}; };

View File

@ -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">

View File

@ -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%;

View File

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

View File

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

View File

@ -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);

View File

@ -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>

View File

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

View 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 };
}