From b32ff9ca8b22409f5eea36ea08372e502770c6e2 Mon Sep 17 00:00:00 2001
From: Robert Azizbekyan <103438454+rAzizbekyan@users.noreply.github.com>
Date: Mon, 30 May 2022 11:46:32 +0400
Subject: [PATCH] fixing dropdown arrow behavior for Topics Messages (#2028)

* fixing dropdown arrow behavior

* adding color from theme
---
 .../common/Icons/DropdownArrowIcon.tsx        | 26 +++++++++++++++++++
 .../components/common/Select/Select.styled.ts |  7 -----
 .../src/components/common/Select/Select.tsx   |  2 ++
 kafka-ui-react-app/src/theme/theme.ts         |  1 +
 4 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 kafka-ui-react-app/src/components/common/Icons/DropdownArrowIcon.tsx

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 0000000000..22c783ac55
--- /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 cf70423295..428cbcc89c 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 d9c56ebdab..3e0e57465f 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 eaaae9812b..fba48c6c85 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],