Refactor dropdown (#1561)

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -22,6 +22,7 @@ type OwnProps = {
   };
   dropdownHotkeyScope?: HotkeyScope;
   dropdownPlacement?: Placement;
+  onDropdownToggle?: (isDropdownOpen: boolean) => void;
 };
 
 export function DropdownButton({
@@ -31,12 +32,14 @@ export function DropdownButton({
   hotkey,
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
+  onDropdownToggle,
 }: OwnProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { isDropdownButtonOpen, toggleDropdownButton, closeDropdownButton } =
     useDropdownButton({
       key: dropdownKey,
+      onDropdownToggle,
     });
 
   const { refs, floatingStyles } = useFloating({

front/src/modules/ui/dropdown/components/StyledHeaderDropdownButton.tsx

@@ -10,7 +10,7 @@ export const StyledHeaderDropdownButton = styled.div<StyledDropdownButtonProps>`
   background: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ isActive, theme, color }) =>
-    color ?? (isActive ? theme.color.blue : 'none')};
+    color ?? (isActive ? theme.color.blue : theme.font.color.secondary)};
   cursor: pointer;
   display: flex;
   filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};