From 104c61b1cf13d50ca6cc95632ab2da16f5683d5e Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Fri, 16 Feb 2024 20:47:39 -0800
Subject: [PATCH] styling welcome component

---
 net/web/public/index.html                      |  2 +-
 net/web/src/constants/Colors.js                |  2 ++
 net/web/src/context/useSettingsContext.hook.js | 10 ++++++----
 net/web/src/index.css                          |  6 ++++++
 net/web/src/session/Session.jsx                |  4 ++--
 .../cardSelect/selectItem/SelectItem.styled.js |  1 +
 .../channels/channelItem/ChannelItem.styled.js |  2 +-
 net/web/src/session/useSession.hook.js         |  9 +++++++--
 net/web/src/session/welcome/Welcome.jsx        | 18 ++++++++++++------
 net/web/src/session/welcome/Welcome.styled.js  |  6 +++++-
 10 files changed, 43 insertions(+), 17 deletions(-)
diff --git a/net/web/public/index.html b/net/web/public/index.html
index 7ef9d664..aa932471 100644
--- a/net/web/public/index.html
+++ b/net/web/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>Databag</title>
   </head>
-  <body style="background-color:#8fbea7;">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index 41e1a042..9292b00b 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -38,6 +38,7 @@ export const Colors = {
 };
 
 export const LightTheme = {
+  baseArea: '#8fbea7',
   headerArea: '#f0f0f0',
   footerArea: '#f0f0f0',
   modalArea: '#eeeeee',
@@ -63,6 +64,7 @@ export const LightTheme = {
 };
 
 export const DarkTheme = {
+  baseArea: '#080808',
   headerArea: '#111111',
   footerArea: '#111111',
   modalArea: '#444444',
diff --git a/net/web/src/context/useSettingsContext.hook.js b/net/web/src/context/useSettingsContext.hook.js
index 7a8fdcab..b6df4867 100644
--- a/net/web/src/context/useSettingsContext.hook.js
+++ b/net/web/src/context/useSettingsContext.hook.js
@@ -20,6 +20,8 @@ export function useSettingsContext() {
   const LARGE_XLARGE = 1600;
 
   const updateState = (value) => {
+console.log("VALUE: ", value);
+
     setState((s) => ({ ...s, ...value }));
   };
 
@@ -55,10 +57,10 @@ export function useSettingsContext() {
     }
     else {
       if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
+        updateState({ theme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
       }
       else {
-        updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
+        updateState({ theme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
       }
     }
 
@@ -89,10 +91,10 @@ export function useSettingsContext() {
     setDefaultTheme: () => {
       localStorage.clearItem('color_scheme');
       if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
+        updateState({ theme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
       }
       else {
-        updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
+        updateState({ theme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
       }
     },
     setLanguage: (code: string) => {
diff --git a/net/web/src/index.css b/net/web/src/index.css
index 14c3ba3a..f0717ef3 100644
--- a/net/web/src/index.css
+++ b/net/web/src/index.css
@@ -29,6 +29,12 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  @media (prefers-color-scheme: light) {
+    background-color:#8fbea7;
+  }
+  @media (prefers-color-scheme: dark) {
+    background-color:#000000;
+  }
 }
 
 code {
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index f14e6a7e..04521dee 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -180,7 +180,7 @@ export function Session() {
             </div>
             <div class="center">
               <div class="reframe">
-                <Welcome />
+                <Welcome theme={state.theme} />
               </div>
               { state.conversation && (
                 <div class="reframe">
@@ -244,7 +244,7 @@ export function Session() {
             </div>
             <div class="right">
               <div class="reframe">
-                <Welcome />
+                <Welcome theme={state.theme} />
               </div>
               { state.conversation && (
                 <div class="reframe">
diff --git a/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js b/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
index 42c5cc71..308ad22f 100644
--- a/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
+++ b/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
@@ -53,6 +53,7 @@ export const SelectItemWrapper = styled.div`
 
   .switch {
     flex-shrink: 0;
+    padding-right: 8px;
   }
 `
 
diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
index e0f9d253..9f6ac17b 100644
--- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
@@ -88,5 +88,5 @@ export const Markup = styled.div`
   background-color: ${props => props.theme.noticeArea};
   width: 8px;
   height: 8px;
-  margin-right: 8px;
+  margin-right: 16px;
 `;
diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js
index 752521df..ac689508 100644
--- a/net/web/src/session/useSession.hook.js
+++ b/net/web/src/session/useSession.hook.js
@@ -32,6 +32,7 @@ export function useSession() {
     remoteStream: null,
     remoteVideo: false,
     remoteAudio: false,
+    theme: null,
   });
 
   const app = useContext(AppContext);
@@ -96,8 +97,12 @@ export function useSession() {
   }, [app.state]);
 
   useEffect(() => {
-    updateState({ display: settings.state.display });
-  }, [settings]);
+    const { display, theme } = settings.state;
+    updateState({ display, theme });
+
+console.log("SET THEME: ", theme);
+
+  }, [settings.state]);
 
   useEffect(() => {
     let updated;
diff --git a/net/web/src/session/welcome/Welcome.jsx b/net/web/src/session/welcome/Welcome.jsx
index b540c1bd..50f7acb0 100644
--- a/net/web/src/session/welcome/Welcome.jsx
+++ b/net/web/src/session/welcome/Welcome.jsx
@@ -2,17 +2,23 @@ import { WelcomeWrapper } from './Welcome.styled';
 import { RightOutlined } from '@ant-design/icons';
 import { Space } from 'antd';
 
-import session from 'images/session.png';
+import light from 'images/session.png';
+import dark from 'images/darksess.png';
 
-export function Welcome() {
+export function Welcome({ theme }) {
   return (
     <WelcomeWrapper>
-      <div class="title">
-        <div class="header">Databag</div>
+      <div className="title">
+        <div className="header">Databag</div>
         <div>Communication for the decentralized web</div>
       </div>
-      <img class="session" src={session} alt="Session Background" />
-      <div class="message">
+      { theme === 'light' && (
+        <img className="session" src={light} alt="Session Background" />
+      )}
+      { theme === 'dark' && (
+        <img className="session" src={dark} alt="Session Background" />
+      )}
+      <div className="message">
         <Space>
           <div>Setup your profile</div>
           <RightOutlined />
diff --git a/net/web/src/session/welcome/Welcome.styled.js b/net/web/src/session/welcome/Welcome.styled.js
index af3db296..dd8d55ff 100644
--- a/net/web/src/session/welcome/Welcome.styled.js
+++ b/net/web/src/session/welcome/Welcome.styled.js
@@ -7,7 +7,8 @@ export const WelcomeWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #555555;
+  color: ${props => props.theme.hintColor};
+  background-color: ${props => props.theme.baseArea};
 
   .video {
     width: 640px;
@@ -24,10 +25,12 @@ export const WelcomeWrapper = styled.div`
     align-items: center;
     flex-grow: 1;
     padding: 16px;
+    color: ${props => props.theme.hintText};
 
     .header {
       font-weight: bold;
       font-size: 20px;
+      color: ${props => props.theme.hintText};
     }
   }
 
@@ -49,6 +52,7 @@ export const WelcomeWrapper = styled.div`
     align-items: center;
     flex-grow: 1;
     padding: 16px;
+    color: ${props => props.theme.hintText};
   }
 `
 
