Merge pull request #3157 from yougotwill/fix/ses-2544/about_and_debug_fixes

Fixes to about and debug windows

ts/components/AboutView.tsx

@@ -22,10 +22,13 @@ const StyledContent = styled(Flex)`
   }
 
   img:first-child {
+    filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
+      brightness(106%) contrast(103%);
     margin: var(--margins-2xl) 0 var(--margins-lg);
   }
 
   img:nth-child(2) {
+    filter: var(--session-logo-text-current-filter);
     margin-bottom: var(--margins-xl);
   }
 
@@ -40,13 +43,14 @@ const StyledContent = styled(Flex)`
 
 export const AboutView = () => {
   // Add debugging metadata - environment if not production, app instance name
-  const states = [];
+  const environmentStates = [];
 
   if (window.getEnvironment() !== 'production') {
-    states.push(window.getEnvironment());
+    environmentStates.push(window.getEnvironment());
   }
+
   if (window.getAppInstance()) {
-    states.push(window.getAppInstance());
+    environmentStates.push(window.getAppInstance());
   }
 
   const versionInfo = `v${window.getVersion()}`;
@@ -63,7 +67,7 @@ export const AboutView = () => {
   }, []);
 
   return (
-    <SessionTheme>
+    <SessionTheme runSetup={false}>
       <SessionToastContainer />
       <StyledContent
         container={true}
@@ -83,7 +87,6 @@ export const AboutView = () => {
           width={192}
           height={26}
         />
-
         <CopyToClipboardButton
           className="version"
           text={versionInfo}
@@ -95,11 +98,13 @@ export const AboutView = () => {
           buttonType={SessionButtonType.Simple}
         />
         <CopyToClipboardButton className="os" text={osInfo} buttonType={SessionButtonType.Simple} />
-        <CopyToClipboardButton
-          className="environment"
-          text={states.join(' - ')}
-          buttonType={SessionButtonType.Simple}
-        />
+        {environmentStates.length ? (
+          <CopyToClipboardButton
+            className="environment"
+            text={environmentStates.join(' - ')}
+            buttonType={SessionButtonType.Simple}
+          />
+        ) : null}
         <a href="https://getsession.org">https://getsession.org</a>
         <br />
         <a className="privacy" href="https://getsession.org/privacy-policy">

ts/components/DebugLogView.tsx

@@ -5,6 +5,8 @@ import { switchThemeTo } from '../themes/switchTheme';
 import { fetchNodeLog } from '../util/logging';
 import { SessionButton, SessionButtonType } from './basic/SessionButton';
 import { SessionIconButton } from './icon';
+import { CopyToClipboardButton } from './buttons';
+import { Flex } from './basic/Flex';
 
 const StyledContent = styled.div`
   background-color: var(--modal-background-content-color);
@@ -54,7 +56,14 @@ const DebugLogTextArea = (props: { content: string }) => {
 
 const DebugLogButtons = (props: { content: string }) => {
   return (
-    <div className="buttons">
+    <Flex
+      container={true}
+      width={'fit-content'}
+      justifyContent={'flex-start'}
+      alignItems={'center'}
+      flexGap="var(--margins-md)"
+      className="buttons"
+    >
       <SessionButton
         text={window.i18n('saveLogToDesktop')}
         buttonType={SessionButtonType.Simple}
@@ -66,7 +75,12 @@ const DebugLogButtons = (props: { content: string }) => {
           (window as any).saveLog(props.content);
         }}
       />
-    </div>
+      <CopyToClipboardButton
+        copyContent={props.content}
+        buttonType={SessionButtonType.Simple}
+        hotkey={true}
+      />
+    </Flex>
   );
 };
 
@@ -107,7 +121,7 @@ export const DebugLogView = () => {
   }, []);
 
   return (
-    <SessionTheme>
+    <SessionTheme runSetup={false}>
       <StyledContent>
         <div>
           <SessionIconButton

ts/themes/SessionTheme.tsx

@@ -6,6 +6,7 @@ import { SettingsKey } from '../data/settings-key';
 import { getOppositeTheme, isThemeMismatched } from '../util/theme';
 import { THEME_GLOBALS, setThemeValues } from './globals';
 import { switchThemeTo } from './switchTheme';
+import { Storage } from '../util/storage';
 
 export async function ensureThemeConsistency(): Promise<boolean> {
   const theme = window.Events.getThemeSetting();
@@ -52,10 +53,21 @@ const setupTheme = async () => {
   }
 };
 
-export const SessionTheme = ({ children }: { children: ReactNode }) => {
+export const SessionTheme = ({
+  children,
+  runSetup = true,
+}: {
+  children: ReactNode;
+  /** If we don't have access to some window object functions we may skip theme consistency checks */
+  runSetup?: boolean;
+}) => {
   useMount(() => {
     setThemeValues(THEME_GLOBALS);
-    void setupTheme();
+    if (runSetup) {
+      void Storage.onready(() => {
+        void setupTheme();
+      });
+    }
   });
   return children;
 };