Add title

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css

@@ -12,6 +12,12 @@
   font-size: 13px;
 }
 
+.title {
+  padding: 0;
+  margin: 0 0 8px 0;
+  font-size: 15px;
+}
+
 .button {
   composes: buttonReset from "coral-framework/styles/reset.css";
   border: 1px solid rgba(1, 1, 1, 0.8);

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js

@@ -2,9 +2,12 @@ import React from 'react';
 import styles from './IgnoreUserConfirmation.css';
 import {t} from 'plugin-api/beta/client/services';
 
-export default ({ignoreUser, cancel}) => (
-  <div className={styles.root}>
+export default ({ignoreUser, cancel, username}) => (
+  <aside className={styles.root}>
     <div className={styles.message}>
+      <h1 className={styles.title}>
+        {t('talk-plugin-ignore-user.confirmation_title', username)}
+      </h1>
       {t('talk-plugin-ignore-user.confirmation')}
     </div>
     <div className={styles.actions}>
@@ -15,5 +18,5 @@ export default ({ignoreUser, cancel}) => (
         {t('talk-plugin-ignore-user.ignore_user')}
       </button>
     </div>
-  </div>
+  </aside>
 );

plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js

@@ -28,7 +28,7 @@ class IgnoreUserConfirmationContainer extends React.Component {
 
   render() {
     return <IgnoreUserConfirmation
-      username={this.props.comment.username}
+      username={this.props.comment.user.username}
       ignoreUser={this.ignoreUser}
       cancel={this.cancel}
     />;

plugins/talk-plugin-ignore-user/client/translations.yml

@@ -7,5 +7,6 @@ en:
       undo this later from My Profile.
     notify_success: |
       You are now ignoring {0}. You can undo this action from My Profile.
+    confirmation_title: Ignore {0}?
 es:
   talk-plugin-ignore-user: