Merge pull request #2106 from blockscout/lock-marketplace-action-bar

Lock marketplace action bar at the top of the page

icons/star_filled.svg

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
-  <path d="M15.713 20a.724.724 0 0 1-.354-.09L10 16.956 4.64 19.91a.728.728 0 0 1-.796-.061.788.788 0 0 1-.256-.342.827.827 0 0 1-.045-.432l1.024-6.252L.229 8.394a.802.802 0 0 1-.207-.377.829.829 0 0 1 .015-.435.795.795 0 0 1 .232-.361.741.741 0 0 1 .379-.179L6.64 6.13 9.321.442a.78.78 0 0 1 .28-.323.731.731 0 0 1 .798 0 .78.78 0 0 1 .28.323l2.68 5.688 5.993.912a.74.74 0 0 1 .379.178c.108.096.188.22.232.361a.828.828 0 0 1-.192.813l-4.338 4.428 1.024 6.252a.83.83 0 0 1-.167.644.762.762 0 0 1-.26.208.728.728 0 0 1-.319.074h.002Z" fill="currentColor"/>
+  <path d="M15.713 20a.724.724 0 0 1-.354-.09L10 16.956 4.64 19.91a.728.728 0 0 1-.796-.061.788.788 0 0 1-.256-.342.827.827 0 0 1-.045-.432l1.024-6.252L.229 8.394a.802.802 0 0 1-.207-.377.829.829 0 0 1 .015-.435.795.795 0 0 1 .232-.361.741.741 0 0 1 .379-.179L6.64 6.13 9.321.442a.78.78 0 0 1 .28-.323.731.731 0 0 1 .798 0 .78.78 0 0 1 .28.323l2.68 5.688 5.993.912a.74.74 0 0 1 .379.178.8.8 0 0 1 .232.361.828.828 0 0 1-.192.813l-4.338 4.428 1.024 6.252a.83.83 0 0 1-.167.644.762.762 0 0 1-.26.208.728.728 0 0 1-.319.074h.002Z" fill="currentColor"/>
 </svg>

ui/marketplace/Banner/FeaturedApp.tsx

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

ui/marketplace/Banner/FeaturedAppMobile.tsx

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

ui/marketplace/Banner/IframeBanner.tsx

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

ui/marketplace/MarketplaceList.tsx

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

ui/pages/Marketplace.pw.tsx

+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { apps as appsMock } from 'mocks/apps/apps';
@@ -62,7 +63,15 @@ test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
   test('base view', async({ render }) => {
-    const component = await render(<Marketplace/>);
+    const component = await render(
+      <Box>
+        { /* Added a fake header because without the ActionBar works incorrectly without it */ }
+        <Box h="100px" backgroundColor="#dbdbdb" p={ 1 }>
+          Header
+        </Box>
+        <Marketplace/>
+      </Box>,
+    );
 
     await expect(component).toHaveScreenshot();
   });

ui/pages/Marketplace.tsx

-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';
@@ -140,6 +141,7 @@ const Marketplace = () => {
     <>
       <PageTitle
         title="DAppscout"
+        mb={ 2 }
         contentAfter={ (isMobile && links.length > 1) ? (
           <Menu>
             <MenuButton
@@ -181,7 +183,15 @@ const Marketplace = () => {
         onAppClick={ handleAppClick }
       />
 
-      <Box marginTop={{ base: 0, lg: 8 }}>
+      <ActionBar
+        showShadow
+        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 }
@@ -189,26 +199,26 @@ const Marketplace = () => {
           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 }