Adding style to suspension modal.

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

@@ -19,7 +19,6 @@
 
 .inner {
   width: 100vw;
-  height: 100vh;
   background-color: #fff;
   box-shadow: 2px 2px 5px 0px rgba(153,153,153,1);
   padding: 20px;
@@ -37,7 +36,6 @@
 @media (--big-viewport) {
   .inner {
     width: 600px;
-    height: 50vh;
     border-radius: 4px;
   }
 }

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

@@ -0,0 +1,31 @@
+
+.modalButtons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 50px;
+}
+
+.emailInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.writeContainer {
+    margin-top: 20px;
+}
+
+.emailContainer {
+  display: flex;
+}
+
+.emailMessage {
+  font-weight: 800;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 800;
+  margin-bottom: 20px;
+}

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

@@ -46,23 +46,31 @@ class SuspendUserModal extends Component  {
     const {stage, actionType, onClose, onButtonClick} = this.props;
     const about = actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
     return actionType ? <Modal open={actionType} onClose={onClose}>
-        <h3>{lang.t(stages[stage].title, about)}</h3>
+        <div className={styles.title}>{lang.t(stages[stage].title, about)}</div>
         <div className={styles.container}>
           <div className={styles.description}>
             {lang.t(stages[stage].description, about)}
           </div>
           {
             stage === 1 &&
-            <textarea
-              rows={10}
-              value={this.state.email}
-              onChange={this.onEmailChange}/>
+            <div className={styles.writeContainer}>
+              <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
+              <div className={styles.emailContainer}>
+                <textarea
+                  rows={5}
+                  className={styles.emailInput}
+                  value={this.state.email}
+                  onChange={this.onEmailChange}/>
+              </div>
+            </div>
           }
-          {Object.keys(stages[stage].options).map((key, i) => (
-            <Button onClick={onButtonClick(stage, i)}>
-              {lang.t(stages[stage].options[key], about)}
-            </Button>
-          ))}
+          <div className={styles.modalButtons}>
+            {Object.keys(stages[stage].options).map((key, i) => (
+              <Button key={i} onClick={onButtonClick(stage, i)}>
+                {lang.t(stages[stage].options[key], about)}
+              </Button>
+            ))}
+        </div>
         </div>
       </Modal>
       : null;

client/coral-admin/src/translations.json

@@ -94,7 +94,8 @@
       "send": "Send",
       "bio": "bio",
       "username": "username",
-      "email": "Another member of the community recently flagged your {0} for review. Because of its content your {0} was rejected. This means you can no longer comment, like, or flag content until you rewrite your {0}. Please e-mail moderator@newsorg.com if you have any questions or concerns."
+      "email": "Another member of the community recently flagged your {0} for review. Because of its content your {0} was rejected. This means you can no longer comment, like, or flag content until you rewrite your {0}. Please e-mail moderator@newsorg.com if you have any questions or concerns.",
+      "write_message": "Write a message"
     },
     "streams": {
       "search": "Search",