changed columns styles due to the mockup

elastic · Jul 6, 2021 · b349245 · b349245
1 parent 6eb9ff3
commit b349245
Show file tree

Hide file tree

Showing 6 changed files with 390 additions and 65 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
@@ -133,6 +133,7 @@ export const AlertEdit = ({
         aria-labelledby="flyoutAlertEditTitle"
         size="m"
         maxWidth={620}
+        ownFocus={false}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s" data-test-subj="editAlertFlyoutTitle">

diff --git a/...ers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx b/...ers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx
@@ -95,13 +95,13 @@ export const AlertStatusFilter: React.FunctionComponent<AlertStatusFilterProps>
 export function getHealthColor(status: AlertExecutionStatuses) {
   switch (status) {
     case 'active':
-      return 'primary';
+      return 'success';
     case 'error':
       return 'danger';
     case 'ok':
       return 'subdued';
     case 'pending':
-      return 'success';
+      return 'accent';
     default:
       return 'warning';
   }

diff --git a/...s/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss b/...s/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss
@@ -5,3 +5,29 @@
     color: $euiColorDarkShade;
   }
 }
+
+.alertSidebarItem {
+  &:hover,
+  &:focus-within,
+  &[class*='-isActive'] {
+    .alertSidebarItem__action {
+      opacity: 1;
+    }
+  }
+}
+
+/**
+ * 1. Only visually hide the action, so that it's still accessible to screen readers.
+ * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
+ */
+.alertSidebarItem__action {
+  opacity: 0; /* 1 */
+
+  &.alertSidebarItem__mobile {
+    opacity: 1;
+  }
+
+  &:focus {
+    opacity: 1; /* 2 */
+  }
+}