feat: invite a friend screen is mostly done

_locales/en/messages.json

@@ -104,8 +104,8 @@
   "contactsNone": "You don't have any contacts yet",
   "contextMenuNoSuggestions": "No Suggestions",
   "continue": "Continue",
-  "conversationsHeader": "Contacts and Groups: $count$",
   "conversationId": "Conversation ID",
+  "conversationsHeader": "Contacts and Groups: $count$",
   "conversationsNone": "You don't have any conversations yet",
   "conversationsSettingsTitle": "Conversations",
   "copiedToClipboard": "Copied",
@@ -458,6 +458,8 @@
   "sendMessage": "Message",
   "sent": "Sent",
   "serverId": "Server ID",
+  "sessionInviteAFriend": "Invite a Friend",
+  "sessionInviteAFriendDescription": "Copy your Account ID then share it with your friends so they can message you.",
   "sessionMessenger": "Session",
   "sessionRecoveryPassword": "Recovery Password",
   "set": "Set",

ts/components/icon/Icons.tsx

@@ -107,8 +107,8 @@ type IconProps = {
 
 export const icons: Record<SessionIconType, IconProps> = {
   addUser: {
-    path: 'M8.85,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12c1.73,0,3.13-1.4,3.13-3.12S10.58,2.17,8.85,2.17z M8.85,0.08c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21s-5.2-2.33-5.2-5.21C3.65,2.42,5.98,0.08,8.85,0.08z M20.83,5.29 c0.54,0,0.98,0.41,1.04,0.93l0.01,0.11v2.08h2.08c0.54,0,0.98,0.41,1.04,0.93v0.12c0,0.54-0.41,0.98-0.93,1.04l-0.11,0.01h-2.08 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08h-2.08c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11 c0-0.54,0.41-0.98,0.93-1.04l0.11-0.01h2.08V6.34C19.79,5.76,20.26,5.29,20.83,5.29z M12.5,12.58c2.8,0,5.09,2.21,5.2,4.99v0.22 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21 c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8 c0-2.8,2.21-5.09,4.99-5.2h0.22h7.29V12.58z',
+    path: 'M21.403 26.276c6.38 0 11.578-5.105 11.578-11.388C32.98 8.605 27.783 3.5 21.403 3.5c-6.38 0-11.578 5.105-11.578 11.388 0 6.283 5.19 11.388 11.578 11.388Zm0-19.755c4.691 0 8.507 3.753 8.507 8.367 0 4.614-3.816 8.368-8.507 8.368-4.69 0-8.507-3.754-8.507-8.368 0-4.614 3.816-8.367 8.507-8.367ZM45.564 35.467h-6.932v-6.82c0-.777-.638-1.404-1.428-1.404-.791 0-1.429.627-1.429 1.404v6.82h-6.932c-.791 0-1.428.626-1.428 1.404 0 .778.637 1.405 1.428 1.405h6.932v6.82c0 .777.638 1.404 1.428 1.404.791 0 1.428-.627 1.428-1.405v-6.82h6.933c.791 0 1.428-.626 1.428-1.404 0-.778-.637-1.404-1.428-1.404Z M29.956 32.446h2.756v-2.213a11.843 11.843 0 0 0-4.99-1.102h-12.93C8.275 29.13 3 34.327 3 40.73v3.05c0 .461.376.831.845.831h1.374c.468 0 .844-.37.844-.83V40.73c0-4.742 3.908-8.578 8.722-8.578h12.921c.776 0 1.52.105 2.242.294h.008Z',
-    viewBox: '0 0 25 21',
+    viewBox: '0 0 50 50',
     ratio: 1,
   },
   addModerator: {

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -13,6 +13,7 @@ import { StyledLeftPaneList } from './LeftPaneList';
 import { ConversationListItem } from './conversation-list-item/ConversationListItem';
 import { OverlayClosedGroup } from './overlay/OverlayClosedGroup';
 import { OverlayCommunity } from './overlay/OverlayCommunity';
+import { OverlayInvite } from './overlay/OverlayInvite';
 import { OverlayMessage } from './overlay/OverlayMessage';
 import { OverlayMessageRequest } from './overlay/OverlayMessageRequest';
 import { OverlayChooseAction } from './overlay/choose-action/OverlayChooseAction';
@@ -53,6 +54,8 @@ const ClosableOverlay = () => {
       return <OverlayMessage />;
     case 'message-requests':
       return <OverlayMessageRequest />;
+    case 'invite-a-friend':
+      return <OverlayInvite />;
     case undefined:
       return null;
     default:

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -148,6 +148,9 @@ export const LeftPaneSectionHeader = () => {
     case 'message-requests':
       leftOverlayHeading = window.i18n('messageRequests');
       break;
+    case 'invite-a-friend':
+      leftOverlayHeading = window.i18n('sessionInviteAFriend');
+      break;
     case 'choose-action':
     default:
       leftOverlayHeading = window.i18n('messagesHeader');

ts/components/leftpane/overlay/OverlayInvite.tsx

@@ -0,0 +1,75 @@
+import useKey from 'react-use/lib/useKey';
+import styled from 'styled-components';
+
+import { useDispatch } from 'react-redux';
+import { resetLeftOverlayMode } from '../../../state/ducks/section';
+import { SessionButton } from '../../basic/SessionButton';
+
+import { ToastUtils, UserUtils } from '../../../session/utils';
+import { SpacerLG, SpacerMD } from '../../basic/Text';
+import { SessionInput } from '../../inputs';
+import { StyledLeftPaneOverlay } from './OverlayMessage';
+
+const StyledDescription = styled.div`
+  color: var(--text-secondary-color);
+  font-family: var(--font-default);
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  text-align: center;
+  margin: 0 auto;
+  text-align: center;
+  padding: 0 var(--margins-md);
+`;
+
+const StyledButtonerContainer = styled.div`
+  .session-button {
+    width: 160px;
+    height: 41px;
+  }
+`;
+
+export const OverlayInvite = () => {
+  const ourSessionID = UserUtils.getOurPubKeyStrFromCache();
+
+  const dispatch = useDispatch();
+
+  function closeOverlay() {
+    dispatch(resetLeftOverlayMode());
+  }
+
+  useKey('Escape', closeOverlay);
+
+  return (
+    <StyledLeftPaneOverlay
+      container={true}
+      flexDirection={'column'}
+      flexGrow={1}
+      alignItems={'center'}
+      padding={'var(--margins-md)'}
+    >
+      <SessionInput
+        autoFocus={true}
+        type="text"
+        value={ourSessionID}
+        isSpecial={true}
+        centerText={true}
+        editable={false}
+        inputDataTestId="invite-account-id"
+      />
+      <SpacerMD />
+      <StyledDescription>{window.i18n('sessionInviteAFriendDescription')}</StyledDescription>
+      <SpacerLG />
+      <StyledButtonerContainer>
+        <SessionButton
+          text={window.i18n('editMenuCopy')}
+          onClick={() => {
+            window.clipboard.writeText(ourSessionID);
+            ToastUtils.pushCopiedToClipBoard();
+          }}
+          dataTestId="invite-account-id-copy"
+        />
+      </StyledButtonerContainer>
+    </StyledLeftPaneOverlay>
+  );
+};

ts/components/leftpane/overlay/choose-action/ActionRow.tsx

@@ -18,14 +18,14 @@ const StyledActionRow = styled.button`
 export const StyledChooseActionTitle = styled.span`
   color: var(--text-primary-color);
   font-size: 18px;
-  padding: var(--margins-sm) 0;
+  padding: var(--margins-md) 0;
   text-align: start;
   width: 100%;
 `;
 
 const StyledIcon = styled.div`
   width: 58px;
-  margin: var(--margins-sm);
+  margin: var(--margins-md) var(--margins-sm);
 `;
 
 const StyledHR = styled.hr`

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -27,6 +27,10 @@ export const OverlayChooseAction = () => {
     dispatch(setLeftOverlayMode('open-group'));
   }, [dispatch]);
 
+  const inviteAFriend = useCallback(() => {
+    dispatch(setLeftOverlayMode('invite-a-friend'));
+  }, [dispatch]);
+
   useKey('Escape', closeOverlay);
 
   useEffect(() => {
@@ -84,6 +88,13 @@ export const OverlayChooseAction = () => {
           onClick={openJoinCommunity}
           dataTestId="chooser-new-community"
         />
+        <ActionRow
+          title={window.i18n('sessionInviteAFriend')}
+          ariaLabel={window.i18n('sessionInviteAFriend')}
+          iconType={'addUser'}
+          onClick={inviteAFriend}
+          dataTestId="invite-a-friend"
+        />
       </StyledActionRowContainer>
       <SpacerSM />
       <ContactsListWithBreaks />

ts/state/ducks/section.tsx

@@ -71,7 +71,8 @@ export type LeftOverlayMode =
   | 'message'
   | 'open-group'
   | 'closed-group'
-  | 'message-requests';
+  | 'message-requests'
+  | 'invite-a-friend';
 
 export function setLeftOverlayMode(overlayMode: LeftOverlayMode): LeftOverlayModeActionType {
   return {

ts/types/LocalizerKeys.ts

@@ -458,6 +458,8 @@ export type LocalizerKeys =
   | 'sending'
   | 'sent'
   | 'serverId'
+  | 'sessionInviteAFriend'
+  | 'sessionInviteAFriendDescription'
   | 'sessionMessenger'
   | 'sessionRecoveryPassword'
   | 'set'