Fix appearance of notification dismiss button

ui/src/style/theme/_alerts.scss

@@ -0,0 +1,99 @@
+/*
+   Alerts
+   -----------------------------------------------------------------------------
+*/
+
+.alert {
+  border-style: solid;
+  border-width: 0;
+  border-radius: $ix-radius;
+  position: relative;
+  padding: $ix-marg-c;
+  margin-bottom: $ix-marg-c;
+  font-weight: 500;
+  @extend %no-user-select;
+}
+
+.alert-icon {
+  padding-left: ($ix-marg-e - $ix-marg-b);
+
+   > span.icon {
+    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;
+  }
+}
+
+.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;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+//  Mixin for Alert Themes
+//  ----------------------------------------------------------------------------
+@mixin alert-styles(
+  $bg-color,
+  $bg-color-2,
+  $text-color,
+  $link-color,
+  $link-hover) {
+  font-size: 16px;
+
+  @include gradient-h($bg-color,$bg-color-2);
+  color: $text-color;
+
+  a:link,
+  a:visited {
+    color: $link-color;
+    font-weight: 700;
+    text-decoration: underline;
+    transition:
+      color 0.25s ease;
+  }
+  a:hover {
+    color: $link-hover;
+    border-color: $link-hover;
+  }
+  span.icon {
+    color: $text-color;
+  }
+}
+
+//  Alert Themes
+//  ----------------------------------------------------------------------------
+.alert-success {
+  @include alert-styles($c-rainforest,$c-pool,$g20-white,$c-wasabi,$g20-white);
+}
+.alert-primary {
+  @include alert-styles($c-pool,$c-ocean,$g20-white,$c-neutrino,$g20-white);
+}
+.alert-warning {
+  @include alert-styles($c-star,$c-pool,$g20-white,$c-neutrino,$g20-white);
+}
+.alert-danger {
+  @include alert-styles($c-curacao,$c-star,$g20-white,$c-marmelade,$g20-white);
+}
+.alert-info {
+  @include alert-styles($g20-white,$g16-pearl,$g8-storm,$ix-link-default,$ix-link-default-hover);
+}
+.alert-dark {
+  @include alert-styles($c-sapphire,$c-shadow,$c-moonstone,$ix-link-default,$ix-link-default-hover);
+}