diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index 9292b00b..59400f01 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -50,6 +50,7 @@ export const LightTheme = {
enabledArea: '#448866',
disabledArea: '#cccccc',
mainText: '#444444',
+ descriptionText: '#585858',
hintText: '#777777',
activeText: '#ffffff',
idleText: '#aaaaaa',
@@ -76,6 +77,7 @@ export const DarkTheme = {
enabledArea: '#448866',
disabledArea: '#888888',
mainText: '#ffffff',
+ descriptionText: '#999999',
hintText: '#aaaaaa',
activeText: '#ffffff',
idleText: '#aaaaaa',
diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js
index a650241d..949c3f1e 100644
--- a/net/web/src/constants/Strings.js
+++ b/net/web/src/constants/Strings.js
@@ -19,7 +19,12 @@ export const en = {
subjectOptional: 'Subject (optional)',
members: 'Members',
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 = {
@@ -44,5 +49,10 @@ export const fr = {
members: 'Membres',
sealedTopic: 'Sujet Sécurisé',
start: 'Commencer',
+
+ communication: 'Communication pour le web décentralisé',
+ setupProfile: 'Configurez votre profil',
+ connectPeople: 'Connectez avec les gens',
+ startConversation: 'Commencez une conversation',
};
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index 04521dee..f14e6a7e 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -180,7 +180,7 @@ export function Session() {
-
+
{ state.conversation && (
@@ -244,7 +244,7 @@ export function Session() {
-
+
{ state.conversation && (
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js
index 2aeceb68..4ca9c543 100644
--- a/net/web/src/session/channels/Channels.styled.js
+++ b/net/web/src/session/channels/Channels.styled.js
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import { Colors } from 'constants/Colors';
export const ChannelsWrapper = styled.div`
height: 100%;
diff --git a/net/web/src/session/channels/addChannel/AddChannel.styled.js b/net/web/src/session/channels/addChannel/AddChannel.styled.js
index 05abae98..1d50ec55 100644
--- a/net/web/src/session/channels/addChannel/AddChannel.styled.js
+++ b/net/web/src/session/channels/addChannel/AddChannel.styled.js
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import { Colors } from 'constants/Colors';
export const AddChannelWrapper = styled.div`
display: flex;
diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
index 9f6ac17b..be4ad05b 100644
--- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import { Colors } from 'constants/Colors';
export const ChannelItemWrapper = styled.div`
height: 48px;
diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js
index ac689508..2f519677 100644
--- a/net/web/src/session/useSession.hook.js
+++ b/net/web/src/session/useSession.hook.js
@@ -32,7 +32,6 @@ export function useSession() {
remoteStream: null,
remoteVideo: false,
remoteAudio: false,
- theme: null,
});
const app = useContext(AppContext);
diff --git a/net/web/src/session/welcome/Welcome.jsx b/net/web/src/session/welcome/Welcome.jsx
index 50f7acb0..82286df8 100644
--- a/net/web/src/session/welcome/Welcome.jsx
+++ b/net/web/src/session/welcome/Welcome.jsx
@@ -1,30 +1,34 @@
import { WelcomeWrapper } from './Welcome.styled';
import { RightOutlined } from '@ant-design/icons';
import { Space } from 'antd';
+import { useWelcome } from './useWelcome.hook';
import light from 'images/session.png';
import dark from 'images/darksess.png';
-export function Welcome({ theme }) {
+export function Welcome() {
+
+ const { state } = useWelcome();
+
return (
Databag
-
Communication for the decentralized web
+
{ state.strings.communication }
- { theme === 'light' && (
+ { state.theme === 'light' && (
)}
- { theme === 'dark' && (
+ { state.theme === 'dark' && (
)}
- Setup your profile
+ { state.strings.setupProfile }
- Connect with people
+ { state.strings.connectPeople }
- Start a conversation
+ { state.strings.startConversation }
diff --git a/net/web/src/session/welcome/Welcome.styled.js b/net/web/src/session/welcome/Welcome.styled.js
index dd8d55ff..9aaf2e72 100644
--- a/net/web/src/session/welcome/Welcome.styled.js
+++ b/net/web/src/session/welcome/Welcome.styled.js
@@ -7,7 +7,7 @@ export const WelcomeWrapper = styled.div`
flex-direction: column;
align-items: center;
justify-content: center;
- color: ${props => props.theme.hintColor};
+ color: ${props => props.theme.descriptionColor};
background-color: ${props => props.theme.baseArea};
.video {
@@ -25,12 +25,12 @@ export const WelcomeWrapper = styled.div`
align-items: center;
flex-grow: 1;
padding: 16px;
- color: ${props => props.theme.hintText};
+ color: ${props => props.theme.descriptionText};
.header {
font-weight: bold;
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;
flex-grow: 1;
padding: 16px;
- color: ${props => props.theme.hintText};
+ color: ${props => props.theme.descriptionText};
}
`
diff --git a/net/web/src/session/welcome/useWelcome.hook.js b/net/web/src/session/welcome/useWelcome.hook.js
new file mode 100644
index 00000000..009e4d88
--- /dev/null
+++ b/net/web/src/session/welcome/useWelcome.hook.js
@@ -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 };
+}
+