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

adding darkmode to welcome

Browse Source
This commit is contained in:
Roland Osborne 2024-02-28 16:10:25 -08:00
parent 2e418db65d
commit bbb6d7593e
7 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
net/web/src/access/Access.jsx
View File

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

1
net/web/src/access/Access.styled.js
View File

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

6
net/web/src/access/useAccess.hook.js
View File

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

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

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

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

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

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

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

2
net/web/src/session/channels/Channels.jsx
View File

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