From c7cb20d8733b7fd891b3b247ad85874bf8fb4b32 Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Wed, 5 Apr 2017 14:33:14 -0700
Subject: [PATCH] alerts: Polish .alert-box .alert styling.

This polishes the styling on the alerts inside of the .alert-box to
have more appropriate colors, margins, and padding.
---
 static/js/activity.js       |  4 ++--
 static/js/click_handlers.js |  6 +++---
 static/styles/alerts.css    | 30 ++++++++++++++++++++++--------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/static/js/activity.js b/static/js/activity.js
index 459827012b..1a51a93f45 100644
--- a/static/js/activity.js
+++ b/static/js/activity.js
@@ -387,9 +387,9 @@ function focus_ping(want_redraw) {
 
             // Update Zephyr mirror activity warning
             if (data.zephyr_mirror_active === false) {
-                $('#zephyr-mirror-error').show();
+                $('#zephyr-mirror-error').addClass("show");
             } else {
-                $('#zephyr-mirror-error').hide();
+                $('#zephyr-mirror-error').removeClass("show");
             }
 
             exports.new_user_input = false;
diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 71fe85b8e7..449761cd42 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -437,7 +437,7 @@ $(function () {
     // WEBATHENA
 
     $('#right-sidebar, #top_navbar').on('click', '.webathena_login', function (e) {
-        $("#zephyr-mirror-error").hide();
+        $("#zephyr-mirror-error").removeClass("show");
         var principal = ["zephyr", "zephyr"];
         WinChan.open({
             url: "https://webathena.mit.edu/#!request_ticket_v1",
@@ -460,10 +460,10 @@ $(function () {
                 url:      "/accounts/webathena_kerberos_login/",
                 data:     {cred: JSON.stringify(r.session)},
                 success: function () {
-                    $("#zephyr-mirror-error").hide();
+                    $("#zephyr-mirror-error").removeClass("show");
                 },
                 error: function () {
-                    $("#zephyr-mirror-error").show();
+                    $("#zephyr-mirror-error").addClass("show");
                 },
             });
         });
diff --git a/static/styles/alerts.css b/static/styles/alerts.css
index 9f1ff827b0..307ab90111 100644
--- a/static/styles/alerts.css
+++ b/static/styles/alerts.css
@@ -38,9 +38,16 @@
 .alert-box .alert {
     font-size: 1rem;
 
-    box-shadow: 0px 0px 30px rgba(220, 78, 78, 0.3);
     border-radius: 0px;
     border: none;
+
+    background-color: #f9f0c1;
+
+    box-shadow: 0px 0px 30px rgba(214, 192, 115, 0.35);
+}
+
+.alert-box .alert-error {
+    box-shadow: 0px 0px 30px rgba(220, 78, 78, 0.3);
 }
 
 .alert-box .alert a {
@@ -59,33 +66,40 @@
     color: #89dcff;
 }
 
-.alert-box .alert.alert-error::before {
+.alert-box .alert::before {
     position: absolute;
-    top: 15px;
+    top: 10px;
     left: 10px;
 
     font-family: "FontAwesome";
-    font-size: 1.5em;
+    font-size: 1.3em;
     content: "\f071";
 
+    color: #c09853;
+}
+
+.alert-box .alert.alert-error::before {
     color: #fff;
 }
 
-.alert-box .alert.alert-error {
+.alert-box .alert {
     position: relative;
 
     /* gives room for the error icon. */
     padding-left: 50px;
-    padding-top: 15px;
+    padding-top: 10px;
 
+    text-shadow: none;
+}
+
+.alert-box .alert.alert-error {
     background-color: #bd6767;
     color: #fff;
-    text-shadow: none;
 }
 
 .alert-box .alert .exit {
     position: absolute;
-    top: 15px;
+    top: 10px;
     right: 0px;
 
     font-size: 2.5em;