From f23f962adba65be062d6f60a31bdbde422907fd6 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 16 Apr 2018 10:47:09 -0600
Subject: [PATCH] Updated error styling

---
 .../server/views/download.ejs                    |  8 +++++---
 public/css/admin.css                             | 16 ++++++++++++----
 views/account/email/confirm.ejs                  |  8 +++++---
 views/account/password/reset.ejs                 | 10 ++++++----
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/plugins/talk-plugin-profile-data/server/views/download.ejs b/plugins/talk-plugin-profile-data/server/views/download.ejs
index bc8e0aa54..260badf3a 100644
--- a/plugins/talk-plugin-profile-data/server/views/download.ejs
+++ b/plugins/talk-plugin-profile-data/server/views/download.ejs
@@ -16,7 +16,7 @@
           <li><%= t('download_landing.information_included.body') %></li>
           <li><%= t('download_landing.information_included.asset_url') %></li>
         </ul>
-        <div class="error-console"></div>
+        <div class="error-console"><span></span></div>
         <form id="download-form" method="post" action="<%= BASE_PATH %>api/v1/account/download">
           <button type="submit"><%= t('download_landing.confirm') %></button>
         </form>
@@ -28,9 +28,11 @@
         function showError(error) {
           try {
             let err = JSON.parse(error);
-            $('.error-console').text(err.message).fadeIn();
+            $('.error-console span').text(err.message);
+            $('.error-console').fadeIn();
           } catch (err) {
-            $('.error-console').text(error).fadeIn();
+            $('.error-console span').text(error);
+            $('.error-console').fadeIn();
           }
         }
 
diff --git a/public/css/admin.css b/public/css/admin.css
index 0bad0a4c2..f6891c87e 100644
--- a/public/css/admin.css
+++ b/public/css/admin.css
@@ -3,6 +3,7 @@ body, #root {
   height: 100%;
   margin: 0;
   background: #fff;
+  color: #3B4A53;
 }
 
 .container {
@@ -83,11 +84,18 @@ button[type="submit"] {
   display: none;
   margin-top: 10px;
   border-radius: 2px;
-  background-color: pink;
-  color: red;
-  border: 1px solid red;
+  background-color: rgba(242, 101, 99, 0.1);
+  border: 1px solid #F26563;
   padding: 10px;
-  font-size: 24px;
+}
+
+.error-console span:before {
+  font-family: 'Material Icons';
+  content: '\E000';
+  color: #000;
+  display: inline-block;
+  vertical-align: sub;
+	width: 1.4em;
 }
 
 ul.check_list {
diff --git a/views/account/email/confirm.ejs b/views/account/email/confirm.ejs
index 524b81ae9..47bc7773b 100644
--- a/views/account/email/confirm.ejs
+++ b/views/account/email/confirm.ejs
@@ -9,7 +9,7 @@
       <section class="container">
         <h1><%= t('confirm_email.email_confirmation') %></h1>
         <p><%= t('confirm_email.click_to_confirm') %></p>
-        <div class="error-console"></div>
+        <div class="error-console"><span></span></div>
         <form id="verify-email-form">
           <button type="submit"><%= t('confirm_email.confirm') %></button>
         </form>
@@ -21,9 +21,11 @@
         function showError(error) {
           try {
             let err = JSON.parse(error);
-            $('.error-console').text(err.message).fadeIn();
+            $('.error-console span').text(err.message);
+            $('.error-console').fadeIn();
           } catch (err) {
-            $('.error-console').text(error).fadeIn();
+            $('.error-console span').text(error);
+            $('.error-console').fadeIn();
           }
         }
 
diff --git a/views/account/password/reset.ejs b/views/account/password/reset.ejs
index fc8fd4d58..c8b106139 100644
--- a/views/account/password/reset.ejs
+++ b/views/account/password/reset.ejs
@@ -9,12 +9,12 @@
       <section class="container">
         <h1><%= t('password_reset.set_new_password') %></h1>
         <p><%= t('password_reset.change_password_help') %></p>
-        <div class="error-console"></div>
+        <div class="error-console"><span></span></div>
         <form id="reset-password-form">
           <label for="password">
             <%= t('password_reset.new_password') %>
             <input type="password" name="password" placeholder="<%= t('password_reset.new_password') %>" />
-            <p><small><%= t('password_reset.new_password_help') %></small></p>
+            <small><%= t('password_reset.new_password_help') %></small>
           </label>
           <label for="confirm-password">
             <%= t('password_reset.confirm_new_password') %>
@@ -30,9 +30,11 @@
         function showError(error) {
           try {
             let err = JSON.parse(error);
-            $('.error-console').text(err.message).fadeIn();
+            $('.error-console span').text(err.message);
+            $('.error-console').fadeIn();
           } catch (err) {
-            $('.error-console').text(error).fadeIn();
+            $('.error-console span').text(error);
+            $('.error-console').fadeIn();
           }
         }