fix: Web 1544 filter bar remove transparent bg on nft collection pages (#5034)

* remove blur effect

* init

src/nft/components/collection/CollectionNfts.tsx

@@ -62,7 +62,6 @@ const rarityStatusCache = new Map<string, boolean>()
 
 const ActionsContainer = styled.div`
   display: flex;
-  margin-top: 12px;
   justify-content: space-between;
 `
 
@@ -402,7 +401,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
   return (
     <>
       <AnimatedBox position="sticky" top="72" width="full" zIndex="3" marginBottom="20">
-        <Box backgroundColor="backgroundFloating" width="full" style={{ backdropFilter: 'blur(24px)' }}>
+        <Box backgroundColor="backgroundBackdrop" width="full" padding="16">
           <ActionsContainer>
             <Row gap="12">
               <TraceEvent

src/nft/css/sprinkles.css.ts

@@ -18,6 +18,7 @@ const themeContractValues = {
     backgroundModule: '',
     backgroundOutline: '',
     backgroundSurface: '',
+    backgroundBackdrop: '',
 
     modalBackdrop: '',
 

src/nft/themes/darkTheme.ts

@@ -17,6 +17,7 @@ export const darkTheme: Theme = {
     backgroundModule: vars.color.grey800,
     backgroundOutline: `rgba(153,161,189,0.24)`,
     backgroundSurface: vars.color.grey900,
+    backgroundBackdrop: '#000',
 
     modalBackdrop: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))',
 

src/nft/themes/lightTheme.ts

@@ -14,6 +14,7 @@ export const lightTheme: Theme = {
     backgroundModule: vars.color.grey50,
     backgroundOutline: `rgba(94,104,135,0.24)`,
     backgroundSurface: '#FFFFFF',
+    backgroundBackdrop: '#FFF',
 
     modalBackdrop: 'rgba(0, 0, 0, 0.3)',