Refactor dropdown (#1561)

front/src/modules/ui/view-bar/components/ViewBarDetails.tsx

@@ -1,13 +1,8 @@
 import type { Context, ReactNode } from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import {
-  IconArrowNarrowDown,
-  IconArrowNarrowUp,
-  IconPlus,
-} from '@/ui/icon/index';
+import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icon/index';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
@@ -20,11 +15,10 @@ import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedS
 import { canPersistFiltersScopedFamilySelector } from '../states/selectors/canPersistFiltersScopedFamilySelector';
 import { canPersistSortsScopedFamilySelector } from '../states/selectors/canPersistSortsScopedFamilySelector';
 import { sortsScopedState } from '../states/sortsScopedState';
-import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 import { SelectedSortType } from '../types/interface';
 import { getOperandLabelShort } from '../utils/getOperandLabel';
 
-import { FilterDropdownButton } from './FilterDropdownButton';
+import { AddFilterFromDropdownButton } from './AddFilterFromDetailsButton';
 import SortOrFilterChip from './SortOrFilterChip';
 
 export type ViewBarDetailsProps = {
@@ -99,6 +93,7 @@ const StyledSeperator = styled.div`
 `;
 
 const StyledAddFilterContainer = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
   z-index: 5;
 `;
 
@@ -109,8 +104,6 @@ function ViewBarDetails<SortField>({
   onReset,
   rightComponent,
 }: ViewBarDetailsProps) {
-  const theme = useTheme();
-
   const recoilScopeId = useContextScopeId(context);
 
   const currentViewId = useRecoilScopedValue(currentViewIdScopedState, context);
@@ -219,13 +212,7 @@ function ViewBarDetails<SortField>({
         </StyledChipcontainer>
         {hasFilterButton && (
           <StyledAddFilterContainer>
-            <FilterDropdownButton
-              context={context}
-              hotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-              color={theme.font.color.tertiary}
-              Icon={IconPlus}
-              label="Add filter"
-            />
+            <AddFilterFromDropdownButton />
           </StyledAddFilterContainer>
         )}
       </StyledFilterContainer>