Multiple UI improvements (#4671)

PLT-4638 - Removing close buttons from modals

Updating UI for filter and search on mobile

Reverting utils

6 files changed, 34 insertions, 71 deletions

diff --git a/webapp/components/channel_invite_modal.jsx b/webapp/components/channel_invite_modal.jsx
index cffc73705..9ffe4816a 100644
--- a/webapp/components/channel_invite_modal.jsx
+++ b/webapp/components/channel_invite_modal.jsx
@@ -168,18 +168,6 @@ export default class ChannelInviteModal extends React.Component {
                     {inviteError}
                     {content}
                 </Modal.Body>
-                <Modal.Footer>
-                    <button
-                        type='button'
-                        className='btn btn-default'
-                        onClick={this.onHide}
-                    >
-                        <FormattedMessage
-                            id='channel_invite.close'
-                            defaultMessage='Close'
-                        />
-                    </button>
-                </Modal.Footer>
             </Modal>
         );
     }
diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx
index aa511086d..b5ca024f2 100644
--- a/webapp/components/channel_members_modal.jsx
+++ b/webapp/components/channel_members_modal.jsx
@@ -196,18 +196,6 @@ export default class ChannelMembersModal extends React.Component {
                     >
                         {content}
                     </Modal.Body>
-                    <Modal.Footer>
-                        <button
-                            type='button'
-                            className='btn btn-default'
-                            onClick={this.onHide}
-                        >
-                            <FormattedMessage
-                                id='channel_members_modal.close'
-                                defaultMessage='Close'
-                            />
-                        </button>
-                    </Modal.Footer>
                 </Modal>
             </div>
         );
diff --git a/webapp/components/more_channels.jsx b/webapp/components/more_channels.jsx
index fca13a7d0..d8ba95bdf 100644
--- a/webapp/components/more_channels.jsx
+++ b/webapp/components/more_channels.jsx
@@ -215,18 +215,6 @@ export default class MoreChannels extends React.Component {
                             />
                             {serverError}
                         </div>
-                        <div className='modal-footer'>
-                            <button
-                                type='button'
-                                className='btn btn-default'
-                                data-dismiss='modal'
-                            >
-                                <FormattedMessage
-                                    id='more_channels.close'
-                                    defaultMessage='Close'
-                                />
-                            </button>
-                        </div>
                     </div>
                 </div>
             </div>
diff --git a/webapp/components/more_direct_channels.jsx b/webapp/components/more_direct_channels.jsx
index f8cf64867..4011cab63 100644
--- a/webapp/components/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels.jsx
@@ -247,18 +247,6 @@ export default class MoreDirectChannels extends React.Component {
                         focusOnMount={!UserAgent.isMobile()}
                     />
                 </Modal.Body>
-                <Modal.Footer>
-                    <button
-                        type='button'
-                        className='btn btn-default'
-                        onClick={this.handleHide}
-                    >
-                        <FormattedMessage
-                            id='more_direct_channels.close'
-                            defaultMessage='Close'
-                        />
-                    </button>
-                </Modal.Footer>
             </Modal>
         );
     }
diff --git a/webapp/components/team_members_modal.jsx b/webapp/components/team_members_modal.jsx
index b58a93157..187fa6538 100644
--- a/webapp/components/team_members_modal.jsx
+++ b/webapp/components/team_members_modal.jsx
@@ -68,18 +68,6 @@ export default class TeamMembersModal extends React.Component {
                         isAdmin={this.props.isAdmin}
                     />
                 </Modal.Body>
-                <Modal.Footer>
-                    <button
-                        type='button'
-                        className='btn btn-default'
-                        onClick={this.onHide}
-                    >
-                        <FormattedMessage
-                            id='team_member_modal.close'
-                            defaultMessage='Close'
-                        />
-                    </button>
-                </Modal.Footer>
             </Modal>
         );
     }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 25d95df46..dc55d2d54 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -85,8 +85,13 @@
     }
 
     .app__body {
-        .edit-modal-body {
+        .more-modal {
+            .filter-row {
+                width: 330px;
+            }
+        }
 
+        .edit-modal-body {
             .custom-textarea {
                 max-height: 30vh;
             }
@@ -160,16 +165,6 @@
         }
     }
 
-    .member-select__container {
-        margin-bottom: 10px;
-        margin-top: 10px;
-        overflow: hidden;
-        position: relative;
-        right: 10px;
-        top: 0;
-        width: 100%;
-    }
-
     .user-popover {
         pointer-events: none;
     }
@@ -1334,6 +1329,34 @@
     }
 }
 
+@media screen and (max-width: 550px) {
+    .app__body {
+        .more-modal {
+            &.more-direct-channels {
+                .filter-row {
+                    padding-bottom: 50px;
+                    width: 100%;
+                }
+
+                .member-show {
+                    display: none;
+                }
+
+                select {
+                    margin: 0;
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+    .member-select__container {
+        left: 15px;
+        top: 60px;
+        width: calc(100% - 30px);
+    }
+}
+
 @media screen and (max-width: 480px) {
     .sidebar--right {
         .post {