0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new close icon

Browse source
This commit is contained in:
michalcesek 2023-04-27 13:38:39 +07:00
parent 039f50273e
commit cc6737a407
6 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx
View file

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

4
kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
View file

@ -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>

4
kafka-ui-react-app/src/components/common/Alert/Alert.tsx
View file

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

24
kafka-ui-react-app/src/components/common/Icons/CloseCircleIcon.tsx Normal file
View file

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

4
kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx
View file

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

4
kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaConnect.tsx
View file

@ -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>