feat: improved about screen info

more info and copy to clipboard

about_preload.js

@@ -3,6 +3,7 @@
 
 const { ipcRenderer } = require('electron');
 const url = require('url');
+const os = require('os');
 const i18n = require('./ts/util/i18n');
 
 const config = url.parse(window.location.toString(), true).query;
@@ -12,6 +13,8 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
 window.theme = config.theme;
 window.i18n = i18n.setupi18n(locale, localeMessages);
 
+window.getOSRelease = () =>
+  `${os.type()} ${os.release()}, Node.js ${config.node_version} ${os.platform()} ${os.arch()}`;
 window.getEnvironment = () => config.environment;
 window.getVersion = () => config.version;
 window.getCommitHash = () => config.commitHash;
@@ -25,6 +28,4 @@ window.Signal = {
   },
 };
 
-window.closeAbout = () => ipcRenderer.send('close-about');
-
 require('./ts/util/logging');

debug_log_preload.js

@@ -26,7 +26,8 @@ window.getEnvironment = () => config.environment;
 
 require('./ts/util/logging');
 
-window.getOSRelease = () => `${os.type()} ${os.release} ${os.platform()}`;
+window.getOSRelease = () =>
+  `${os.type()} ${os.release()}, Node.js ${config.node_version} ${os.platform()} ${os.arch()}`;
 window.getCommitHash = () => config.commitHash;
 
 window.closeDebugLog = () => ipcRenderer.send('close-debug-log');

ts/components/AboutView.tsx

@@ -2,24 +2,35 @@ import { useEffect } from 'react';
 import styled from 'styled-components';
 import { SessionTheme } from '../themes/SessionTheme';
 import { switchThemeTo } from '../themes/switchTheme';
+import { SessionToastContainer } from './SessionToastContainer';
+import { Flex } from './basic/Flex';
+import { SessionButtonType } from './basic/SessionButton';
+import { CopyToClipboardButton } from './buttons/CopyToClipboardButton';
 
-const StyledContent = styled.div`
+const StyledContent = styled(Flex)`
   background-color: var(--background-primary-color);
   color: var(--text-primary-color);
   text-align: center;
 
   font-family: var(--font-default);
-  font-size: 14px;
+  font-size: var(--font-size-sm);
   height: 100%;
   width: 100%;
 
+  a {
+    color: var(--text-primary-color);
+  }
+
   img {
-    padding: 12px;
+    margin: var(--margins-lg) 0 var(--margins-md);
-    margin-top: 1rem;
   }
 
-  a {
+  .session-button {
-    color: var(--text-primary-color);
+    font-size: var(--font-size-sm);
+    font-weight: 400;
+    min-height: var(--font-size-sm);
+    height: font-size: var(--font-size-sm);
+    margin-bottom: var(--margins-xs;
   }
 `;
 
@@ -34,35 +45,63 @@ export const AboutView = () => {
     states.push(window.getAppInstance());
   }
 
+  const versionInfo = `v${window.getVersion()}`;
+  const commitInfo = `Commit ${window.getCommitHash()}` || '';
+  const osInfo = `${window.getOSRelease()}`;
+
   useEffect(() => {
     if (window.theme) {
       void switchThemeTo({
         theme: window.theme,
+        usePrimaryColor: true,
       });
     }
   }, []);
 
   return (
     <SessionTheme>
-      <StyledContent>
+      <SessionToastContainer />
+      <StyledContent
+        container={true}
+        flexDirection={'column'}
+        justifyContent={'center'}
+        alignItems={'center'}
+      >
         <img src="images/session/session_icon.png" width="250" height="250" alt="session icon" />
 
-        <div className="version">{`v${window.getVersion()}`}</div>
+        <CopyToClipboardButton
-        <div className="commitHash">{window.getCommitHash() || ''}</div>
+          className="version"
-        <div className="environment">{states.join(' - ')}</div>
+          text={versionInfo}
-        <div>
+          copyContent={versionInfo}
-          <a href="https://getsession.org">getsession.org</a>
+          buttonType={SessionButtonType.Simple}
-        </div>
+        />
+        <CopyToClipboardButton
+          className="commitHash"
+          text={commitInfo}
+          copyContent={commitInfo}
+          buttonType={SessionButtonType.Simple}
+        />
+        <CopyToClipboardButton
+          className="os"
+          text={osInfo}
+          copyContent={osInfo}
+          buttonType={SessionButtonType.Simple}
+        />
+        <CopyToClipboardButton
+          className="environment"
+          text={states.join(' - ')}
+          copyContent={states.join(' - ')}
+          buttonType={SessionButtonType.Simple}
+        />
+        <a href="https://getsession.org">https://getsession.org</a>
+        <br />
+        <a className="privacy" href="https://getsession.org/privacy-policy">
+          {window.i18n('privacyPolicy')}
+        </a>
+        <a className="privacy" href="https://getsession.org/terms-of-service/">
+          {window.i18n('termsOfService')}
+        </a>
         <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>
   );

ts/components/DebugLogView.tsx

@@ -73,9 +73,9 @@ const DebugLogViewAndSave = () => {
   const [content, setContent] = useState(window.i18n('loading'));
 
   useEffect(() => {
-    const operatingSystemInfo = `Operating System: ${(window as any).getOSRelease()}`;
+    const operatingSystemInfo = `Operating System ${window.getOSRelease()}`;
 
-    const commitHashInfo = window.getCommitHash() ? `Commit Hash: ${window.getCommitHash()}` : '';
+    const commitHashInfo = window.getCommitHash() ? `Commit ${window.getCommitHash()}` : '';
 
     // eslint-disable-next-line more/no-then
     fetchNodeLog()
@@ -100,6 +100,7 @@ export const DebugLogView = () => {
     if (window.theme) {
       void switchThemeTo({
         theme: window.theme,
+        usePrimaryColor: true,
       });
     }
   }, []);

ts/components/basic/SessionButton.tsx

@@ -122,6 +122,7 @@ export type SessionButtonProps = {
   children?: ReactNode;
   margin?: string;
   reference?: any;
+  className?: string;
   dataTestId?: string;
 };
 
@@ -132,6 +133,7 @@ export const SessionButton = (props: SessionButtonProps) => {
       ? SessionButtonShape.None
       : SessionButtonShape.Round,
     reference,
+    className,
     dataTestId,
     buttonColor,
     text,
@@ -158,7 +160,8 @@ export const SessionButton = (props: SessionButtonProps) => {
         buttonShape,
         buttonType,
         buttonColor ?? '',
-        disabled && 'disabled'
+        disabled && 'disabled',
+        className
       )}
       role="button"
       onClick={onClickFn}

ts/components/buttons/CopyToClipboardButton.tsx

@@ -1,15 +1,17 @@
+import { isEmpty } from 'lodash';
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { ToastUtils } from '../../session/utils';
 import { SessionButton, SessionButtonProps } from '../basic/SessionButton';
 
-type Props = Omit<SessionButtonProps, 'children' | 'text' | 'onClick'> & {
+type Props = Omit<SessionButtonProps, 'children' | 'onClick'> & {
   copyContent: string;
   onCopyComplete?: (copiedValue: string | undefined) => void;
+  className?: string;
 };
 
 export const CopyToClipboardButton = (props: Props) => {
-  const { copyContent, onCopyComplete } = props;
+  const { className, copyContent, onCopyComplete, text } = props;
   const [copied, setCopied] = useState(false);
 
   const [{ value }, copyToClipboard] = useCopyToClipboard();
@@ -17,7 +19,14 @@ export const CopyToClipboardButton = (props: Props) => {
   return (
     <SessionButton
       {...props}
-      text={copied ? window.i18n('copiedToClipboard') : window.i18n('editMenuCopy')}
+      className={className}
+      text={
+        !isEmpty(text)
+          ? text
+          : copied
+            ? window.i18n('copiedToClipboard')
+            : window.i18n('editMenuCopy')
+      }
       onClick={() => {
         copyToClipboard(copyContent);
         ToastUtils.pushCopiedToClipBoard();

ts/mains/main_node.ts

@@ -612,7 +612,7 @@ async function showAbout() {
   const options = {
     width: 500,
     height: 500,
-    resizable: true,
+    resizable: false,
     title: locale.messages.about,
     autoHideMenuBar: true,
     backgroundColor: classicDark['--background-primary-color'],

ts/window.d.ts

@@ -78,6 +78,7 @@ declare global {
     getAppInstance: () => string;
     getCommitHash: () => string | undefined;
     getVersion: () => string;
+    getOSRelease: () => string;
     setAutoHideMenuBar: (val: boolean) => void;
     setMenuBarVisibility: (val: boolean) => void;
     contextMenuShown: boolean;