Ban User box

client/coral-admin/src/components/BanUserDialog.css

@@ -1,17 +1,25 @@
 .dialog {
-    border: none;
-    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
-    width: 280px;
-    top: 10px;
-}
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 500px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 184px;
+  padding: 20px;
 
-.header {
-    margin-bottom: 20px;
-}
+  h2 {
+    color: black;
+    font-size: 1.76em;
+    font-weight: 500;
+    margin: 0;
+  }
 
-.header h1, .separator h1{
-    text-align: center;
-    font-size: 1.2em;
+  h3 {
+    color: black;
+    font-size: 1.4em;
+    font-weight: 500;
+    margin: 0;
+  }
 }
 
 .formField {
@@ -143,5 +151,14 @@ input.error{
 }
 
 .cancel {
-    margin: 10px 0;
+  margin-right: 10px;
+  width: 47%;
+}
+
+.ban {
+  width: 47%;
+}
+
+.buttons {
+  margin: 20px 0;
 }

client/coral-admin/src/components/BanUserDialog.js

@@ -19,23 +19,23 @@ const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => (
     <span className={styles.close} onClick={handleClose}>×</span>
     <div>
       <div className={styles.header}>
-        <h3>
+        <h2>
           {lang.t('bandialog.ban_user')}
-        </h3>
+        </h2>
       </div>
       <div className={styles.separator}>
-        <h4>
+        <h3>
           {lang.t('bandialog.are_you_sure', user.userName)}
-        </h4>
+        </h3>
         <i>
           {lang.t('bandialog.note')}
         </i>
       </div>
       <div className={styles.buttons}>
-        <Button cStyle="cancel" className={styles.cancel} onClick={() => handleClose()} full>
+        <Button cStyle="cancel" className={styles.cancel} onClick={() => handleClose()} raised>
           {lang.t('bandialog.cancel')}
         </Button>
-        <Button cStyle="black" onClick={() => onClickBanUser(user.userId, user.commentId)} full>
+        <Button cStyle="black" className={styles.ban} onClick={() => onClickBanUser(user.userId, user.commentId)} raised>
           {lang.t('bandialog.yes_ban_user')}
         </Button>
       </div>

client/coral-admin/src/containers/Configure/Configure.css

@@ -119,8 +119,12 @@
 }
 
 #bannedWordlist, #suspectWordlist {
+  width: 100%;
+  padding: 10px;
+
+  input {
     width: 100%;
-    padding: 10px;
+  }
 }
 
 .wordlistHeader {

client/coral-admin/src/containers/Configure/Wordlist.js

@@ -18,7 +18,8 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
         inputProps={{placeholder: 'word or phrase'}}
         addOnPaste={true}
         pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeWordlist('banned', tags)} />
+        onChange={tags => onChangeWordlist('banned', tags)}
+      />
     </Card>
     <h3>{lang.t('configure.suspect-words-title')}</h3>
     <Card id={styles.suspectWordlist} shadow={2}>