fixing dropdown arrow behavior for Topics Messages (#2028)

* fixing dropdown arrow behavior

* adding color from theme

kafka-ui-react-app/src/components/common/Icons/DropdownArrowIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+interface Props {
+  isOpen: boolean;
+}
+
+const DropdownArrowIcon: React.FC<Props> = ({ isOpen }) => {
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      color={theme.icons.dropdownArrowIcon}
+      transform={isOpen ? 'rotate(180)' : ''}
+    >
+      <path d="M6 9L12 15 18 9" />
+    </svg>
+  );
+};
+
+export default DropdownArrowIcon;

kafka-ui-react-app/src/components/common/Select/Select.styled.ts

@@ -32,13 +32,6 @@ export const Select = styled.ul<Props>`
   color: ${({ theme, disabled }) =>
     disabled ? theme.select.color.disabled : theme.select.color.normal};
   min-width: ${({ minWidth }) => minWidth || 'auto'};
-  background-image: ${({ disabled }) =>
-    `url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="${
-      disabled ? '%23ABB5BA' : '%23454F54'
-    }"/%3E%3C/svg%3E%0A') !important`};
-  background-repeat: no-repeat !important;
-  background-position-x: calc(100% - 8px) !important;
-  background-position-y: 55% !important;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   &:hover:enabled {
     color: ${(props) => props.theme.select.color.hover};

kafka-ui-react-app/src/components/common/Select/Select.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react';
 import useClickOutside from 'lib/hooks/useClickOutside';
+import DropdownArrowIcon from 'components/common/Icons/DropdownArrowIcon';
 
 import * as S from './Select.styled';
 import LiveIcon from './LiveIcon.styled';
@@ -97,6 +98,7 @@ const Select: React.FC<SelectProps> = ({
             ))}
           </S.OptionList>
         )}
+        <DropdownArrowIcon isOpen={showOptions} />
       </S.Select>
     </div>
   );

kafka-ui-react-app/src/theme/theme.ts

@@ -490,6 +490,7 @@ const theme = {
     newFilterIcon: Colors.brand[50],
     closeModalIcon: Colors.neutral[25],
     savedIcon: Colors.brand[50],
+    dropdownArrowIcon: Colors.neutral[30],
   },
   viewer: {
     wrapper: Colors.neutral[3],