[UX] Create correlation rule page improvements

[xeniatup]

Meta UX issue
The issue is tracking the individual tasks to improve create correlation rule user experience. See a more detailed description for each item below.

Page layout

• 1.1 Implement OuiPageContent to place the page content on a single panel
• 1.2 Set consistent spacing between the nested panels and "Add query" CTA
• 1.3. Use Heading 1 style for OuiPageHeader and Heading 2 style for the sections on the page (Correlation rule details, Correlation queries) to maintain the visual hierarchy.

Functionality

• 2.1 Change the color for "Delete" OuiButtonIcon button icon to$OuiColorSubdued in the default state and to$OuiColorDanger for the hover state for each field in the query.
• 2.2 Hide the "Delete" button icon when there is just one field (as at least one field is required for the query).

Naming and terminology

TBD

Page layout

1.1 Implement OuiPageContent to place the page content on a single panel

Current experience:

Proposed experience:

1.2 Set consistent spacing between the nested panels and "Add query" CTA

Current experience:

Proposed experience:

1.3 Use Heading 1 style for OuiPageHeader and Heading 2 style for the sections on the page (Correlation rule details, Correlation queries) to maintain the visual hierarchy.

Current experience:

Proposed experience:

Functionality

2.1 Change the color for "Delete" OuiButtonIcon button icon to$OuiColorSubdued in the default state and to$OuiColorDanger for the hover state for each field in the query.

2.2 Hide the "Delete" button icon when there is just one field (as at least one field is required for the query).

Current experience:

Proposed experience:

[dblock]

Catch All Triage - 1 2 3 4 5 thanks for opening this