Moved Join button to right side of MoreChannels modal

3 files changed, 55 insertions, 41 deletions

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index db61e5f49..577922577 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -24,6 +24,7 @@ export default class MoreChannels extends React.Component {
         this.onListenerChange = this.onListenerChange.bind(this);
         this.handleJoin = this.handleJoin.bind(this);
         this.handleNewChannel = this.handleNewChannel.bind(this);
+        this.createChannelRow = this.createChannelRow.bind(this);
 
         var initState = getStateFromStores();
         initState.channelType = '';
@@ -70,13 +71,49 @@ export default class MoreChannels extends React.Component {
         $(ReactDOM.findDOMNode(this.refs.modal)).modal('hide');
         this.setState({showNewChannelModal: true});
     }
+    createChannelRow(channel, index) {
+        let joinButton;
+        if (this.state.joiningChannel === index) {
+            joinButton = (
+                <img
+                    className='join-channel-loading-gif'
+                    src='/static/images/load.gif'
+                />
+            );
+        } else {
+            joinButton = (
+                <button
+                    onClick={this.handleJoin.bind(self, channel, index)}
+                    className='btn btn-primary'
+                >
+                    <FormattedMessage
+                        id='more_channels.join'
+                        defaultMessage='Join'
+                    />
+                </button>
+            );
+        }
+
+        return (
+            <tr key={channel.id}>
+                <td className='more-row'>
+                    <div className='more-details'>
+                        <p className='more-name'>{channel.display_name}</p>
+                        <p className='more-description'>{channel.purpose}</p>
+                    </div>
+                    <div className='more-actions'>
+                        {joinButton}
+                    </div>
+                </td>
+            </tr>
+        );
+    }
     render() {
         var serverError;
         if (this.state.serverError) {
             serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
         }
 
-        var self = this;
         var moreChannels;
 
         if (this.state.channels != null) {
@@ -87,41 +124,7 @@ export default class MoreChannels extends React.Component {
                 moreChannels = (
                     <table className='more-table table'>
                         <tbody>
-                            {channels.map(function cMap(channel, index) {
-                                var joinButton;
-                                if (self.state.joiningChannel === index) {
-                                    joinButton = (
-                                        <img
-                                            className='join-channel-loading-gif'
-                                            src='/static/images/load.gif'
-                                        />
-                                        );
-                                } else {
-                                    joinButton = (
-                                        <button
-                                            onClick={self.handleJoin.bind(self, channel, index)}
-                                            className='btn btn-primary'
-                                        >
-                                            <FormattedMessage
-                                                id='more_channels.join'
-                                                defaultMessage='Join'
-                                            />
-                                        </button>
-                                        );
-                                }
-
-                                return (
-                                    <tr key={channel.id}>
-                                        <td>
-                                            <p className='more-name'>{channel.display_name}</p>
-                                            <p className='more-description'>{channel.purpose}</p>
-                                        </td>
-                                        <td className='td--action'>
-                                            {joinButton}
-                                        </td>
-                                    </tr>
-                                );
-                            })}
+                            {channels.map(this.createChannelRow)}
                         </tbody>
                     </table>
                 );
diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx
index 2aeca7d47..68b723f35 100644
--- a/web/react/components/user_list_row.jsx
+++ b/web/react/components/user_list_row.jsx
@@ -28,7 +28,6 @@ export default function UserListRow({user, actions}) {
         <tr>
             <td
                 key={user.id}
-                className='direct-channel'
                 style={{display: 'flex'}}
             >
                 <img
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index ca83c77da..12cd065da 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -23,17 +23,29 @@
 		border-radius: 50px;
 		margin-right: 8px;
 	}
+	.more-row {
+		display: flex;
+
+		.more-details {
+			flex-grow: 1;
+			flex-shrink: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.more-actions {
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+	}
 	.more-name {
 		font-weight: 600;
 		font-size: 0.95em;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 	.more-description {
 		@include opacity(0.7);
 		display: block;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 	tbody {
 		> tr {