diff --git a/src/components/App/SideBar/FilterSearch/__tests__/index.tsx b/src/components/App/SideBar/FilterSearch/__tests__/index.tsx index 31d3fdd3f..d6b0046d4 100644 --- a/src/components/App/SideBar/FilterSearch/__tests__/index.tsx +++ b/src/components/App/SideBar/FilterSearch/__tests__/index.tsx @@ -91,14 +91,14 @@ describe('FilterSearch Component', () => { expect(type1Pill).toHaveStyle(`color: ${colors.black}`) }) - it('should apply filters when "Show Results" is clicked', async () => { + it('should apply filters when "Apply" is clicked', async () => { renderComponent() const type1Pill = screen.getByText('Type1') fireEvent.click(type1Pill) - const showResultsButton = screen.getByText('Show Results') + const showResultsButton = screen.getByText('Apply') fireEvent.click(showResultsButton) diff --git a/src/components/App/SideBar/FilterSearch/index.tsx b/src/components/App/SideBar/FilterSearch/index.tsx index f7dc72322..679d96bb0 100644 --- a/src/components/App/SideBar/FilterSearch/index.tsx +++ b/src/components/App/SideBar/FilterSearch/index.tsx @@ -114,8 +114,8 @@ export const FilterSearch = ({ anchorEl, setAnchorEl, onClose }: Props) => { - + { Clear - Show Results + Apply @@ -142,34 +142,41 @@ const SearchFilterPopover = styled(Popper)` &&.MuiPopper-root { background: ${colors.BG2}; padding: 16px; - min-width: 360px; max-height: calc(100% - 20%); color: ${colors.white}; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2); border-radius: 9px; max-width: 361px; overflow-x: hidden; + padding-bottom: 0 !important; overflow-y: auto; border: 1px solid ${colors.black}; z-index: 100; + position: relative; &::-webkit-scrollbar { width: 3px; + height: auto; } &::-webkit-scrollbar-track { background: ${colors.BG2}; border-radius: 9px; - margin: 5px; + margin-top: 5px; + margin-bottom: 68px; overflow-y: hidden; } } ` const PopoverFooter = styled.div` - display: flex; justify-content: space-between; align-items: center; - padding-top: 8px; + padding: 0px 8px 8px 8px; + position: sticky; + bottom: 0; + background: ${colors.BG2}; + width: calc(100% + 32px); + margin: -16px; ` const LineBar = styled.div` @@ -265,7 +272,7 @@ export const SourceNodesStepWrapper = styled.div` export const ButtonsWrapper = styled(Flex)` flex-direction: row; - margin: 0 0 6px 8px; + margin: 0 0 6px 3px; ` export const PopoverBody = styled.div`