fix: use correct colors for CopyToClipbaord buttons on ctx

Author: Bilb

ts/components/AboutView.tsx

@@ -7,7 +7,7 @@ import { switchThemeTo } from '../themes/switchTheme';
 import { SessionToastContainer } from './SessionToastContainer';
 import { Flex } from './basic/Flex';
 import { themeStore } from '../state/theme/store';
-import { SessionButton, SessionButtonType } from './basic/SessionButton';
+import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { Localizer } from './basic/Localizer';
 import { CopyToClipboardButton } from './buttons';
 import { tr } from '../localization/localeTools';
@@ -102,6 +102,7 @@ export const AboutView = () => {
             className="version"
             text={versionInfo}
             buttonType={SessionButtonType.Simple}
+            buttonColor={SessionButtonColor.TextPrimary}
           />
           <SessionButton
             buttonType={SessionButtonType.Simple}
@@ -119,17 +120,20 @@ export const AboutView = () => {
             className="os"
             text={systemInfo}
             buttonType={SessionButtonType.Simple}
+            buttonColor={SessionButtonColor.TextPrimary}
           />
           <CopyToClipboardButton
             className="commitHash"
             text={commitInfo}
             buttonType={SessionButtonType.Simple}
+            buttonColor={SessionButtonColor.TextPrimary}
           />
           {environmentStates.length ? (
             <CopyToClipboardButton
               className="environment"
               text={environmentStates.join(' - ')}
               buttonType={SessionButtonType.Simple}
+              buttonColor={SessionButtonColor.TextPrimary}
             />
           ) : null}
           <a href="https://getsession.org" style={{ margin: '0 0 var(--margins-lg) 0' }}>

ts/components/SessionWrapperModal.tsx

@@ -190,20 +190,23 @@ export function ModalBottomButtonWithBorder({
   onClick,
   buttonColor,
   dataTestId,
+  buttonType,
   disabled,
 }: {
   text: string;
   onClick: () => void | Promise<void>;
   disabled?: boolean;
   buttonColor?: SessionButtonColor;
   dataTestId?: SessionDataTestId;
+  buttonType?: SessionButtonType;
 }) {
   return (
     <SessionButton
       text={text}
       onClick={onClick}
       disabled={disabled}
       buttonColor={buttonColor}
+      buttonType={buttonType}
       dataTestId={dataTestId}
       style={{ minWidth: 'var(--modal-actions-outline-min-width)' }}
     />

ts/components/basic/SessionButton.tsx

@@ -24,8 +24,7 @@ export enum SessionButtonColor {
   Purple = 'purple',
   Orange = 'orange',
   Red = 'red',
-  White = 'white',
-  Black = 'black',
+  TextPrimary = 'text-primary',
   Grey = 'gray',
   Primary = 'primary',
   Tertiary = 'background-tertiary',

ts/components/buttons/CopyToClipboardButton.tsx

@@ -5,7 +5,7 @@ import useTimeoutFn from 'react-use/lib/useTimeoutFn';
 
 import { useHotkey } from '../../hooks/useHotkey';
 import { ToastUtils } from '../../session/utils';
-import { SessionButtonProps } from '../basic/SessionButton';
+import { SessionButtonProps, type SessionButtonColor } from '../basic/SessionButton';
 import { SessionIconButtonProps, SessionLucideIconButton } from '../icon/SessionIconButton';
 import { LUCIDE_ICONS_UNICODE } from '../icon/lucide';
 import type { SessionIconSize } from '../icon';
@@ -17,12 +17,22 @@ type CopyProps = {
   copyContent?: string;
   onCopyComplete?: (copiedValue: string | undefined) => void;
   hotkey?: boolean;
-};
+} & { buttonColor: SessionButtonColor };
 
-type CopyToClipboardButtonProps = Omit<SessionButtonProps, 'children' | 'onClick'> & CopyProps;
+type CopyToClipboardButtonProps = Omit<SessionButtonProps, 'children' | 'onClick' | 'buttonColor'> &
+  CopyProps;
 
 export const CopyToClipboardButton = (props: CopyToClipboardButtonProps) => {
-  const { copyContent, onCopyComplete, hotkey = false, text } = props;
+  const {
+    copyContent,
+    onCopyComplete,
+    hotkey = false,
+    text,
+    buttonType,
+    buttonColor,
+    dataTestId,
+    disabled,
+  } = props;
   const [copied, setCopied] = useState(false);
 
   // reset the copied state after 5 seconds
@@ -59,9 +69,10 @@ export const CopyToClipboardButton = (props: CopyToClipboardButtonProps) => {
       aria-label={'copy to clipboard button'}
       text={text && !isEmpty(text) ? text : copied ? tr('copied') : tr('copy')}
       onClick={onClick}
-      buttonColor={props.buttonColor}
-      dataTestId={props.dataTestId}
-      disabled={props.disabled}
+      buttonColor={buttonColor}
+      dataTestId={dataTestId}
+      disabled={disabled}
+      buttonType={buttonType}
     />
   );
 };

ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx

@@ -10,6 +10,7 @@ import { ContactName } from '../../../../ContactName/ContactName';
 import { useSelectedConversationKey } from '../../../../../../state/selectors/selectedConversation';
 import { useShowUserDetailsCbFromConversation } from '../../../../../menuAndSettingsHooks/useShowUserDetailsCb';
 import { PubKey } from '../../../../../../session/types';
+import { SessionButtonColor } from '../../../../../basic/SessionButton';
 
 const StyledFromContainer = styled.div`
   display: flex;
@@ -60,6 +61,7 @@ export const MessageFrom = (props: { sender: string; isSenderAdmin: boolean }) =
             iconSize={'small'}
             copyContent={`${profileName} ${sender}`}
             margin={'0 0 0 var(--margins-xs)'}
+            buttonColor={SessionButtonColor.TextPrimary}
           />
         ) : null}
       </Flex>

ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx

@@ -39,6 +39,7 @@ import { useCurrentUserHasPro } from '../../../../../../hooks/useHasPro';
 import { ProIconButton } from '../../../../../buttons/ProButton';
 import { assertUnreachable } from '../../../../../../types/sqlSharedTypes';
 import { ProMessageFeature } from '../../../../../../models/proMessageFeature';
+import { SessionButtonColor } from '../../../../../basic/SessionButton';
 
 export const MessageInfoLabel = styled.label<{ color?: string }>`
   font-size: var(--font-size-lg);
@@ -78,6 +79,7 @@ export const LabelWithInfo = (props: LabelWithInfoProps) => {
             iconSize={'small'}
             copyContent={props.info}
             margin={'0 0 0 var(--margins-xs)'}
+            buttonColor={SessionButtonColor.TextPrimary}
           />
         ) : null}
       </Flex>

ts/components/dialog/UserProfileModal.tsx

@@ -115,7 +115,7 @@ export const UserProfileModal = ({
           {!isBlindedAndNotResolved && (
             <CopyToClipboardButton
               copyContent={conversationIdToDisplay}
-              buttonColor={SessionButtonColor.PrimaryDark}
+              buttonColor={SessionButtonColor.TextPrimary}
               dataTestId="copy-button-account-id"
               buttonType={SessionButtonType.Outline}
               hotkey={true}

ts/components/dialog/debug/components.tsx

@@ -527,7 +527,11 @@ export const AboutInfo = () => {
       <SpacerXS />
       <Flex $container={true} width="100%" $alignItems="center" $flexGap="var(--margins-xs)">
         <h2>About</h2>
-        <CopyToClipboardIcon iconSize={'small'} copyContent={aboutInfo.join('\n')} />
+        <CopyToClipboardIcon
+          iconSize={'small'}
+          copyContent={aboutInfo.join('\n')}
+          buttonColor={SessionButtonColor.None}
+        />
       </Flex>
       <Flex
         $container={true}
@@ -550,7 +554,11 @@ export const AboutInfo = () => {
               $flexGap="var(--margins-xs)"
             >
               <p style={{ userSelect: 'text', lineHeight: 1.5 }}>{info}</p>
-              <CopyToClipboardIcon iconSize={'small'} copyContent={info} />
+              <CopyToClipboardIcon
+                iconSize={'small'}
+                copyContent={info}
+                buttonColor={SessionButtonColor.None}
+              />
             </Flex>
           );
         })}
@@ -579,7 +587,11 @@ export const OtherInfo = () => {
       <Flex $container={true} width="100%" $alignItems="center" $flexGap="var(--margins-xs)">
         <h2>Other Info</h2>
         {otherInfo.value ? (
-          <CopyToClipboardIcon iconSize={'small'} copyContent={otherInfo.value.join('\n')} />
+          <CopyToClipboardIcon
+            iconSize={'small'}
+            copyContent={otherInfo.value.join('\n')}
+            buttonColor={SessionButtonColor.None}
+          />
         ) : null}
       </Flex>
       <Flex
@@ -607,7 +619,11 @@ export const OtherInfo = () => {
                 $flexGap="var(--margins-xs)"
               >
                 <p style={{ userSelect: 'text', lineHeight: 1.5 }}>{info}</p>
-                <CopyToClipboardIcon iconSize={'small'} copyContent={info} />
+                <CopyToClipboardIcon
+                  iconSize={'small'}
+                  copyContent={info}
+                  buttonColor={SessionButtonColor.None}
+                />
               </Flex>
             ))
           : null}

ts/components/dialog/user-settings/pages/RecoveryPasswordSettingsPage.tsx

@@ -171,6 +171,7 @@ export function RecoveryPasswordSettingsPage(modalState: UserSettingsModalState)
             <CopyToClipboardButton
               copyContent={recoveryPhrase}
               buttonType={SessionButtonType.Outline}
+              buttonColor={SessionButtonColor.TextPrimary}
             />
           )}
           <SessionButton

ts/components/leftpane/ActionsPanel.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useInterval from 'react-use/lib/useInterval';
 import useTimeoutFn from 'react-use/lib/useTimeoutFn';
+import useKey from 'react-use/lib/useKey';
 
 import useMount from 'react-use/lib/useMount';
 import useThrottleFn from 'react-use/lib/useThrottleFn';
@@ -58,7 +59,7 @@ import { NetworkTime } from '../../util/NetworkTime';
 import { Storage } from '../../util/storage';
 import { getFileInfoFromFileServer } from '../../session/apis/file_server_api/FileServerApi';
 import { themesArray } from '../../themes/constants/colors';
-import { isDebugMode } from '../../shared/env_vars';
+import { isDebugMode, isDevProd } from '../../shared/env_vars';
 import { GearAvatarButton } from '../buttons/avatar/GearAvatarButton';
 import { useZoomShortcuts } from '../../hooks/useZoomingShortcut';
 import { assertUnreachable } from '../../types/sqlSharedTypes';
@@ -94,6 +95,18 @@ const Section = (props: { type: SectionType }) => {
   const isModalVisible = useSelector(getIsModalVisible);
   const isDarkTheme = useIsDarkTheme();
 
+  // for devs/QA, it's convenient to be able to switch themes with ctrl+t
+  useKey(
+    (event: KeyboardEvent) => {
+      return event.ctrlKey && event.key === 't';
+    },
+    () => {
+      if (isDevProd()) {
+        void handleThemeSwitch();
+      }
+    }
+  );
+
   const handleClick = () => {
     if (type === SectionType.DebugMenu) {
       dispatch(updateDebugMenuModal({}));