From bbb6d7593e3e3a3cfe19de2b9dcfc0e939a0e0a5 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Wed, 28 Feb 2024 16:10:25 -0800
Subject: [PATCH] adding darkmode to welcome

---
 net/web/src/access/Access.jsx                 | 77 +++++++++++--------
 net/web/src/access/Access.styled.js           |  1 +
 net/web/src/access/useAccess.hook.js          |  6 +-
 net/web/src/constants/Colors.js               |  2 +
 net/web/src/constants/Strings.js              |  2 +
 .../src/context/useSettingsContext.hook.js    |  3 +-
 net/web/src/session/channels/Channels.jsx     |  2 +-
 7 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/net/web/src/access/Access.jsx b/net/web/src/access/Access.jsx
index 4295268d..62aeb372 100644
--- a/net/web/src/access/Access.jsx
+++ b/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>
   );
 }
 
diff --git a/net/web/src/access/Access.styled.js b/net/web/src/access/Access.styled.js
index 250b49ee..9191183d 100644
--- a/net/web/src/access/Access.styled.js
+++ b/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%;
diff --git a/net/web/src/access/useAccess.hook.js b/net/web/src/access/useAccess.hook.js
index 5ae730d9..3587194c 100644
--- a/net/web/src/access/useAccess.hook.js
+++ b/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 = {};
diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index 681341d3..e9b03994 100644
--- a/net/web/src/constants/Colors.js
+++ b/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',
diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js
index 92cfeecd..f1e28d0b 100644
--- a/net/web/src/constants/Strings.js
+++ b/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',
diff --git a/net/web/src/context/useSettingsContext.hook.js b/net/web/src/context/useSettingsContext.hook.js
index 5a218f38..5e0b9f41 100644
--- a/net/web/src/context/useSettingsContext.hook.js
+++ b/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,
diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx
index 77987d01..f1079916 100644
--- a/net/web/src/session/channels/Channels.jsx
+++ b/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' && (