redesign group invitation message type

_locales/en/messages.json

@@ -289,6 +289,9 @@
   "incomingError": {
     "message": "Error handling incoming message"
   },
+  "openGroupInvitation": {
+    "message": "Open group invitation"
+  },
   "media": {
     "message": "Media",
     "description": "Header of the default pane in the media gallery, showing images and videos",

stylesheets/_conversation.scss

@@ -87,11 +87,11 @@
       display: inline-flex;
       flex-direction: column;
 
-      padding: 8px;
+      padding: 0px 12px;
 
       .group-name {
-        font-weight: lighter;
-        padding-bottom: 4px;
+        font-weight: bold;
+        font-size: 18px;
       }
 
       .group-address {
@@ -99,19 +99,17 @@
       }
     }
 
-    .join-btn {
-      background-color: #00f782;
-      color: white;
-      padding: 6px 10px;
-      margin-inline-start: 6px;
-      border-radius: 2px;
-      box-shadow: none;
-      user-select: none;
-      cursor: pointer;
-      transition: $session-transition-duration;
-
-      &:hover {
-        background-color: #00d672;
+    .session-icon-button {
+      @include themify($themes) {
+        background-color: themed('accent');
+        box-shadow: none;
+      }
+      svg path {
+        transition: $session-transition-duration;
+        opacity: 0.6;
+        @include themify($themes) {
+          fill: themed('textColorOpposite');
+        }
       }
     }
   }

ts/components/conversation/GroupInvitation.tsx

@@ -1,41 +1,43 @@
 import React from 'react';
 import classNames from 'classnames';
+import { SessionButton, SessionButtonType } from '../session/SessionButton';
+import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
+import { useTheme } from 'styled-components';
 
-interface Props {
+type Props = {
   serverName: string;
   serverAddress: string;
   direction: string;
-  onClick: any;
-}
+  onJoinClick: () => void;
+};
 
-export class GroupInvitation extends React.Component<Props> {
-  public render() {
-    const classes = ['group-invitation'];
+export const GroupInvitation = (props: Props) => {
+  const theme = useTheme();
+  const classes = ['group-invitation'];
 
-    if (this.props.direction === 'outgoing') {
-      classes.push('invitation-outgoing');
-    }
+  if (props.direction === 'outgoing') {
+    classes.push('invitation-outgoing');
+  }
+  const openGroupInvitation = window.i18n('openGroupInvitation');
 
-    return (
-      <div className={'group-invitation-container'}>
-        <div className={classNames(classes)}>
-          <div className="title">Group invitation</div>
-          <div className="contents">
-            <img
-              alt="group-avatar"
-              src="images/session/session_chat_icon.png"
-              className="invite-group-avatar"
-            />
-            <span className="group-details">
-              <span className="group-name">{this.props.serverName}</span>
-              <span className="group-address">{this.props.serverAddress}</span>
-            </span>
-            <span role="button" className="join-btn" onClick={this.props.onClick}>
-              Join
-            </span>
-          </div>
+  return (
+    <div className="group-invitation-container">
+      <div className={classNames(classes)}>
+        <div className="contents">
+          <SessionIconButton
+            iconType={SessionIconType.Plus}
+            iconColor={theme.colors.accent}
+            theme={theme}
+            iconSize={SessionIconSize.Large}
+            onClick={props.onJoinClick}
+          />
+          <span className="group-details">
+            <span className="group-name">{props.serverName}</span>
+            <span className="group-type">{openGroupInvitation}</span>
+            <span className="group-address">{props.serverAddress}</span>
+          </span>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};

ts/models/message.ts

@@ -281,15 +281,20 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     if (!direction) {
       direction = this.get('type') === 'outgoing' ? 'outgoing' : 'incoming';
     }
-    const serverAddress = invitation.serverAddress?.length
-      ? `${invitation.serverAddress.slice(0, 30)}...`
-      : '';
+
+    let serverAddress = '';
+    try {
+      const url = new URL(invitation.serverAddress);
+      serverAddress = url.origin;
+    } catch (e) {
+      window.log.warn('failed to get hostname from opengroupv2 invitation', invitation);
+    }
 
     return {
       serverName: invitation.serverName,
       serverAddress,
       direction,
-      onClick: () => {
+      onJoinClick: () => {
         void acceptOpenGroupInvitation(invitation.serverAddress);
       },
     };

ts/opengroup/opengroupV2/OpenGroupServerPoller.ts

@@ -409,7 +409,6 @@ const handleCompactPollResults = async (
   serverUrl: string,
   results: Array<ParsedRoomCompactPollResults>
 ) => {
-  // console.warn('compoll res', results);
   await Promise.all(
     results.map(async res => {
       const convoId = getOpenGroupV2ConversationId(serverUrl, res.roomId);

ts/receiver/closedGroups.ts

@@ -643,7 +643,6 @@ function addMemberToZombies(
   if (isAlreadyZombie) {
     return false;
   }
-  // console.warn('Marking user ', userToAdd.key, ' as a zombie');
   convo.set('zombies', [...zombies, userToAdd.key]);
   return true;
 }

ts/session/snode_api/onions.ts

@@ -443,7 +443,6 @@ const sendOnionRequest = async (
   const guardUrl = `https://${nodePath[0].ip}:${nodePath[0].port}${target}`;
   // no logs for that one as we do need to call insecureNodeFetch to our guardNode
   // window.log.info('insecureNodeFetch => plaintext for sendOnionRequest');
-  // console.warn('sendViaOnion payload: ', payload.length);
 
   const response = await insecureNodeFetch(guardUrl, guardFetchOptions);
   return processOnionResponse(reqIdx, response, destCtx.symmetricKey, false, abortSignal);

ts/session/utils/syncUtils.ts

@@ -67,8 +67,6 @@ export const forceSyncConfigurationNowIfNeeded = async (waitForMessageSent = fal
 
     void getCurrentConfigurationMessage(allConvos)
       .then(configMessage => {
-        // console.warn('forceSyncConfigurationNowIfNeeded with', configMessage);
-
         // this just adds the message to the sending queue.
         // if waitForMessageSent is set, we need to effectively wait until then
         // tslint:disable-next-line: no-void-expression
@@ -195,8 +193,6 @@ export const getCurrentConfigurationMessage = async (convos: Array<ConversationM
 
   const activeOpenGroups = [...openGroupsV1Ids, ...opengroupV2CompleteUrls];
 
-  // console.warn('SyncConfiguration', activeOpenGroups);
-
   return new ConfigurationMessage({
     identifier: uuid(),
     timestamp: Date.now(),