Merge pull request #2419 from MuhammadUmer44/Filters-buttons-sticky

Fixed[Filter]: Made Filter Buttons Sticky for Enhanced Usability
stakwork · Nov 8, 2024 · 429ba27 · 429ba27
2 parents afc8a64 + 27b4da6
commit 429ba27
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -114,8 +114,8 @@ export const FilterSearch = ({ anchorEl, setAnchorEl, onClose }: Props) => {
       <Hops hops={hops} setHops={setHops} />
       <LineBar />
       <MaxResults maxResults={maxResults} setMaxResults={setMaxResults} />
-      <LineBar />
       <PopoverFooter>
+        <LineBar />
         <ButtonsWrapper>
           <ClearButton
             color="secondary"
@@ -130,7 +130,7 @@ export const FilterSearch = ({ anchorEl, setAnchorEl, onClose }: Props) => {
             Clear
           </ClearButton>
           <ShowResultButton color="secondary" onClick={handleFiltersApply} size="large" variant="contained">
-            Show Results
+            Apply
           </ShowResultButton>
         </ButtonsWrapper>
       </PopoverFooter>
@@ -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`