feat: new message description and added zendesk link

_locales/en/messages.json

@@ -300,7 +300,7 @@
   "messageDeletionForbidden": "You don’t have permission to delete others’ messages",
   "messageHash": "Message Hash",
   "messageInfo": "Message Info",
-  "messageNewDescription": "Start a new conversation by entering someone's Account ID or scanning their QR code.",
+  "messageNewDescription": "Start a new conversation by entering your friend's Account ID or ONS.",
   "messageRequestAccepted": "Your message request has been accepted",
   "messageRequestAcceptedOurs": "You have accepted $name$'s message request",
   "messageRequestAcceptedOursNoName": "You have accepted the message request",

ts/components/icon/SessionIconButton.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import _ from 'lodash';
 import { KeyboardEvent, MouseEvent, ReactNode, forwardRef, memo } from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 import { SessionIcon, SessionIconProps } from './SessionIcon';
 
 interface SProps extends SessionIconProps {
@@ -14,7 +14,7 @@ interface SProps extends SessionIconProps {
   dataTestIdIcon?: string;
   id?: string;
   title?: string;
-  style?: object;
+  style?: CSSProperties;
   tabIndex?: number;
   children?: ReactNode;
 }
@@ -88,7 +88,7 @@ const SessionIconButtonInner = forwardRef<HTMLButtonElement, SProps>((props, ref
       onClick={clickHandler}
       style={{
         ...style,
-        display: isHidden ? 'none' : 'flex',
+        display: style?.display ? style.display : isHidden ? 'none' : 'flex',
         margin: margin || '',
         padding: padding || '',
       }}

ts/components/leftpane/overlay/OverlayMessage.tsx

@@ -2,11 +2,11 @@ import { useState } from 'react';
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 
+import { shell } from 'electron';
 import { useDispatch } from 'react-redux';
 import { ConversationTypeEnum } from '../../../models/conversationAttributes';
 import { getConversationController } from '../../../session/conversations';
 import { PubKey } from '../../../session/types';
-import { ToastUtils, UserUtils } from '../../../session/utils';
 import { openConversationWithMessages } from '../../../state/ducks/conversations';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { SessionButton } from '../../basic/SessionButton';
@@ -15,12 +15,28 @@ import { SessionSpinner } from '../../loading';
 import { ONSResolve } from '../../../session/apis/snode_api/onsResolve';
 import { NotFoundError, SnodeResponseError } from '../../../session/utils/errors';
 import { Flex } from '../../basic/Flex';
-import { SpacerLG, SpacerMD } from '../../basic/Text';
+import { SpacerMD } from '../../basic/Text';
-import { YourSessionIDPill, YourSessionIDSelectable } from '../../basic/YourSessionIDPill';
 import { SessionIconButton } from '../../icon';
 import { SessionInput } from '../../inputs';
 
-const SessionIDDescription = styled.div`
+const StyledDescriptionContainer = styled.div`
+  margin: 0 auto;
+  padding: 0 var(--margins-md);
+  text-alignment: center;
+
+  .session-icon-button {
+    border: 1px solid var(--text-secondary-color);
+    border-radius: 9999px;
+    margin-inline-start: var(--margins-xs);
+    transition-duration: var(--default-duration);
+
+    &:hover {
+      border-color: var(--text-primary-color);
+    }
+  }
+`;
+
+const SessionIDDescription = styled.span`
   color: var(--text-secondary-color);
   font-family: var(--font-default);
   font-style: normal;
@@ -44,15 +60,6 @@ const StyledLeftPaneOverlay = styled(Flex)`
   }
 `;
 
-function copyOurSessionID() {
-  const ourSessionId = UserUtils.getOurPubKeyStrFromCache();
-  if (!ourSessionId) {
-    return;
-  }
-  window.clipboard.writeText(ourSessionId);
-  ToastUtils.pushCopiedToClipBoard();
-}
-
 export const OverlayMessage = () => {
   const dispatch = useDispatch();
 
@@ -173,27 +180,29 @@ export const OverlayMessage = () => {
           inputDataTestId="new-session-conversation"
         />
       </div>
-      <SpacerLG />
+
+      <SpacerMD />
 
       <SessionSpinner loading={loading} />
 
-      <SessionIDDescription>{window.i18n('messageNewDescription')}</SessionIDDescription>
+      <StyledDescriptionContainer style={{ margin: '0 auto', textAlign: 'center' }}>
-
+        <SessionIDDescription>{window.i18n('messageNewDescription')}</SessionIDDescription>
-      <Flex container={true} width="100%">
+        <SessionIconButton
-        <SpacerMD />
+          aria-label="external link to Session Zendesk article explaing how Account IDs work"
-        <YourSessionIDPill />
+          iconType="question"
-        <SpacerMD />
+          iconSize={10}
-      </Flex>
+          iconPadding="2px"
-      <Flex
+          padding={'0'}
-        container={true}
+          style={{ display: 'inline-flex' }}
-        justifyContent="space-between"
+          dataTestId="session-zendesk-account-ids"
-        alignItems="center"
+          onClick={() => {
-        width="100%"
+            void shell.openExternal(
-        padding="0 var(--margins-sm)" // YourSessionIDSelectable already has a left margin of 15px
+              'https://sessionapp.zendesk.com/hc/en-us/articles/4439132747033-How-do-Session-ID-usernames-work'
-      >
+            );
-        <YourSessionIDSelectable />
+          }}
-        <SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />
+        />
-      </Flex>
+      </StyledDescriptionContainer>
+
       <SessionButton
         text={window.i18n('next')}
         disabled={disableNextButton}