Improving about modal and colon issue with webhooks (#3343)

Updating word break

Updating improvements for about modal

8 files changed, 58 insertions, 48 deletions

diff --git a/webapp/components/channel_info_modal.jsx b/webapp/components/channel_info_modal.jsx
index d44df4056..7bd004411 100644
--- a/webapp/components/channel_info_modal.jsx
+++ b/webapp/components/channel_info_modal.jsx
@@ -20,8 +20,11 @@ export default class ChannelInfoModal extends React.Component {
 
         return false;
     }
+
     render() {
         let channel = this.props.channel;
+        let channelIcon;
+
         if (!channel) {
             const notFound = Utils.localizeMessage('channel_info.notFound', 'No Channel Found');
 
@@ -33,68 +36,58 @@ export default class ChannelInfoModal extends React.Component {
             };
         }
 
+        if (channel.type === 'O') {
+            channelIcon = (<span className='fa fa-globe'/>);
+        } else if (channel.type === 'P') {
+            channelIcon = (<span className='fa fa-lock'/>);
+        }
+
         const channelURL = Utils.getTeamURLFromAddressBar() + '/channels/' + channel.name;
 
         return (
             <Modal
+                dialogClassName='about-modal'
                 show={this.props.show}
                 onHide={this.props.onHide}
             >
-                <Modal.Header closeButtton={true}>
+                <Modal.Header closeButton={true}>
                     <Modal.Title>
-                        {channel.display_name}
+                        <FormattedMessage
+                            id='channel_info.about'
+                            defaultMessage='About'
+                        />
+                        <strong>{channelIcon}{channel.display_name}</strong>
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body ref='modalBody'>
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
+                    <div className='form-group'>
+                        <div className='info__label'>
                             <FormattedMessage
-                                id='channel_info.name'
-                                defaultMessage='Channel Name:'
+                                id='channel_info.purpose'
+                                defaultMessage='Purpose:'
                             />
                         </div>
-                        <div className='col-sm-9'>{channel.display_name}</div>
+                        <div className='info__value'>{channel.purpose}</div>
                     </div>
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
+                    <div className='form-group'>
+                        <div className='info__label'>
                             <FormattedMessage
                                 id='channel_info.url'
-                                defaultMessage='Channel URL:'
+                                defaultMessage='URL:'
                             />
                         </div>
-                        <div className='col-sm-9'>{channelURL}</div>
+                        <div className='info__value'>{channelURL}</div>
                     </div>
-                    <div className='row form-group'>
-                        <div className='col-sm-3 info__label'>
+                    <div className='about-modal__hash form-group padding-top x2'>
+                        <p>
                             <FormattedMessage
                                 id='channel_info.id'
-                                defaultMessage='Channel ID:'
+                                defaultMessage='ID: '
                             />
-                        </div>
-                        <div className='col-sm-9'>{channel.id}</div>
-                    </div>
-                    <div className='row'>
-                        <div className='col-sm-3 info__label'>
-                            <FormattedMessage
-                                id='channel_info.purpose'
-                                defaultMessage='Channel Purpose:'
-                            />
-                        </div>
-                        <div className='col-sm-9'>{channel.purpose}</div>
+                            {channel.id}
+                        </p>
                     </div>
                 </Modal.Body>
-                <Modal.Footer>
-                    <button
-                        type='button'
-                        className='btn btn-default'
-                        onClick={this.props.onHide}
-                    >
-                        <FormattedMessage
-                            id='channel_info.close'
-                            defaultMessage='Close'
-                        />
-                    </button>
-                </Modal.Footer>
             </Modal>
         );
     }
diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx
index 3c94f0bcb..727b005e7 100644
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/webapp/components/post_view/components/post_header.jsx
@@ -52,7 +52,7 @@ export default class PostHeader extends React.Component {
         }
 
         if (this.props.compactDisplay) {
-            colon = (<strong>{':'}</strong>);
+            colon = (<strong className='colon'>{':'}</strong>);
         }
 
         return (
diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx
index ee876347b..6f5365ac1 100644
--- a/webapp/components/user_profile.jsx
+++ b/webapp/components/user_profile.jsx
@@ -64,7 +64,7 @@ export default class UserProfile extends React.Component {
         }
 
         if (this.props.disablePopover) {
-            return <div>{name}</div>;
+            return <div className='user-popover'>{name}</div>;
         }
 
         var dataContent = [];
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 61d857da3..6fdc3c063 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -684,11 +684,12 @@
   "channel_header.setPurpose": "Set {term} Purpose...",
   "channel_header.viewInfo": "View Info",
   "channel_info.close": "Close",
-  "channel_info.id": "Channel ID:",
-  "channel_info.name": "Channel Name:",
+  "channel_info.about": "About",
+  "channel_info.id": "ID: ",
+  "channel_info.name": "Name:",
   "channel_info.notFound": "No Channel Found",
-  "channel_info.purpose": "Channel Purpose:",
-  "channel_info.url": "Channel URL:",
+  "channel_info.purpose": "Purpose:",
+  "channel_info.url": "URL:",
   "channel_invite.add": " Add",
   "channel_invite.addNewMembers": "Add New Members to ",
   "channel_invite.close": "Close",
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 8b078de86..6e41dff39 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -89,9 +89,15 @@
         }
 
         .info__label {
+            @include opacity(.5);
+            font-size: .9em;
             font-weight: 600;
-            padding-right: 0;
-            text-align: right;
+            margin-bottom: 3px;
+        }
+
+        .info__value {
+            padding-left: 10px;
+            word-break: break-word;
         }
 
         .team-member-list {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 228efe26f..a3c354f89 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -768,7 +768,7 @@ body.ios {
                 white-space: nowrap;
             }
 
-            strong {
+            .colon {
                 display: none;
                 font-weight: 900;
                 margin-left: 2px;
@@ -1118,7 +1118,7 @@ body.ios {
     font-family: inherit;
     font-size: 11px;
     font-weight: 600;
-    margin: 0 0 0 -4px;
+    margin: 0 10px 0 -4px;
     padding: 2px 4px;
 }
 
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index a461dd35a..44a7be2ac 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -122,7 +122,7 @@
                         z-index: 1;
                     }
 
-                    strong {
+                    .colon {
                         display: inline;
                     }
 
diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss
index 4bfd04e57..4506eac4e 100644
--- a/webapp/sass/routes/_about-modal.scss
+++ b/webapp/sass/routes/_about-modal.scss
@@ -20,12 +20,22 @@
                     color: inherit;
                     font-size: 16px;
                 }
+
+                .fa {
+                    margin: 0 4px 0 8px;
+                }
             }
 
             .modal-body {
                 padding: 20px 25px 5px;
             }
 
+            &.large {
+                .modal-body {
+                    padding-bottom: 20px;
+                }
+            }
+
             .about-modal__content {
                 @include clearfix;
                 @include display-flex;