match group invitation design with ios

_locales/en/messages.json

@@ -292,8 +292,23 @@
   "openGroupInvitation": {
     "message": "Open group invitation"
   },
-  "joinOpenGroupAfterInvitationConfirmation": {
-    "message": "Do you want to join this open group?"
+  "joinOpenGroupAfterInvitationConfirmationTitle": {
+    "message": "Join $roomName$?",
+    "placeholders": {
+      "count": {
+        "roomName": "$1",
+        "example": "Main"
+      }
+    }
+  },
+  "joinOpenGroupAfterInvitationConfirmationDesc": {
+    "message": "Are you sure you wan to join the $roomName$ open group?",
+    "placeholders": {
+      "count": {
+        "roomName": "$1",
+        "example": "Main"
+      }
+    }
   },
   "media": {
     "message": "Media",
@@ -1593,9 +1608,6 @@
     "message": "Add",
     "androidKey": "fragment_add_public_chat_add_button_title_1"
   },
-  "groupInvitation": {
-    "message": "Group Invitation"
-  },
   "addingContacts": {
     "message": "Adding contacts to"
   },

stylesheets/_conversation.scss

@@ -31,7 +31,6 @@
 }
 
 .check-box-container {
-  // background-color: blue;
   align-items: center;
   flex-direction: row;
   display: inline-flex;
@@ -52,15 +51,19 @@
 }
 
 .group-invitation {
-  background-color: #f4f4f0;
+  @include themify($themes) {
+    background: themed('receivedMessageBackground');
+  }
+  &.invitation-outgoing {
+    @include themify($themes) {
+      background: themed('sentMessageBackground');
+    }
+  }
   display: inline-block;
   margin: 4px 16px;
   padding: 4px;
 
-  border: solid;
-  border-width: 0.5px;
-  border-radius: 4px;
-  border-color: #e0e0e0;
+  border-radius: 15px;
 
   align-self: flex-start;
 
@@ -104,6 +107,7 @@
         background-color: themed('accent');
         box-shadow: none;
       }
+      filter: brightness(1.05);
       svg path {
         transition: $session-transition-duration;
         opacity: 0.6;

ts/interactions/message.ts

@@ -241,9 +241,10 @@ async function acceptOpenGroupInvitationV1(serverAddress: string) {
   }
 }
 
-const acceptOpenGroupInvitationV2 = (completeUrl: string) => {
+const acceptOpenGroupInvitationV2 = (completeUrl: string, roomName?: string) => {
   window.confirmationDialog({
-    message: window.i18n('joinOpenGroupAfterInvitationConfirmation'),
+    title: window.i18n('joinOpenGroupAfterInvitationConfirmationTitle', roomName),
+    message: window.i18n('joinOpenGroupAfterInvitationConfirmationDesc', roomName),
     resolve: () => joinOpenGroupV2WithUIEvents(completeUrl, true),
   });
   // this function does not throw, and will showToasts if anything happens
@@ -252,9 +253,9 @@ const acceptOpenGroupInvitationV2 = (completeUrl: string) => {
 /**
  * Accepts a v1 (channelid defaults to 1) url or a v2 url (with pubkey)
  */
-export const acceptOpenGroupInvitation = async (completeUrl: string) => {
+export const acceptOpenGroupInvitation = async (completeUrl: string, roomName?: string) => {
   if (completeUrl.match(openGroupV2CompleteURLRegex)) {
-    acceptOpenGroupInvitationV2(completeUrl);
+    acceptOpenGroupInvitationV2(completeUrl, roomName);
   } else {
     await acceptOpenGroupInvitationV1(completeUrl);
   }

ts/models/message.ts

@@ -186,7 +186,7 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       return window.i18n('incomingError');
     }
     if (this.isGroupInvitation()) {
-      return `<${window.i18n('groupInvitation')}>`;
+      return `😎 ${window.i18n('openGroupInvitation')}`;
     }
     return this.get('body');
   }
@@ -295,7 +295,7 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       serverAddress,
       direction,
       onJoinClick: () => {
-        void acceptOpenGroupInvitation(invitation.serverAddress);
+        void acceptOpenGroupInvitation(invitation.serverAddress, invitation.serverName);
       },
     };
   }

ts/opengroup/opengroupV2/OpenGroupServerPoller.ts

@@ -22,7 +22,7 @@ import autoBind from 'auto-bind';
 import { sha256 } from '../../session/crypto';
 import { fromBase64ToArrayBuffer } from '../../session/utils/String';
 
-const pollForEverythingInterval = SECONDS * 6;
+const pollForEverythingInterval = SECONDS * 4;
 const pollForRoomAvatarInterval = DAYS * 1;
 const pollForMemberCountInterval = MINUTES * 10;