Add new close icon

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>
               ))}

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>

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>
 );

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;

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>
           ))}

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>