adding darkmode to welcome

net/web/src/access/Access.jsx

@@ -3,49 +3,58 @@ import { AccessWrapper } from './Access.styled';
 import { Login } from './login/Login';
 import { Admin } from './admin/Admin';
 import { CreateAccount } from './createAccount/CreateAccount';
+import { ThemeProvider } from "styled-components";
 
-import login from 'images/login.png'
+import login from 'images/login.png';
+import dogin from 'images/dogin.png';
 
 export function Access({ mode }) {
 
   const { state } = useAccess();
 
   return (
-    <AccessWrapper>
-      { (state.display === 'large' || state.display === 'xlarge') && (
-        <div className="split-layout">
-          <div className="left">
-            <img className="splash" src={login} alt="Databag Splash" />
+    <ThemeProvider theme={state.colors}>
+      <AccessWrapper>
+        { (state.display === 'large' || state.display === 'xlarge') && (
+          <div className="split-layout">
+            <div className="left">
+              { state.scheme === 'dark' && (
+                <img className="splash" src={dogin} alt="Databag Splash" />
+              )}
+              { state.scheme === 'light' && (
+                <img className="splash" src={login} alt="Databag Splash" />
+              )}
+            </div>
+            <div className="right">
+              { mode === 'login' && (
+                <Login />
+              )}
+              { mode === 'create' && (
+                <CreateAccount />
+              )}
+              { mode === 'admin' && (
+                <Admin />
+              )}
+            </div>
           </div>
-          <div className="right">
-            { mode === 'login' && (
-              <Login />
-            )}
-            { mode === 'create' && (
-              <CreateAccount />
-            )}
-            { mode === 'admin' && (
-              <Admin />
-            )}
+        )}
+        { (state.display === 'medium' || state.display === 'small') && (
+          <div className="full-layout">
+            <div className="center">
+              { mode === 'login' && (
+                <Login />
+              )}
+              { mode === 'create' && (
+                <CreateAccount />
+              )}
+              { mode === 'admin' && (
+                <Admin />
+              )}
+            </div>
           </div>
-        </div>
-      )}
-      { (state.display === 'medium' || state.display === 'small') && (
-        <div className="full-layout">
-          <div className="center">
-            { mode === 'login' && (
-              <Login />
-            )}
-            { mode === 'create' && (
-              <CreateAccount />
-            )}
-            { mode === 'admin' && (
-              <Admin />
-            )}
-          </div>
-        </div>
-      )}
-    </AccessWrapper>
+        )}
+      </AccessWrapper>
+    </ThemeProvider>
   );
 }
 

net/web/src/access/Access.styled.js

@@ -29,6 +29,7 @@ export const AccessWrapper = styled.div`
       width: 50%;
       height: 100%;
       padding: 32px;
+      background-color: ${props => props.theme.splashArea};
 
       .splash {
         width: 100%;

net/web/src/access/useAccess.hook.js

@@ -7,6 +7,8 @@ export function useAccess() {
 
   const [state, setState] = useState({
     display: null,
+    scheme: null,
+    colors: {},
   });
 
   const navigate = useNavigate();
@@ -43,8 +45,8 @@ export function useAccess() {
 
 
   useEffect(() => {
-    const { display } = settings.state;
-    updateState({ display });
+    const { colors, display, scheme } = settings.state;
+    updateState({ colors, display, scheme });
   }, [settings.state]);
 
   const actions = {};

net/web/src/constants/Colors.js

@@ -40,6 +40,7 @@ export const Colors = {
 };
 
 export const LightTheme = {
+  splashArea: '#8fbea7',
   baseArea: '#8fbea7',
   frameArea: '#dddddd',
   iconArea: '#ffffff',
@@ -76,6 +77,7 @@ export const LightTheme = {
 };
 
 export const DarkTheme = {
+  splashArea: '#4c4c4c',
   baseArea: '#080808',
   frameArea: '#0a0a0a',
   iconArea: '#ffffff',

net/web/src/constants/Strings.js

@@ -16,6 +16,7 @@ export const en = {
   unsetSealing: 'Unset Sealing Key',
   newTopic: 'New Topic', 
 
+  noTopics: 'No Topics',
   noConnected: 'No Connected Contacts',
   subjectOptional: 'Subject (optional)',
   members: 'Members',
@@ -113,6 +114,7 @@ export const fr = {
   unsetSealing: 'Clé de sécurité non définie',
   newTopic: 'Nouveau Sujet',
 
+  noTopics: 'Pas de Sujets',
   noConnected: 'Pas de Contacts Connecter',
   subjectOptional: 'Sujet (optionnel)',
   members: 'Membres',

net/web/src/context/useSettingsContext.hook.js

@@ -10,10 +10,9 @@ export function useSettingsContext() {
     height: null,
     themes: [{ value: null, label: 'Default' }, { value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }],
     theme: null,
-    setTheme: null,
+    scheme: null,
     colors: {},
     menuStyle: {},
-    textStyle: {},
     languages: [{ value: null, label: 'Default' }, { value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }],
     language: null,
     strings: en,

net/web/src/session/channels/Channels.jsx

@@ -37,7 +37,7 @@ export function Channels({ open, active }) {
           />
         )}
         { state.channels.length === 0 && (
-          <div className="empty">No Topics</div>
+          <div className="empty">{ state.strings.noTopics }</div>
         )}
       </div>
       { state.display !== 'small' && (