Merge pull request #1288 from asaadmahmoodspin/plt-945

UI Improvements for multiple tickets

web/react/components/admin_console/team_users.jsx

@@ -147,9 +147,11 @@ export default class UserList extends React.Component {
                     className='form-horizontal'
                     role='form'
                 >
-                    <div className='member-list-holder'>
-                        {memberList}
-                    </div>
+                    <table className='table more-table member-list-holder'>
+                        <tbody>
+                            {memberList}
+                        </tbody>
+                    </table>
                 </form>
                 <ResetPasswordModal
                     user={this.state.user}

web/react/components/channel_invite_modal.jsx

@@ -139,7 +139,7 @@ export default class ChannelInviteModal extends React.Component {
 
         return (
             <div
-                className='modal fade'
+                className='modal fade more-modal'
                 id='channel_invite'
                 tabIndex='-1'
                 role='dialog'

web/react/components/channel_members.jsx

@@ -150,7 +150,7 @@ export default class ChannelMembers extends React.Component {
 
         return (
             <div
-                className='modal fade'
+                className='modal fade more-modal'
                 ref='modal'
                 id='channel_members'
                 tabIndex='-1'
@@ -181,11 +181,7 @@ export default class ChannelMembers extends React.Component {
                             ref='modalBody'
                             className='modal-body'
                         >
-                            <div className='col-sm-12'>
-                                <div className='team-member-list'>
-                                    {memberList}
-                                </div>
-                            </div>
+                            {memberList}
                         </div>
                         <div className='modal-footer'>
                             <button

web/react/components/member_list.jsx

@@ -21,7 +21,8 @@ export default class MemberList extends React.Component {
         }
 
         return (
-            <div className='member-list-holder'>
+            <table className='table more-table member-list-holder'>
+                <tbody>
                 {members.map(function mymembers(member) {
                     return (
                         <MemberListItem
@@ -34,8 +35,9 @@ export default class MemberList extends React.Component {
                         />
                     );
                 }, this)}
+                </tbody>
                 {message}
-            </div>
+            </table>
         );
     }
 }

web/react/components/member_list_item.jsx

@@ -37,7 +37,7 @@ export default class MemberListItem extends React.Component {
             invite = (
                     <a
                         onClick={this.handleInvite}
-                        className='btn btn-sm btn-primary member-invite'
+                        className='btn btn-sm btn-primary'
                     >
                         <i className='glyphicon glyphicon-envelope'/>
                         {' Add'}
@@ -102,17 +102,19 @@ export default class MemberListItem extends React.Component {
         }
 
         return (
-            <div className='row member-div'>
-                <img
-                    className='post-profile-img pull-left'
-                    src={'/api/v1/users/' + member.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
-                    height='36'
-                    width='36'
-                />
-                <span className='member-name'>{member.username}</span>
-                <span className='member-email'>{member.email}</span>
-                {invite}
-            </div>
+            <tr>
+                <td className='direct-channel'>
+                    <img
+                        className='profile-img pull-left'
+                        src={'/api/v1/users/' + member.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
+                        height='36'
+                        width='36'
+                    />
+                    <div className='member-name'>{member.username}</div>
+                    <div className='member-description'>{member.email}</div>
+                </td>
+                <td className='td--action lg'>{invite}</td>
+            </tr>
         );
     }
 }

web/react/components/member_list_team.jsx

@@ -15,9 +15,11 @@ export default class MemberListTeam extends React.Component {
         }, this);
 
         return (
-            <div className='member-list-holder'>
-                {memberList}
-            </div>
+            <table className='table more-table member-list-holder'>
+                <tbody>
+                    {memberList}
+                </tbody>
+            </table>
         );
     }
 }

web/react/components/more_direct_channels.jsx

@@ -206,7 +206,7 @@ export default class MoreDirectChannels extends React.Component {
 
         return (
             <Modal
-                className='modal-direct-channels'
+                dialogClassName='more-modal'
                 show={this.props.show}
                 onHide={this.handleHide}
             >

web/react/components/signup_team.jsx

@@ -46,7 +46,7 @@ export default class TeamSignUp extends React.Component {
             } else {
                 teamListing = (
                     <div>
-                        <h3>{'Choose a Team'}</h3>
+                        <h4>{'Choose a Team'}</h4>
                         <div className='signup-team-all'>
                             {
                                 this.props.teams.map((team) => {
@@ -58,19 +58,18 @@ export default class TeamSignUp extends React.Component {
                                             <a
                                                 href={'/' + team.name}
                                             >
-                                                <div className='signup-team-dir__group'>
-                                                    <span className='signup-team-dir__name'>{team.display_name}</span>
-                                                    <span
-                                                        className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
-                                                        aria-hidden='true'
-                                                    />
-                                                </div>
+                                                <span className='signup-team-dir__name'>{team.display_name}</span>
+                                                <span
+                                                    className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
+                                                    aria-hidden='true'
+                                                />
                                             </a>
                                         </div>
                                     );
                                 })
                             }
                         </div>
+                        <h4>{'Or Create a Team'}</h4>
                     </div>
                 );
             }