Minor UI improvements (#4431)

webapp/components/channel_header.jsx

@@ -393,7 +393,7 @@ export default class ChannelHeader extends React.Component {
                     >
                         <FormattedMessage
                             id='channel_header.channelHeader'
-                            defaultMessage='Set Channel Header...'
+                            defaultMessage='Edit Channel Header'
                         />
                     </ToggleModalButton>
                 </li>
@@ -417,6 +417,32 @@ export default class ChannelHeader extends React.Component {
                 </li>
             );
 
+            dropdownContents.push(
+                <li
+                    key='notification_preferences'
+                    role='presentation'
+                >
+                    <ToggleModalButton
+                        role='menuitem'
+                        dialogType={ChannelNotificationsModal}
+                        dialogProps={{
+                            channel,
+                            channelMember: this.state.memberChannel,
+                            currentUser: this.state.currentUser
+                        }}
+                    >
+                        <FormattedMessage
+                            id='channel_header.notificationPreferences'
+                            defaultMessage='Notification Preferences'
+                        />
+                    </ToggleModalButton>
+                </li>
+            );
+
+            dropdownContents.push(
+                <li className='divider'/>
+            );
+
             if (!ChannelStore.isDefault(channel)) {
                 dropdownContents.push(
                     <li
@@ -476,25 +502,7 @@ export default class ChannelHeader extends React.Component {
             }
 
             dropdownContents.push(
-                <li
+                <li className='divider'/>
-                    key='notification_preferences'
-                    role='presentation'
-                >
-                    <ToggleModalButton
-                        role='menuitem'
-                        dialogType={ChannelNotificationsModal}
-                        dialogProps={{
-                            channel,
-                            channelMember: this.state.memberChannel,
-                            currentUser: this.state.currentUser
-                        }}
-                    >
-                        <FormattedMessage
-                            id='channel_header.notificationPreferences'
-                            defaultMessage='Notification Preferences'
-                        />
-                    </ToggleModalButton>
-                </li>
             );
 
             const deleteOption = (
@@ -509,7 +517,7 @@ export default class ChannelHeader extends React.Component {
                     >
                         <FormattedMessage
                             id='channel_header.delete'
-                            defaultMessage='Delete {term}...'
+                            defaultMessage='Delete {term}'
                             values={{
                                 term: (channelTerm)
                             }}
@@ -531,7 +539,7 @@ export default class ChannelHeader extends React.Component {
                         >
                             <FormattedMessage
                                 id='channel_header.setHeader'
-                                defaultMessage='Set {term} Header...'
+                                defaultMessage='Edit {term} Header'
                                 values={{
                                     term: (channelTerm)
                                 }}
@@ -552,7 +560,7 @@ export default class ChannelHeader extends React.Component {
                         >
                             <FormattedMessage
                                 id='channel_header.setPurpose'
-                                defaultMessage='Set {term} Purpose...'
+                                defaultMessage='Edit {term} Purpose'
                                 values={{
                                     term: (channelTerm)
                                 }}
@@ -573,7 +581,7 @@ export default class ChannelHeader extends React.Component {
                         >
                             <FormattedMessage
                                 id='channel_header.rename'
-                                defaultMessage='Rename {term}...'
+                                defaultMessage='Rename {term}'
                                 values={{
                                     term: (channelTerm)
                                 }}
@@ -589,6 +597,10 @@ export default class ChannelHeader extends React.Component {
                 dropdownContents.push(deleteOption);
             }
 
+            dropdownContents.push(
+                <li className='divider'/>
+            );
+
             const canLeave = channel.type === Constants.PRIVATE_CHANNEL ? this.state.userCount > 1 : true;
             if (!ChannelStore.isDefault(channel) && canLeave) {
                 dropdownContents.push(

webapp/components/delete_channel_modal.jsx

@@ -69,14 +69,16 @@ export default class DeleteChannelModal extends React.Component {
                     </h4>
                 </Modal.Header>
                 <Modal.Body>
-                    <FormattedMessage
+                    <div className='alert alert-danger'>
-                        id='delete_channel.question'
+                        <FormattedMessage
-                        defaultMessage='This will delete the channel from the team and make its contents inaccessible for all users. Are you sure you wish to delete the {display_name} {term}?'
+                            id='delete_channel.question'
-                        values={{
+                            defaultMessage='This will delete the channel from the team and make its contents inaccessible for all users. Are you sure you wish to delete the {display_name} {term}?'
-                            display_name: this.props.channel.display_name,
+                            values={{
-                            term: (channelTerm)
+                                display_name: this.props.channel.display_name,
-                        }}
+                                term: (channelTerm)
-                    />
+                            }}
+                        />
+                    </div>
                 </Modal.Body>
                 <Modal.Footer>
                     <button

webapp/i18n/en.json

@@ -981,8 +981,8 @@
   "channel_flow.invalidName": "Invalid Channel Name",
   "channel_flow.set_url_title": "Set {term} URL",
   "channel_header.channel": "Channel",
-  "channel_header.channelHeader": "Set Channel Header...",
+  "channel_header.channelHeader": "Edit Channel Header",
-  "channel_header.delete": "Delete {term}...",
+  "channel_header.delete": "Delete {term}",
   "channel_header.flagged": "Flagged Posts",
   "channel_header.group": "Group",
   "channel_header.leave": "Leave {term}",
@@ -991,9 +991,9 @@
   "channel_header.manageMembers": "Manage Members",
   "channel_header.notificationPreferences": "Notification Preferences",
   "channel_header.recentMentions": "Recent Mentions",
-  "channel_header.rename": "Rename {term}...",
+  "channel_header.rename": "Rename {term}",
-  "channel_header.setHeader": "Set {term} Header...",
+  "channel_header.setHeader": "Edit {term} Header",
-  "channel_header.setPurpose": "Set {term} Purpose...",
+  "channel_header.setPurpose": "Edit {term} Purpose",
   "channel_header.viewInfo": "View Info",
   "channel_header.viewMembers": "View Members",
   "channel_header.webrtc.call": "Start Video Call",

webapp/sass/components/_dropdown.scss

@@ -15,6 +15,10 @@
 
     .divider {
         @include opacity(.15);
+
+        &:last-child {
+            display: none;
+        }
     }
 
     div,

webapp/sass/components/_modal.scss

@@ -73,6 +73,10 @@
             }
         }
 
+        .alert {
+            margin-bottom: 0;
+        }
+
         .custom-textarea {
             border-color: $light-gray;
             color: inherit;