Delete assertion & Edit assertion tooltips & change delete to a trash…

…can icon
kubeshop · May 26, 2022 · d062686 · d062686
1 parent a50cda9
commit d062686
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/web/src/components/AssertionCard/AssertionCard.styled.ts b/web/src/components/AssertionCard/AssertionCard.styled.ts
@@ -1,4 +1,4 @@
-import {CloseCircleOutlined, EditOutlined} from '@ant-design/icons';
+import {DeleteOutlined, EditOutlined} from '@ant-design/icons';
 import {Typography} from 'antd';
 import styled, {css} from 'styled-components';
 
@@ -13,7 +13,7 @@ export const Header = styled.div`
   border-bottom: 1px solid rgba(3, 24, 73, 0.1);
   padding: 8px 14px;
   justify-content: space-between;
-  border-radius: 2px 2px 0px 0px;
+  border-radius: 2px 2px 0 0;
 `;
 
 export const Body = styled.div`
@@ -30,7 +30,7 @@ export const SelectorListText = styled(Typography.Text).attrs({
 `;
 
 export const SpanCountText = styled(Typography.Text)`
-  font-size: 12;
+  font-size: 12px;
 `;
 const baseIcon = css`
   font-size: 18px;
@@ -42,7 +42,7 @@ export const EditIcon = styled(EditOutlined)`
   ${baseIcon}
 `;
 
-export const DeleteIcon = styled(CloseCircleOutlined)`
-  ${baseIcon}
+export const DeleteIcon = styled(DeleteOutlined)`
+  ${baseIcon};
   margin-left: 12px;
 `;
diff --git a/web/src/components/AssertionCard/AssertionCard.tsx b/web/src/components/AssertionCard/AssertionCard.tsx
@@ -1,3 +1,4 @@
+import {Tooltip} from 'antd';
 import {useCallback} from 'react';
 import {useStore} from 'react-flow-renderer';
 import {TAssertionResultEntry} from '../../types/Assertion.types';
@@ -43,8 +44,12 @@ const AssertionCard: React.FC<TAssertionCardProps> = ({
           <S.SpanCountText>{spanCountText}</S.SpanCountText>
         </div>
         <div>
-          <S.EditIcon data-cy="edit-assertion-button" onClick={() => onEdit(assertionResult)} />
-          <S.DeleteIcon onClick={() => onDelete(selector)} />
+          <Tooltip color="white" title="Edit Assertion">
+            <S.EditIcon data-cy="edit-assertion-button" onClick={() => onEdit(assertionResult)} />
+          </Tooltip>
+          <Tooltip color="white" title="Delete Assertion">
+            <S.DeleteIcon onClick={() => onDelete(selector)} />
+          </Tooltip>
         </div>
       </S.Header>
       <S.Body>