Fix appearance of notification dismiss button

ui/src/shared/components/Notifications.js

@@ -31,13 +31,13 @@ class Notifications extends Component {
     if (!message || isDismissed) {
       return null
     }
-    const cls = classnames('alert', {
+    const alertClassname = classnames('alert', {
       'alert-danger': type === 'error',
       'alert-success': type === 'success',
       'alert-warning': type === 'warning',
     })
     return (
-      <div className={cls} role="alert">
+      <div className={alertClassname}>
         {message}
         {this.renderDismiss(type)}
       </div>
@@ -48,12 +48,7 @@ class Notifications extends Component {
 
   renderDismiss = type => {
     return (
-      <button
-        className="close"
-        data-dismiss="alert"
-        aria-label="Close"
-        onClick={this.handleDismiss(type)}
-      >
+      <button className="alert-close" onClick={this.handleDismiss(type)}>
         <span className="icon remove" />
       </button>
     )

ui/src/style/theme/_alerts.scss

@@ -12,37 +12,38 @@
   margin-bottom: $ix-marg-c;
   font-weight: 500;
   @extend %no-user-select;
+}
 
-  button.close {
-    outline: none;
+.alert-icon {
+  padding-left: ($ix-marg-e - $ix-marg-b);
+
+   > span.icon {
     position: absolute;
     top: 50%;
+    left: $ix-marg-c;
     transform: translateY(-50%);
-    right: ($ix-marg-c - $ix-marg-a);
-    font-size: $ix-text-base;
-    width: 20px;
-    height: 20px;
-    opacity: 0.25;
-    transition:
-      opacity 0.25s ease;
-
-    &:hover {
-      opacity: 1;
-    }
+    width: ($ix-text-base-2 + 4px);
+    margin: 0;
+    font-size: $ix-text-base-2;
   }
+}
 
-  &-icon {
-    padding-left: ($ix-marg-e - $ix-marg-b);
+.alert-close {
+  outline: none;
+  position: absolute;
+  top: 50%;
+  background-color: transparent;
+  transform: translateY(-50%);
+  right: ($ix-marg-c - $ix-marg-a);
+  font-size: $ix-text-base;
+  width: 20px;
+  height: 20px;
+  opacity: 0.25;
+  transition:
+    opacity 0.25s ease;
 
-    span.icon:not(.remove) {
-      position: absolute;
-      top: 50%;
-      left: $ix-marg-c;
-      transform: translateY(-50%);
-      width: ($ix-text-base-2 + 4px);
-      margin: 0;
-      font-size: $ix-text-base-2;
-    }
+  &:hover {
+    opacity: 1;
   }
 }