Repository: provectus/kafka-ui
Issue: UI improvement for dropdown fields in a system
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
With opening the dropdown, the arrow should be turned up for all dropdown fields


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Login to system
2. Navigate to Topic/Messages
3. Check the dropdown fields in filtering part

**Expected behavior**
In case of opening the dropdown, the arrow should be turned up


**Screenshots**

https://user-images.githubusercontent.com/104780608/169799863-7cbc87a5-39cd-4542-9b55-78a109d8c227.mov



**Additional context**
Please make sure that all dropdown fields are working in the same way over the system


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/common/Icons/DropdownArrowIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/DropdownArrowIcon.tsx
new file mode 100644
index 00000000000..22c783ac55a
--- /dev/null
+++ b/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;
diff --git a/kafka-ui-react-app/src/components/common/Select/Select.styled.ts b/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
index cf70423295c..428cbcc89c6 100644
--- a/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
+++ b/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};
diff --git a/kafka-ui-react-app/src/components/common/Select/Select.tsx b/kafka-ui-react-app/src/components/common/Select/Select.tsx
index d9c56ebdab2..3e0e57465f0 100644
--- a/kafka-ui-react-app/src/components/common/Select/Select.tsx
+++ b/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>
   );
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index eaaae9812be..fba48c6c85d 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/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],


Test patch: