styling welcome screen

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

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

net/web/src/session/Session.jsx

@@ -180,7 +180,7 @@ export function Session() {
             </div>
             <div class="center">
               <div class="reframe">
-                <Welcome theme={state.theme} />
+                <Welcome />
               </div>
               { state.conversation && (
                 <div class="reframe">
@@ -244,7 +244,7 @@ export function Session() {
             </div>
             <div class="right">
               <div class="reframe">
-                <Welcome theme={state.theme} />
+                <Welcome />
               </div>
               { state.conversation && (
                 <div class="reframe">

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

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;

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;

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

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 (
     <WelcomeWrapper>
       <div className="title">
         <div className="header">Databag</div>
-        <div>Communication for the decentralized web</div>
+        <div>{ state.strings.communication }</div>
       </div>
-      { theme === 'light' && (
+      { state.theme === 'light' && (
         <img className="session" src={light} alt="Session Background" />
       )}
-      { theme === 'dark' && (
+      { state.theme === 'dark' && (
         <img className="session" src={dark} alt="Session Background" />
       )}
       <div className="message">
         <Space>
-          <div>Setup your profile</div>
+          <div>{ state.strings.setupProfile }</div>
           <RightOutlined />
-          <div>Connect with people</div>
+          <div>{ state.strings.connectPeople }</div>
           <RightOutlined />
-          <div>Start a conversation</div>
+          <div>{ state.strings.startConversation }</div>
         </Space>
       </div>
     </WelcomeWrapper>

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

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