Make aspects of the HTML easier to style

ts/components/conversation/ModeratorsAddDialog.tsx

@@ -124,14 +124,16 @@ export class AddModeratorsDialog extends React.Component<Props, State> {
 
   public render() {
     const i18n = window.i18n;
-    const titleText = `${i18n('addModerators')} ${this.props.chatName}`;
 
     const hasFriends = this.state.friendList.length !== 0;
 
     return (
       <div className="content">
-        <p className="titleText">{titleText}</p>
+        <p className="titleText">
-        Add Moderator:
+          ${i18n('addModerators')} <span>${this.props.chatName}</span>
+        </p>
+        <div className="addModeratorBox">
+          <p>Add Moderator:</p>
           <input
             type="text"
             ref={this.inputRef}
@@ -143,7 +145,9 @@ export class AddModeratorsDialog extends React.Component<Props, State> {
           <button className="add" tabIndex={0} onClick={this.add}>
             {i18n('add')}
           </button>
-        From friends:
+        </div>
+        <div className="moderatorList">
+          <p>From friends:</p>
           <div className="friend-selection-list">
             <MemberList
               members={this.state.friendList}
@@ -155,6 +159,7 @@ export class AddModeratorsDialog extends React.Component<Props, State> {
           {hasFriends ? null : (
             <p className="no-friends">{i18n('noFriendsToAdd')}</p>
           )}
+        </div>
         <div className="buttons">
           <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
             {i18n('cancel')}

ts/components/conversation/ModeratorsRemoveDialog.tsx

@@ -58,14 +58,15 @@ export class RemoveModeratorsDialog extends React.Component<Props, State> {
 
   public render() {
     const i18n = window.i18n;
-    const titleText = `${i18n('removeModerators')} ${this.props.chatName}`;
-
     const hasMods = this.state.modList.length !== 0;
 
     return (
       <div className="content">
-        <p className="titleText">{titleText}</p>
+        <p className="titleText">
-        Existing moderators:
+          ${i18n('removeModerators')} <span>${this.props.chatName}</span>
+        </p>
+        <div className="moderatorList">
+          <p>Existing moderators:</p>
           <div className="friend-selection-list">
             <MemberList
               members={this.state.modList}
@@ -77,6 +78,7 @@ export class RemoveModeratorsDialog extends React.Component<Props, State> {
           {hasMods ? null : (
             <p className="no-friends">{i18n('noModeratorsToRemove')}</p>
           )}
+        </div>
         <div className="buttons">
           <button className="cancel" tabIndex={0} onClick={this.closeDialog}>
             {i18n('cancel')}