Lock marketplace action bar at the top of the page

theme/foundations/semanticTokens.ts

@@ -38,6 +38,7 @@ const semanticTokens = {
   },
   shadows: {
     action_bar: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)',
+    action_bar_large: '0 30px 25px -25px rgb(0 0 0 / 10%), 0 15px 10px -25px rgb(0 0 0 / 4%)',
   },
 };
 

ui/marketplace/Banner/FeaturedApp.tsx

@@ -64,7 +64,7 @@ const FeaturedApp = ({
         height="136px"
         padding={ 5 }
         background={ backgroundColor }
-        mb={ 6 }
+        mb={ 2 }
       >
         <Skeleton
           isLoaded={ !isLoading }

ui/marketplace/Banner/FeaturedAppMobile.tsx

@@ -43,7 +43,6 @@ const FeaturedAppMobile = ({
       padding={{ base: 3, sm: '20px' }}
       role="group"
       background={ useColorModeValue('purple.50', 'whiteAlpha.100') }
-      mb={ 4 }
     >
       <Flex
         flexDirection="row"

ui/marketplace/Banner/IframeBanner.tsx

@@ -21,7 +21,7 @@ const IframeBanner = ({ contentUrl, linkUrl }: { contentUrl: string; linkUrl: st
       h="136px"
       w="100%"
       borderRadius="md"
-      mb={{ base: 4, sm: 6 }}
+      mb={{ base: 0, sm: 2 }}
       overflow="hidden"
     >
       <Link

ui/marketplace/MarketplaceList.tsx

@@ -38,6 +38,7 @@ const MarketplaceList = ({ apps, showAppInfo, favoriteApps, onFavoriteClick, isL
       }}
       autoRows="1fr"
       gap={{ base: '16px', md: '24px' }}
+      marginTop={{ base: 0, lg: 3 }}
     >
       { apps.map((app, index) => (
         <MarketplaceAppCard

ui/pages/Marketplace.tsx

@@ -1,4 +1,4 @@
-import { Box, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
+import { MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
@@ -14,6 +14,7 @@ import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
 import { SORT_OPTIONS } from 'ui/marketplace/utils';
+import ActionBar from 'ui/shared/ActionBar';
 import Menu from 'ui/shared/chakra/Menu';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
@@ -176,34 +177,43 @@ const Marketplace = () => {
         onAppClick={ handleAppClick }
       />
 
-      <Box marginTop={{ base: 0, lg: 8 }}>
+      <ActionBar
+        showShadow
+        isLargeShadow
+        display="flex"
+        flexDirection="column"
+        mx={{ base: -3, lg: -12 }}
+        px={{ base: 3, lg: 12 }}
+        pt={{ base: 4, lg: 6 }}
+        pb={{ base: 4, lg: 3 }}
+      >
         <TabsWithScroll
           tabs={ categoryTabs }
           onTabChange={ handleCategoryChange }
           defaultTabIndex={ selectedCategoryIndex }
           marginBottom={ -2 }
           isLoading={ isCategoriesPlaceholderData }
         />
-      </Box>
-
-      <Flex mb={{ base: 4, lg: 6 }} gap={{ base: 2, lg: 3 }}>
-        { feature.securityReportsUrl && (
-          <Sort
-            name="dapps_sorting"
-            options={ SORT_OPTIONS }
-            onChange={ setSorting }
+
+        <Flex gap={{ base: 2, lg: 3 }}>
+          { feature.securityReportsUrl && (
+            <Sort
+              name="dapps_sorting"
+              options={ SORT_OPTIONS }
+              onChange={ setSorting }
+              isLoading={ isPlaceholderData }
+            />
+          ) }
+          <FilterInput
+            initialValue={ filterQuery }
+            onChange={ onSearchInputChange }
+            placeholder="Find app by name or keyword..."
             isLoading={ isPlaceholderData }
+            size={ feature.securityReportsUrl ? 'xs' : 'sm' }
+            w={{ base: '100%', lg: '350px' }}
           />
-        ) }
-        <FilterInput
-          initialValue={ filterQuery }
-          onChange={ onSearchInputChange }
-          placeholder="Find app by name or keyword..."
-          isLoading={ isPlaceholderData }
-          size={ feature.securityReportsUrl ? 'xs' : 'sm' }
-          w={{ base: '100%', lg: '350px' }}
-        />
-      </Flex>
+        </Flex>
+      </ActionBar>
 
       <MarketplaceList
         apps={ displayedApps }

ui/shared/ActionBar.tsx

@@ -8,19 +8,22 @@ type Props = {
   children: React.ReactNode;
   className?: string;
   showShadow?: boolean;
+  isLargeShadow?: boolean;
 }
 
 const TOP_UP = 106;
 const TOP_DOWN = 0;
 export const ACTION_BAR_HEIGHT_DESKTOP = 24 + 32 + 12;
 export const ACTION_BAR_HEIGHT_MOBILE = 24 + 32 + 24;
 
-const ActionBar = ({ children, className, showShadow }: Props) => {
+const ActionBar = ({ children, className, showShadow, isLargeShadow }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
   const scrollDirection = useScrollDirection();
   const isSticky = useIsSticky(ref, TOP_UP + 5);
   const bgColor = useColorModeValue('white', 'black');
 
+  const shadow = isLargeShadow ? 'action_bar_large' : 'action_bar';
+
   if (!React.Children.toArray(children).filter(Boolean).length) {
     return null;
   }
@@ -42,7 +45,7 @@ const ActionBar = ({ children, className, showShadow }: Props) => {
       zIndex={{ base: 'sticky2', lg: 'docked' }}
       boxShadow={{
         base: isSticky ? 'md' : 'none',
-        lg: isSticky && showShadow ? 'action_bar' : 'none',
+        lg: isSticky && showShadow ? shadow : 'none',
       }}
       ref={ ref }
     >