From a1c218123281b48ed06cd3d5f00f4a42757915e4 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 5 Apr 2019 16:21:16 -0400
Subject: [PATCH] UX: Better close button positioning in alerts, some cleanup

---
 app/assets/stylesheets/common/base/alert.scss | 26 +++++++------------
 .../stylesheets/common/components/banner.scss |  3 +--
 app/assets/stylesheets/mobile/modal.scss      |  8 ------
 3 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index 1d5dbd1cac5..8d05c6a1585 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -1,25 +1,19 @@
 .alert {
-  padding: 8px 35px 8px 14px;
+  padding: 8px 32px 8px 16px;
   background-color: $danger-low;
-  color: #c09853;
+  color: $primary;
+  position: relative;
 
   .close {
-    position: relative;
-    top: -2px;
-    right: -21px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
     line-height: $line-height-small;
-    float: right;
     font-size: $font-up-3;
-    font-weight: bold;
-    color: $primary;
-    opacity: 0.2;
-    filter: alpha(opacity = 20);
+    color: $primary-low-mid;
     @include hover {
-      color: $primary;
-      text-decoration: none;
+      color: $primary-medium;
       cursor: pointer;
-      opacity: 0.4;
-      filter: alpha(opacity = 40);
     }
   }
   button.close {
@@ -30,11 +24,11 @@
     -webkit-appearance: none;
   }
   &.alert-success {
-    background-color: $success-medium;
+    background-color: $success-low;
     color: $primary;
   }
   &.alert-error {
-    background-color: rgba($danger-low, 0.5);
+    background-color: $danger-low;
     color: $primary;
   }
   &.alert-info {
diff --git a/app/assets/stylesheets/common/components/banner.scss b/app/assets/stylesheets/common/components/banner.scss
index c70a20bc979..72f45ff9496 100644
--- a/app/assets/stylesheets/common/components/banner.scss
+++ b/app/assets/stylesheets/common/components/banner.scss
@@ -14,9 +14,8 @@
   }
 
   .close {
-    font-size: $font-up-4;
     margin-top: -5px;
-    color: dark-light-choose($primary-low-mid, $secondary-medium);
+    color: $primary-low-mid;
     padding-left: 5px;
     float: right;
   }
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index caa03554998..d46ce0ecd84 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -102,14 +102,6 @@
   margin-bottom: 20px;
 }
 
-.alert {
-  padding: 5px;
-  &.alert-success {
-    background-color: $success-low;
-    color: $success;
-  }
-}
-
 .change-timestamp-footer .btn-primary {
   float: right;
   margin-right: 5px;