martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling welcome component

Browse Source
This commit is contained in:
Roland Osborne 2024-02-16 20:47:39 -08:00
parent 2dd07e55f3
commit 104c61b1cf
10 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/public/index.html
View File

@ -26,7 +26,7 @@
--> -->
<title>Databag</title> <title>Databag</title>
</head> </head>
<body style="background-color:#8fbea7;"> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--

2
net/web/src/constants/Colors.js
View File

@ -38,6 +38,7 @@ export const Colors = {
}; };
export const LightTheme = { export const LightTheme = {
baseArea: '#8fbea7',
headerArea: '#f0f0f0', headerArea: '#f0f0f0',
footerArea: '#f0f0f0', footerArea: '#f0f0f0',
modalArea: '#eeeeee', modalArea: '#eeeeee',
@ -63,6 +64,7 @@ export const LightTheme = {
}; };
export const DarkTheme = { export const DarkTheme = {
baseArea: '#080808',
headerArea: '#111111', headerArea: '#111111',
footerArea: '#111111', footerArea: '#111111',
modalArea: '#444444', modalArea: '#444444',

10
net/web/src/context/useSettingsContext.hook.js
View File

@ -20,6 +20,8 @@ export function useSettingsContext() {
const LARGE_XLARGE = 1600; const LARGE_XLARGE = 1600;
const updateState = (value) => { const updateState = (value) => {
console.log("VALUE: ", value);
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
}; };
@ -55,10 +57,10 @@ export function useSettingsContext() {
} }
else { else {
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { 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 { 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: () => { setDefaultTheme: () => {
localStorage.clearItem('color_scheme'); localStorage.clearItem('color_scheme');
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { 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 { 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) => { setLanguage: (code: string) => {

6
net/web/src/index.css
View File

@ -29,6 +29,12 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@media (prefers-color-scheme: light) {
background-color:#8fbea7;
}
@media (prefers-color-scheme: dark) {
background-color:#000000;
}
} }
code { code {

4
net/web/src/session/Session.jsx
View File

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

1
net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
View File

@ -53,6 +53,7 @@ export const SelectItemWrapper = styled.div`
.switch { .switch {
flex-shrink: 0; flex-shrink: 0;
padding-right: 8px;
} }
` `

2
net/web/src/session/channels/channelItem/ChannelItem.styled.js
View File

@ -88,5 +88,5 @@ export const Markup = styled.div`
background-color: ${props => props.theme.noticeArea}; background-color: ${props => props.theme.noticeArea};
width: 8px; width: 8px;
height: 8px; height: 8px;
margin-right: 8px; margin-right: 16px;
`; `;

9
net/web/src/session/useSession.hook.js
View File

@ -32,6 +32,7 @@ export function useSession() {
remoteStream: null, remoteStream: null,
remoteVideo: false, remoteVideo: false,
remoteAudio: false, remoteAudio: false,
theme: null,
}); });
const app = useContext(AppContext); const app = useContext(AppContext);
@ -96,8 +97,12 @@ export function useSession() {
}, [app.state]); }, [app.state]);
useEffect(() => { useEffect(() => {
updateState({ display: settings.state.display }); const { display, theme } = settings.state;
}, [settings]); updateState({ display, theme });
console.log("SET THEME: ", theme);
}, [settings.state]);
useEffect(() => { useEffect(() => {
let updated; let updated;

18
net/web/src/session/welcome/Welcome.jsx
View File

@ -2,17 +2,23 @@ import { WelcomeWrapper } from './Welcome.styled';
import { RightOutlined } from '@ant-design/icons'; import { RightOutlined } from '@ant-design/icons';
import { Space } from 'antd'; 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 ( return (
<WelcomeWrapper> <WelcomeWrapper>
<div class="title"> <div className="title">
<div class="header">Databag</div> <div className="header">Databag</div>
<div>Communication for the decentralized web</div> <div>Communication for the decentralized web</div>
</div> </div>
<img class="session" src={session} alt="Session Background" /> { theme === 'light' && (
<div class="message"> <img className="session" src={light} alt="Session Background" />
)}
{ theme === 'dark' && (
<img className="session" src={dark} alt="Session Background" />
)}
<div className="message">
<Space> <Space>
<div>Setup your profile</div> <div>Setup your profile</div>
<RightOutlined /> <RightOutlined />

6
net/web/src/session/welcome/Welcome.styled.js
View File

@ -7,7 +7,8 @@ export const WelcomeWrapper = styled.div`
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #555555; color: ${props => props.theme.hintColor};
background-color: ${props => props.theme.baseArea};
.video { .video {
width: 640px; width: 640px;
@ -24,10 +25,12 @@ export const WelcomeWrapper = styled.div`
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
padding: 16px; padding: 16px;
color: ${props => props.theme.hintText};
.header { .header {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
color: ${props => props.theme.hintText};
} }
} }
@ -49,6 +52,7 @@ export const WelcomeWrapper = styled.div`
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
padding: 16px; padding: 16px;
color: ${props => props.theme.hintText};
} }
` `