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