From f7ec33f5dbf9991cfcdcf5031e4687063a578068 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 7 Mar 2018 14:48:13 -0800
Subject: [PATCH] Redesign notification dismiss button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

X wasn’t centering properly
---
 ui/src/shared/components/Notification.js |  4 +---
 ui/src/style/theme/_notifications.scss   | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/ui/src/shared/components/Notification.js b/ui/src/shared/components/Notification.js
index fff52e4e63..999f65a388 100644
--- a/ui/src/shared/components/Notification.js
+++ b/ui/src/shared/components/Notification.js
@@ -66,9 +66,7 @@ class Notification extends Component {
           <div className="notification-message">
             {message}
           </div>
-          <button className="notification-close" onClick={this.handleDismiss}>
-            <span className="icon remove" />
-          </button>
+          <button className="notification-close" onClick={this.handleDismiss} />
         </div>
       </div>
     )
diff --git a/ui/src/style/theme/_notifications.scss b/ui/src/style/theme/_notifications.scss
index c7a94ef721..184dceed1a 100644
--- a/ui/src/style/theme/_notifications.scss
+++ b/ui/src/style/theme/_notifications.scss
@@ -60,6 +60,24 @@ $notification-margin: 12px;
   transition:
     opacity 0.25s ease;
 
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 2px;
+    border-radius: 1px;
+    background-color: $g20-white;
+  }
+  &:before {
+    transform: translate(-50%,-50%) rotate(-45deg);
+  }
+  &:after {
+    transform: translate(-50%,-50%) rotate(45deg);
+  }
+
   &:hover {
     cursor: pointer;
     opacity: 1;
@@ -108,6 +126,10 @@ $notification-margin: 12px;
   span.icon {
     color: $text-color;
   }
+  .notification-close:before,
+  .notification-close:after {
+    background-color: $text-color;
+  }
 }
 
 //  Alert Themes