diff --git a/about.html b/about.html index 8544c8a80..d203b0224 100644 --- a/about.html +++ b/about.html @@ -15,40 +15,10 @@ style-src 'self' 'unsafe-inline';" /> - - - -
-
-
-
- getsession.org -
-
-
- Privacy Policy
- Terms of Service -
- +
diff --git a/about_preload.js b/about_preload.js index db2c428ad..6c72bee6d 100644 --- a/about_preload.js +++ b/about_preload.js @@ -8,13 +8,25 @@ const config = url.parse(window.location.toString(), true).query; const { locale } = config; const localeMessages = ipcRenderer.sendSync('locale-data'); +window.React = require('react'); +window.ReactDOM = require('react-dom'); + +window.theme = config.theme; +window.i18n = i18n.setupi18n(locale, localeMessages); + window.getEnvironment = () => config.environment; window.getVersion = () => config.version; window.getCommitHash = () => config.commitHash; window.getAppInstance = () => config.appInstance; +const { AboutView } = require('./ts/components/AboutView'); + +window.Signal = { + Components: { + AboutView, + }, +}; + window.closeAbout = () => ipcRenderer.send('close-about'); -window.i18n = i18n.setupi18n(locale, localeMessages); - require('./ts/util/logging'); diff --git a/preload.js b/preload.js index 0c8cb7d76..df422ebec 100644 --- a/preload.js +++ b/preload.js @@ -150,11 +150,6 @@ window.readyForUpdates = () => { ipc.send('ready-for-updates'); }; -ipc.on('get-primary-color-setting', () => { - const primaryColor = window.Events.getPrimaryColorSetting(); - ipc.send('get-success-primary-color-setting', primaryColor); -}); - ipc.on('get-theme-setting', () => { const theme = window.Events.getThemeSetting(); ipc.send('get-success-theme-setting', theme); diff --git a/ts/components/AboutView.tsx b/ts/components/AboutView.tsx new file mode 100644 index 000000000..d31d5c94f --- /dev/null +++ b/ts/components/AboutView.tsx @@ -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 ( + + + + +
{`v${window.getVersion()}`}
+
{window.getCommitHash() || ''}
+
{states.join(' - ')}
+
+ getsession.org +
+
+
+ + Privacy Policy + +
+ + Terms of Service + +
+ + + ); +}; diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx index 496ac6e8f..ae967d3d2 100644 --- a/ts/components/dialog/ReactListModal.tsx +++ b/ts/components/dialog/ReactListModal.tsx @@ -299,7 +299,7 @@ export const ReactListModal = (props: Props): ReactElement => { dispatch(updateReactListModal(null)); }; - const handleClearReactions = (event: any) => { + const handleClearReactions = () => { handleClose(); dispatch( updateReactClearAllModal({ diff --git a/ts/mains/about_start.ts b/ts/mains/about_start.ts deleted file mode 100644 index 3a3d95ab7..000000000 --- a/ts/mains/about_start.ts +++ /dev/null @@ -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); diff --git a/ts/mains/about_start.tsx b/ts/mains/about_start.tsx new file mode 100644 index 000000000..ed31fcef0 --- /dev/null +++ b/ts/mains/about_start.tsx @@ -0,0 +1,7 @@ +/* global $, Whisper */ +// const $body = $(document.body); + +import React from 'react'; +import { AboutView } from '../components/AboutView'; + +window.ReactDOM.render(, document.getElementById('root')); diff --git a/ts/mains/main_node.ts b/ts/mains/main_node.ts index 6c721168c..cd2053373 100644 --- a/ts/mains/main_node.ts +++ b/ts/mains/main_node.ts @@ -596,6 +596,7 @@ async function showAbout() { return; } + const theme = await getThemeFromMainWindow(); const options = { width: 500, height: 500, @@ -618,13 +619,14 @@ async function showAbout() { captureClicks(aboutWindow); - await aboutWindow.loadURL(prepareURL([getAppRootPath(), 'about.html'])); + await aboutWindow.loadURL(prepareURL([getAppRootPath(), 'about.html'], { theme })); aboutWindow.on('closed', () => { aboutWindow = null; }); aboutWindow.once('ready-to-show', () => { + aboutWindow?.setBackgroundColor('#000'); aboutWindow?.show(); }); } @@ -641,8 +643,6 @@ async function showDebugLogWindow() { return; } - // TODO Theming - Use on debug and about pages - const primaryColor = await getPrimaryColorFromMainWindow(); const theme = await getThemeFromMainWindow(); const size = mainWindow.getSize(); const options = { @@ -669,7 +669,6 @@ async function showDebugLogWindow() { captureClicks(debugLogWindow); - // TODO Theming - Check if it needs the priary color await debugLogWindow.loadURL(prepareURL([getAppRootPath(), 'debug_log.html'], { theme })); debugLogWindow.on('closed', () => { @@ -1102,15 +1101,6 @@ ipc.on('set-auto-update-setting', async (_event, enabled) => { } }); -async function getPrimaryColorFromMainWindow() { - return new Promise(resolve => { - ipc.once('get-success-primary-color-setting', (_event, value) => { - resolve(value); - }); - mainWindow?.webContents.send('get-primary-color-setting'); - }); -} - async function getThemeFromMainWindow() { return new Promise(resolve => { ipc.once('get-success-theme-setting', (_event, value) => { diff --git a/ts/session/utils/Theme.tsx b/ts/session/utils/Theme.tsx index eb0ea90e7..6fc332817 100644 --- a/ts/session/utils/Theme.tsx +++ b/ts/session/utils/Theme.tsx @@ -4,8 +4,14 @@ import { ThemeStateType } from '../../themes/colors'; import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from '../../themes/SessionTheme'; import { switchTheme } from '../../themes/switchTheme'; -export async function switchThemeTo(theme: ThemeStateType, dispatch: Dispatch | null) { - await window.setTheme(theme); +export async function switchThemeTo( + theme: ThemeStateType, + dispatch: Dispatch | null, + mainWindow: boolean = true +) { + if (mainWindow) { + await window.setTheme(theme); + } let newTheme: ThemeStateType | null = null; @@ -30,9 +36,10 @@ export async function switchThemeTo(theme: ThemeStateType, dispatch: Dispatch | window.log.warn('Unsupported theme: ', theme); } - switchTheme(theme); - if (newTheme) { - dispatch?.(applyTheme(newTheme)); + switchTheme(newTheme, mainWindow); + if (dispatch) { + dispatch?.(applyTheme(newTheme)); + } } } diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index df86cab70..32424c8f0 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -1687,11 +1687,14 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)'); } -export async function switchTheme(theme: ThemeStateType) { - const selectedPrimaryColor = await window.Events.getPrimaryColorSetting(); - const primaryColor = - (selectedPrimaryColor && (COLORS.PRIMARY as any)[`${selectedPrimaryColor.toUpperCase()}`]) || - null; +export async function switchTheme(theme: ThemeStateType, mainWindow: boolean = true) { + let primaryColor = null; + + if (mainWindow) { + const selectedPrimaryColor = await window.Events.getPrimaryColorSetting(); + primaryColor = + selectedPrimaryColor && (COLORS.PRIMARY as any)[`${selectedPrimaryColor.toUpperCase()}`]; + } switch (theme) { case 'classic-light':