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' && ( Session Background )} - { theme === 'dark' && ( + { state.theme === 'dark' && ( Session Background )}
-
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 }; +} +