diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss index c603224394919..53636603fbe36 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss @@ -1,6 +1,7 @@ /** * [1] Will center vertically the empty search result + * [2] Align the height with the search input height */ $heightHeader: $euiSizeL * 2; @@ -22,10 +23,22 @@ $heightHeader: $euiSizeL * 2; &__searchBox { border-bottom: $euiBorderThin; border-top: $euiBorderThin; + border-top-right-radius: 0; + border-bottom-right-radius: 0; box-shadow: none; max-width: initial; } + &__filterListButton { + border-bottom: $euiBorderThin; + border-top: $euiBorderThin; + border-left: $euiBorderThin; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + box-shadow: none; + height: $euiSizeXXL; /* [2] */ + } + &__listWrapper { height: calc(100% - #{$heightHeader}); diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss index 44ba20eed44ae..cff38f115258d 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss @@ -1,5 +1,5 @@ .componentTemplatesListItem { - background-color: $euiColorGhost; + background-color: $euiPageBackgroundColor; padding: $euiSizeM; border-bottom: $euiBorderThin; position: relative; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx index 522725ac679e2..ce7b164eb7995 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiFilterButton, EuiPopover, EuiFilterSelectItem } from '@elastic/eui'; +import { EuiFilterButton, EuiPopover, EuiFilterSelectItem, EuiFilterGroup } from '@elastic/eui'; interface Filter { name: string; @@ -67,26 +67,28 @@ export function FilterListButton({ onChange, filters }: Props) { ); return ( - -
- {Object.entries(filters).map(([filter, item], index) => ( - toggleFilter(filter)} - data-test-subj="filterItem" - > - {(item as Filter).name} - - ))} -
-
+ + +
+ {Object.entries(filters).map(([filter, item], index) => ( + toggleFilter(filter)} + data-test-subj="filterItem" + > + {(item as Filter).name} + + ))} +
+
+
); }