Closed group update message stylgin

_locales/ar/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/bg/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/en/messages.json

@@ -1994,7 +1994,7 @@
       "Shown in the conversation history when someone updates the group"
   },
   "titleIsNow": {
-    "message": "Title is now '$name$'",
+    "message": "Group name has been set to '$name$'.",
     "description":
       "Shown in the conversation history when someone changes the title of the group",
     "placeholders": {
@@ -2165,6 +2165,9 @@
     "description":
       "Title shown to the user to confirm they want to leave the group"
   },
+  "noContactsForGroup": {
+    "message": "You don't have any contacts to start a group with."
+  },
   "copiedPublicKey": {
     "message": "Session ID copied",
     "description": "A toast message telling the user that the key was copied"
@@ -2725,6 +2728,9 @@
   "joinOpenGroup": {
     "message": "Join Open Group"
   },
+  "newClosedGroup": {
+    "message": "New Closed Group"
+  },
   "createClosedGroup": {
     "message": "Create Closed Group"
   },

_locales/es_419/messages.json

@@ -1368,7 +1368,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/hi/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/hr/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/kn/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/ko/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/mk/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/sr/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/uk/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

_locales/vi/messages.json

@@ -1504,7 +1504,7 @@
         "description": "Shown in the conversation history when someone updates the group"
     },
     "titleIsNow": {
-        "message": "Title is now '$name$'",
+        "message": "Group name has been set to '$name$'",
         "description": "Shown in the conversation history when someone changes the title of the group",
         "placeholders": {
             "name": {

js/models/messages.js

@@ -203,6 +203,13 @@
       }
       return conversation.getDisplayName();
     },
+    getLokiNameForNumber(number) {
+      const conversation = ConversationController.get(number);
+      if (!conversation) {
+        return number;
+      }
+      return conversation.getLokiProfile().displayName;
+    },
     getDescription() {
       if (this.isGroupUpdate()) {
         const groupUpdate = this.get('group_update');
@@ -224,10 +231,10 @@
           messages.push(i18n('titleIsNow', groupUpdate.name));
         }
         if (groupUpdate.joined && groupUpdate.joined.length) {
-          const names = _.map(
-            groupUpdate.joined,
-            this.getNameForNumber.bind(this)
+          const names = groupUpdate.joined.map(name =>
+            this.getLokiNameForNumber(name)
           );
+
           if (names.length > 1) {
             messages.push(i18n('multipleJoinedTheGroup', names.join(', ')));
           } else {

js/views/group_update_view.js

@@ -19,7 +19,7 @@
 
       const messages = ['Updated the group.'];
       if (this.model.name) {
-        messages.push(`Title is now '${this.model.name}'.`);
+        messages.push(`Group name has been set to '${this.model.name}'.`);
       }
       if (this.model.joined) {
         messages.push(`${this.model.joined.join(', ')} joined the group`);

stylesheets/_conversation.scss

@@ -210,7 +210,7 @@
 
   align-self: flex-start;
 
-  box-shadow: 2px 2px lightgrey;
+  box-shadow: none;
 
   .title {
     margin: 6px;
@@ -246,17 +246,18 @@
     }
 
     .join-btn {
-      background-color: #e0e0e0;
+      background-color: #00f782;
+      color: white;
       padding: 6px 10px;
       margin-left: 6px;
-      border-radius: 6px;
-      box-shadow: 2px 2px 1px #c0c0c0;
-      color: #404040;
+      border-radius: 2px;
+      box-shadow: none;
       user-select: none;
       cursor: pointer;
+      transition: 0.25s;
 
       &:hover {
-        background-color: #c7c7c7;
+        background-color: #00d672;
       }
     }
   }
@@ -266,7 +267,7 @@
   .group-invitation {
     background-color: #242424;
     border-color: #303030;
-    box-shadow: 2px 2px #4f4f4f;
+    box-shadow: none;
 
     .title {
       color: lightgrey;

stylesheets/_modules.scss

@@ -1235,11 +1235,17 @@
 }
 
 .module-group-notification__change {
-  margin-top: 10px;
+  background-color: #212121;
+  width: 90%;
+  max-width: 700px;
+  margin: 10px auto;
+  padding: 5px 20px;
+  border-radius: 4px;
 }
 
 .module-group-notification__contact {
-  font-weight: 300;
+  font-family: 'SF Pro Text';
+  font-weight: bold;
 }
 
 // Module: Reset Session Notification

stylesheets/_session.scss

@@ -150,6 +150,11 @@ div.spacer-lg {
   width: 100%;
 }
 
+input,
+textarea {
+  caret-color: $session-color-green !important;
+}
+
 @mixin text-highlight($color) {
   background-color: $color;
   padding: $session-margin-xs $session-margin-sm;
@@ -269,7 +274,7 @@ $session_message-container-border-radius: 5px;
   &.brand {
     color: $session-color-white;
 
-    &:hover {
+    &:not(.disabled):hover {
       filter: brightness(90%);
     }
 
@@ -357,7 +362,7 @@ $session_message-container-border-radius: 5px;
     font-family: $session-font-family;
     border-radius: 500px;
 
-    &:hover {
+    &:not(.disabled):hover {
       color: $session-color-white;
       border-color: $session-color-white;
     }
@@ -1698,6 +1703,12 @@ input {
     display: flex;
     flex-direction: column;
   }
+
+  &__no-contacts {
+    font-family: 'SpaceMono';
+    text-align: center;
+    padding: 20px;
+  }
 }
 .create-group-name-input {
   .session-id-editable {
@@ -1706,6 +1717,10 @@ input {
     textarea {
       padding-bottom: 0px !important;
     }
+
+    &-disabled {
+      border: 1px solid $session-color-dark-grey !important;
+    }
   }
 }
 

test/models/messages_test.js

@@ -101,7 +101,7 @@ describe('MessageCollection', () => {
     message = messages.add({ group_update: { name: 'blerg' } });
     assert.equal(
       message.getDescription(),
-      "Title is now 'blerg'",
+      "Group name has been set to 'blerg'",
       'Returns a single notice if only group_updates.name changes.'
     );
 
@@ -126,7 +126,7 @@ describe('MessageCollection', () => {
     });
     assert.equal(
       message.getDescription(),
-      "Title is now 'blerg', Bob joined the group",
+      "Group name has been set to 'blerg', Bob joined the group",
       'Notes when there are multiple changes to group_updates properties.'
     );
 

ts/components/conversation/GroupNotification.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 // import classNames from 'classnames';
 import { compact, flatten } from 'lodash';
 
-import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
 
@@ -39,12 +38,7 @@ export class GroupNotification extends React.Component<Props> {
               key={`external-${contact.phoneNumber}`}
               className="module-group-notification__contact"
             >
-              <ContactName
-                i18n={i18n}
-                phoneNumber={contact.phoneNumber}
-                profileName={contact.profileName}
-                name={contact.name}
-              />
+              {contact.profileName}
             </span>
           );
 

ts/components/session/SessionChannelSettings.tsx

@@ -213,6 +213,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
             <div className="text-subtle">
               {window.i18n('members', memberCount)}
             </div>
+            <div className="spacer-lg" />
           </>
         )}
         <input

ts/components/session/SessionClosableOverlay.tsx

@@ -83,6 +83,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
     return friends;
   }
 
+  // tslint:disable-next-line max-func-body-length */
   public render(): JSX.Element {
     const {
       overlayMode,
@@ -129,7 +130,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
         placeholder = window.i18n('channelUrlPlaceholder');
         break;
       case 'closed-group':
-        title = window.i18n('createClosedGroup');
+        title = window.i18n('newClosedGroup');
         buttonText = window.i18n('createClosedGroup');
         descriptionLong = window.i18n('createClosedGroupDescription');
         subtitle = window.i18n('createClosedGroupNamePrompt');
@@ -142,6 +143,10 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
     const { groupName, selectedMembers } = this.state;
     const ourSessionID = window.textsecure.storage.user.getNumber();
 
+    const contacts = this.getContacts();
+    const noContactsForClosedGroup =
+      overlayMode === SessionGroupType.Closed && contacts.length === 0;
+
     return (
       <div className="module-left-pane-overlay">
         <div className="exit">
@@ -155,6 +160,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
         <div className="spacer-md" />
 
         <h2>{title}</h2>
+
         <h3>
           {subtitle}
           <hr className="green-border" />
@@ -165,12 +171,14 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
           <div className="create-group-name-input">
             <SessionIdEditable
               ref={this.inputRef}
-              editable={true}
+              editable={!noContactsForClosedGroup}
               placeholder={placeholder}
               value={this.state.groupName}
               maxLength={window.CONSTANTS.MAX_GROUPNAME_LENGTH}
               onChange={this.onGroupNameChanged}
             />
+
+            {/*  */}
           </div>
         ) : (
           <SessionIdEditable
@@ -188,9 +196,15 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
             <div className="spacer-lg" />
 
             <div className="group-member-list__container">
-              <div className="group-member-list__selection">
-                {this.renderMemberList()}
-              </div>
+              {noContactsForClosedGroup ? (
+                <div className="group-member-list__no-contacts">
+                  {window.i18n('noContactsForGroup')}
+                </div>
+              ) : (
+                <div className="group-member-list__selection">
+                  {this.renderMemberList()}
+                </div>
+              )}
             </div>
 
             <div className="spacer-lg" />
@@ -227,6 +241,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
           buttonColor={SessionButtonColor.Green}
           buttonType={SessionButtonType.BrandOutline}
           text={buttonText}
+          disabled={noContactsForClosedGroup}
           onClick={() => onButtonClick(groupName, selectedMembers)}
         />
       </div>