Added new design

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_footer/phase_footer.tsx

@@ -27,15 +27,15 @@ export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
 
   if (phaseConfiguration === 'disabled' || phaseConfiguration === 'enabled') {
     return (
-      <EuiPanel className={'ilmPhaseFooter'}>
+      <EuiPanel className={'ilmPhaseFooter'} hasShadow={false}>
         <EuiText size={'s'}>&nbsp;</EuiText>
       </EuiPanel>
     );
   }
 
   if (phaseConfiguration === 'forever') {
     return (
-      <EuiPanel color={'subdued'} className={'ilmPhaseFooter'}>
+      <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
         <InfinityIcon size={'s'} />{' '}
         <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
           <FormattedMessage
@@ -54,7 +54,7 @@ export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
   }
 
   return (
-    <EuiPanel color={'subdued'} className={'ilmPhaseFooter'}>
+    <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
       <EuiIcon type={'storage'} size={'s'} />{' '}
       <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
         <FormattedMessage

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { PhaseIcon } from './phase_icon';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss

@@ -0,0 +1,28 @@
+.ilmPhaseIcon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: $euiColorLightestShade;
+  &--delete {
+    background-color: $euiColorLightShade;
+  }
+  &__inner--hot {
+    fill: $euiColorVis9_behindText;
+  }
+  &__inner--warm {
+    fill: $euiColorVis5_behindText;
+  }
+  &__inner--cold {
+    fill: $euiColorVis1_behindText;
+  }
+  &__inner--delete {
+    fill: $euiColorDarkShade;
+  }
+
+  &__inner--disabled {
+    fill: $euiColorMediumShade;
+  }
+}

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiIcon } from '@elastic/eui';
+import { Phases } from '../../../../../../common/types';
+import './phase_icon.scss';
+interface Props {
+  enabled: boolean;
+  phase: string & keyof Phases;
+}
+export const PhaseIcon: FunctionComponent<Props> = ({ enabled, phase }) => {
+  return (
+    <div
+      className={`ilmPhaseIcon ilmPhaseIcon--${phase} ${enabled ? '' : 'ilmPhaseIcon--disabled'}`}
+    >
+      {enabled ? (
+        <EuiIcon
+          className={`ilmPhaseIcon__inner--${phase}`}
+          type={phase === 'delete' ? 'trash' : 'checkInCircleFilled'}
+          size={phase === 'delete' ? 'm' : 'l'}
+        />
+      ) : (
+        <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'l'} />
+      )}
+    </div>
+  );
+};

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss

@@ -1,4 +1,15 @@
-.euiPanel.ilmDeletePhase {
-  // border is only shown in v7 to compensate for panels not having background color
-  border-color: $euiColorDanger;
+.ilmDeletePhase {
+  .euiCommentEvent {
+    &__header {
+      padding: $euiSize;
+      background-color: $euiColorEmptyShade;
+
+    }
+    &__body {
+      padding: $euiSize;
+      background-color: $euiColorLightestShade;
+
+    }
+
+  }
 }

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx

@@ -7,13 +7,13 @@
 import React, { FunctionComponent } from 'react';
 import { get } from 'lodash';
 import {
-  EuiPanel,
   EuiFlexItem,
   EuiFlexGroup,
   EuiTitle,
   EuiButtonEmpty,
   EuiSpacer,
   EuiText,
+  EuiComment,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -26,6 +26,7 @@ import { usePhaseTimings } from '../../../form';
 
 import { MinAgeField, SnapshotPoliciesField } from '../shared_fields';
 import './delete_phase.scss';
+import { PhaseIcon } from '../../phase_icon';
 
 const formFieldPaths = {
   enabled: '_meta.delete.enabled',
@@ -42,44 +43,40 @@ export const DeletePhase: FunctionComponent = () => {
   if (!enabled) {
     return null;
   }
+  const phaseTitle = (
+    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
+      <EuiFlexItem grow={false}>
+        <EuiTitle size={'s'}>
+          <h2>{i18nTexts.editPolicy.titles.delete}</h2>
+        </EuiTitle>
+      </EuiFlexItem>
+
+      <EuiFlexItem>
+        <EuiButtonEmpty
+          onClick={() => setDeletePhaseEnabled(false)}
+          data-test-subj={'disableDeletePhaseButton'}
+        >
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.removeDeletePhaseButtonLabel"
+            defaultMessage="Remove"
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
 
   return (
-    <EuiPanel color={'danger'} className={'ilmDeletePhase'} hasShadow={false}>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiTitle size={'s'}>
-            <h2>{i18nTexts.editPolicy.titles.delete}</h2>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize={'xs'}>
-            <EuiFlexItem>
-              <MinAgeField phase={'delete'} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                onClick={() => setDeletePhaseEnabled(false)}
-                iconType={'cross'}
-                color={'danger'}
-                size="xs"
-                iconSide="left"
-                data-test-subj={'disableDeletePhaseButton'}
-              >
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.removeDeletePhaseButtonLabel"
-                  defaultMessage="Disable"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
+    <EuiComment
+      username={phaseTitle}
+      actions={<MinAgeField phase={'delete'} />}
+      className="ilmDeletePhase"
+      timelineIcon={<PhaseIcon enabled={enabled} phase={'delete'} />}
+    >
       <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
         {i18nTexts.editPolicy.descriptions.delete}
       </EuiText>
       <EuiSpacer />
       <SnapshotPoliciesField />
-    </EuiPanel>
+    </EuiComment>
   );
 };

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase.scss

@@ -1,6 +1,18 @@
-.ilmPhasePanel {
-  padding: 0;
-  .ilmPhasePanel__inner {
+.ilmPhase {
+  .euiCommentEvent {
+    &__header {
+      padding: $euiSize;
+      background-color: $euiColorEmptyShade;
+    }
+    &__body {
+      padding: 0;
+    }
+
+  }
+  &__inner {
     padding: $euiSize;
   }
+  .ilmSettingsButton {
+    color: $euiColorPrimary;
+  }
 }