Browse Source

Fix the "X" icon in an active smart filter

michalcesek 2 years ago
parent
commit
eb84b6e910

+ 3 - 3
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts

@@ -334,9 +334,9 @@ export const DeleteSmartFilterIcon = styled.div(
     cursor: pointer;
     cursor: pointer;
     border-left: 1px solid ${icons.closeIcon.border};
     border-left: 1px solid ${icons.closeIcon.border};
 
 
-    svg{
-      height: 11px;
-      width: 11px;
+    svg {
+      height: 14px;
+      width: 14px;
     }
     }
 
 
     &:hover {
     &:hover {

+ 3 - 3
kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx

@@ -5,9 +5,9 @@ const CloseIcon: React.FC<{ className?: string }> = ({ className }) => {
   const theme = useTheme();
   const theme = useTheme();
   return (
   return (
     <svg
     <svg
-      width="9"
-      height="9"
-      viewBox="0 0 9 9"
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
       className={className}
       className={className}
       fill={theme.icons.closeIcon.normal}
       fill={theme.icons.closeIcon.normal}
       xmlns="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"

+ 2 - 2
kafka-ui-react-app/src/components/common/Search/Search.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { useDebouncedCallback } from 'use-debounce';
 import Input from 'components/common/Input/Input';
 import Input from 'components/common/Input/Input';
 import { useSearchParams } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import styled from 'styled-components';
 import styled from 'styled-components';
 
 
 interface SearchProps {
 interface SearchProps {
@@ -66,7 +66,7 @@ const Search: React.FC<SearchProps> = ({
       search
       search
       clearIcon={
       clearIcon={
         <IconButtonWrapper onClick={clearSearchValue}>
         <IconButtonWrapper onClick={clearSearchValue}>
-          <CloseIcon />
+          <CloseCircleIcon />
         </IconButtonWrapper>
         </IconButtonWrapper>
       }
       }
     />
     />