Merge pull request #1867 from blockscout/update-styles-of-no-result

Update styles of "no result" component

ui/marketplace/EmptySearchResult.tsx

@@ -20,7 +20,7 @@ const EmptySearchResult = ({ favoriteApps, selectedCategoryId }: Props) => (
     text={
       (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length) ? (
         <>
-          You don{ apos }t have any favorite apps.
+          You don{ apos }t have any favorite apps.<br/>
           Click on the <IconSvg name="star_outline" w={ 4 } h={ 4 } mb={ -0.5 }/> icon on the app{ apos }s card to add it to Favorites.
         </>
       ) : (
@@ -28,7 +28,7 @@ const EmptySearchResult = ({ favoriteApps, selectedCategoryId }: Props) => (
           No matching apps found.
           { 'suggestIdeasFormUrl' in feature && (
             <>
-              { ' ' }Have a groundbreaking idea or app suggestion?{ ' ' }
+              { ' ' }Have a groundbreaking idea or app suggestion?<br/>
               <LinkExternal href={ feature.suggestIdeasFormUrl }>Share it with us</LinkExternal>
             </>
           ) }

ui/shared/EmptySearchResult.tsx

@@ -16,23 +16,21 @@ const EmptySearchResult = ({ text }: Props) => {
       display="flex"
       flexDirection="column"
       alignItems="center"
+      justifyContent="center"
+      mt="50px"
     >
-      <Icon as={ emptySearchResultIcon } boxSize={ 60 }/>
+      <Icon
+        as={ emptySearchResultIcon }
+        w={{ base: '160px', sm: '240px' }}
+        h="auto"
+        mb={{ base: 4, sm: 6 }}
+      />
 
-      <Heading
-        as="h3"
-        marginBottom={ 2 }
-        fontSize={{ base: '2xl', sm: '3xl' }}
-        fontWeight="semibold"
-      >
+      <Heading as="h4" size="sm" mb={ 2 }>
         No results
       </Heading>
 
-      <Text
-        fontSize={{ base: 'sm' }}
-        variant="secondary"
-        align="center"
-      >
+      <Text fontSize={{ base: 'sm', sm: 'md' }} align="center">
         { text }
       </Text>
     </Box>