From cc6737a4075835e58c77fb88df712a74975cabbb Mon Sep 17 00:00:00 2001
From: michalcesek <michal-cesek@users.noreply.github.com>
Date: Thu, 27 Apr 2023 13:38:39 +0700
Subject: [PATCH] Add new close icon

---
 .../KsqlDb/Query/QueryForm/QueryForm.tsx      |  4 ++--
 .../Form/CustomParams/CustomParamField.tsx    |  4 ++--
 .../src/components/common/Alert/Alert.tsx     |  4 ++--
 .../common/Icons/CloseCircleIcon.tsx          | 24 +++++++++++++++++++
 .../Sections/KafkaCluster.tsx                 |  4 ++--
 .../Sections/KafkaConnect.tsx                 |  4 ++--
 6 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 kafka-ui-react-app/src/components/common/Icons/CloseCircleIcon.tsx

diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx
index 3803c1e10f7f74fc89ae588930fe612ed1a718dd..7456b5d2d97090953a74784870d7fc06c784fa78 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-hook-form';
 import { Button } from 'components/common/Button/Button';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import { yupResolver } from '@hookform/resolvers/yup';
 import yup from 'lib/yupExtended';
 import PlusIcon from 'components/common/Icons/PlusIcon';
@@ -174,7 +174,7 @@ const QueryForm: React.FC<QueryFormProps> = ({
                     aria-label="deleteProperty"
                     onClick={removeProperty(index)}
                   >
-                    <CloseIcon aria-hidden />
+                    <CloseCircleIcon aria-hidden />
                   </IconButtonWrapper>
                 </S.InputsContainer>
               ))}
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
index 5ba51ad2890ebb7f99f4627ac7576681ab9ec344..95d3bcb15c9fa67e9df4917971393fc9ab658a0e 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
@@ -8,7 +8,7 @@ import { FormError } from 'components/common/Input/Input.styled';
 import Select from 'components/common/Select/Select';
 import Input from 'components/common/Input/Input';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import * as C from 'components/Topics/shared/Form/TopicForm.styled';
 import { ConfigSource } from 'generated-sources';
 
@@ -125,7 +125,7 @@ const CustomParamField: React.FC<Props> = ({
           }
           title={`Delete customParam field ${index}`}
         >
-          <CloseIcon aria-hidden />
+          <CloseCircleIcon aria-hidden />
         </IconButtonWrapper>
       </S.DeleteButtonWrapper>
     </C.Column>
diff --git a/kafka-ui-react-app/src/components/common/Alert/Alert.tsx b/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
index 5b58a573d4ac31a6ccf15c9cd260952117ab2fca..963ac8b2d33c6c96e5101136cc6fc69e3c4f9a15 100644
--- a/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
+++ b/kafka-ui-react-app/src/components/common/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { ToastTypes } from 'lib/errorHandling';
 
@@ -19,7 +19,7 @@ const Alert: React.FC<AlertProps> = ({ title, type, message, onDissmiss }) => (
       <S.Message role="contentinfo">{message}</S.Message>
     </div>
     <IconButtonWrapper role="button" onClick={onDissmiss}>
-      <CloseIcon />
+      <CloseCircleIcon />
     </IconButtonWrapper>
   </S.Alert>
 );
diff --git a/kafka-ui-react-app/src/components/common/Icons/CloseCircleIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/CloseCircleIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bdc64f02b0059e9faffebec18282c00e38cd02ee
--- /dev/null
+++ b/kafka-ui-react-app/src/components/common/Icons/CloseCircleIcon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const CloseCircleIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.707 4.29289C12.0976 4.68342 12.0976 5.31658 11.707 5.70711L9.41415 8L11.707 10.2929C12.0976 10.6834 12.0976 11.3166 11.707 11.7071C11.3165 12.0976 10.6834 12.0976 10.2928 11.7071L7.99994 9.41421L5.70711 11.707C5.31658 12.0976 4.68342 12.0976 4.29289 11.707C3.90237 11.3165 3.90237 10.6834 4.29289 10.2928L6.58573 8L4.29289 5.70717C3.90237 5.31664 3.90237 4.68348 4.29289 4.29295C4.68342 3.90243 5.31658 3.90243 5.70711 4.29295L7.99994 6.58579L10.2928 4.29289C10.6834 3.90237 11.3165 3.90237 11.707 4.29289Z"
+        fill={theme.icons.closeCircleIcon}
+      />
+    </svg>
+  );
+};
+
+export default CloseCircleIcon;
diff --git a/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx b/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx
index c71f2d72ec092728d00ba3ce29561ec1948f3888..8a1be62228c7875b95e97f6da939cd8068e055f6 100644
--- a/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx
+++ b/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx
@@ -3,7 +3,7 @@ import Input from 'components/common/Input/Input';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { FormError, InputHint } from 'components/common/Input/Input.styled';
 import { ErrorMessage } from '@hookform/error-message';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import { Button } from 'components/common/Button/Button';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import * as S from 'widgets/ClusterConfigForm/ClusterConfigForm.styled';
@@ -80,7 +80,7 @@ const KafkaCluster: React.FC = () => {
                 aria-label="deleteProperty"
                 onClick={() => remove(index)}
               >
-                <CloseIcon aria-hidden />
+                <CloseCircleIcon aria-hidden />
               </S.BootstrapServerActions>
             </S.BootstrapServer>
           ))}
diff --git a/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaConnect.tsx b/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaConnect.tsx
index 4f5840ff236c369c85cfc93d393b3e71e0f15f8e..e51c9d5ffcd6c7aef3e811b0ebca205c35c5163a 100644
--- a/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaConnect.tsx
+++ b/kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaConnect.tsx
@@ -5,7 +5,7 @@ import Input from 'components/common/Input/Input';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import {
   FlexGrow1,
   FlexRow,
@@ -66,7 +66,7 @@ const KafkaConnect = () => {
                 </FlexGrow1>
                 <S.RemoveButton onClick={() => remove(index)}>
                   <IconButtonWrapper aria-label="deleteProperty">
-                    <CloseIcon aria-hidden />
+                    <CloseCircleIcon aria-hidden />
                   </IconButtonWrapper>
                 </S.RemoveButton>
               </FlexRow>