feat: added theming to the about page
parent
59e29a38d4
commit
adf370997e
@ -0,0 +1,67 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { switchThemeTo } from '../session/utils/Theme';
|
||||
import { SessionTheme } from '../themes/SessionTheme';
|
||||
|
||||
const StyledContent = styled.div`
|
||||
background-color: var(--background-primary-color);
|
||||
color: var(--text-primary-color);
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--font-default);
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
padding: 12px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
`;
|
||||
|
||||
export const AboutView = () => {
|
||||
// Add debugging metadata - environment if not production, app instance name
|
||||
const states = [];
|
||||
|
||||
if (window.getEnvironment() !== 'production') {
|
||||
states.push(window.getEnvironment());
|
||||
}
|
||||
if (window.getAppInstance()) {
|
||||
states.push(window.getAppInstance());
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if ((window as any).theme) {
|
||||
void switchThemeTo((window as any).theme, null, false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SessionTheme>
|
||||
<StyledContent>
|
||||
<img src="images/session/session_icon.png" width="250" height="250" />
|
||||
|
||||
<div className="version">{`v${window.getVersion()}`}</div>
|
||||
<div className="commitHash">{window.getCommitHash() || ''}</div>
|
||||
<div className="environment">{states.join(' - ')}</div>
|
||||
<div>
|
||||
<a href="https://getsession.org">getsession.org</a>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<a className="privacy" href="https://getsession.org/privacy-policy">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<br />
|
||||
<a className="privacy" href="https://getsession.org/terms-of-service/">
|
||||
Terms of Service
|
||||
</a>
|
||||
</div>
|
||||
</StyledContent>
|
||||
</SessionTheme>
|
||||
);
|
||||
};
|
@ -1,30 +0,0 @@
|
||||
// Add version and commit hash
|
||||
|
||||
global.setTimeout(() => {
|
||||
const version = document.getElementsByClassName('version').item(0);
|
||||
|
||||
const commit = document.getElementsByClassName('commitHash').item(0);
|
||||
const environment = document.getElementsByClassName('environment').item(0);
|
||||
|
||||
// Add debugging metadata - environment if not production, app instance name
|
||||
const states = [];
|
||||
|
||||
if (window.getEnvironment() !== 'production') {
|
||||
states.push(window.getEnvironment());
|
||||
}
|
||||
if (window.getAppInstance()) {
|
||||
states.push(window.getAppInstance());
|
||||
}
|
||||
if (version) {
|
||||
// tslint:disable: no-inner-html
|
||||
version.innerHTML = `v${window.getVersion()}`;
|
||||
}
|
||||
|
||||
if (commit) {
|
||||
commit.innerHTML = window.getCommitHash() || '';
|
||||
}
|
||||
|
||||
if (environment) {
|
||||
environment.innerHTML = states.join(' - ');
|
||||
}
|
||||
}, 1000);
|
@ -0,0 +1,7 @@
|
||||
/* global $, Whisper */
|
||||
// const $body = $(document.body);
|
||||
|
||||
import React from 'react';
|
||||
import { AboutView } from '../components/AboutView';
|
||||
|
||||
window.ReactDOM.render(<AboutView />, document.getElementById('root'));
|
Loading…
Reference in New Issue