martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19:16 +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>
</head>
<body style="background-color:#8fbea7;">
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--

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

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

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

@ -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) => {

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

@ -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 {

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

@ -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">

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

@ -53,6 +53,7 @@ export const SelectItemWrapper = styled.div`
.switch {
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};
width: 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,
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;

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 { 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 />

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

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