Micro fixes to the marketplace.

ui/apps/AppCard.tsx

@@ -28,7 +28,6 @@ const AppCard = ({ id,
   isFavorite,
   onFavoriteClick,
 }: Props) => {
-
   const categoriesLabel = categories.map(c => APP_CATEGORIES[c]).filter(notEmpty).join(', ');
 
   const handleInfoClick = useCallback((event: MouseEvent) => {
@@ -55,6 +54,7 @@ const AppCard = ({ id,
       padding={{ base: 3, sm: '20px' }}
       border="1px"
       borderColor={ useColorModeValue('gray.200', 'gray.600') }
+      role="group"
     >
       <Box
         display={{ base: 'grid', sm: 'block' }}
@@ -71,6 +71,7 @@ const AppCard = ({ id,
           h={{ base: '64px', sm: '96px' }}
         >
           <Image
+            borderRadius={ 8 }
             src={ logo }
             alt={ `${ title } app icon` }
           />
@@ -133,9 +134,11 @@ const AppCard = ({ id,
         </Box>
 
         <IconButton
+          display={{ base: 'block', sm: isFavorite ? 'block' : 'none' }}
+          _groupHover={{ display: 'block' }}
           position="absolute"
-          right={{ base: 3, sm: '20px' }}
-          top={{ base: 3, sm: '20px' }}
+          right={{ base: 3, sm: '10px' }}
+          top={{ base: 3, sm: '14px' }}
           aria-label="Mark as favorite"
           title="Mark as favorite"
           variant="ghost"

ui/apps/AppList.tsx

@@ -28,7 +28,7 @@ const AppList = ({ apps, onAppClick, displayedAppId, onModalClose, favoriteApps,
       { apps.length > 0 ? (
         <Grid
           templateColumns={{
-            sm: 'repeat(auto-fill, minmax(170px, 1fr))',
+            sm: 'repeat(auto-fill, minmax(178px, 1fr))',
             lg: 'repeat(auto-fill, minmax(260px, 1fr))',
           }}
           autoRows="1fr"

ui/apps/AppModal.tsx

@@ -100,9 +100,6 @@ const AppModal = ({
             fontWeight="medium"
             lineHeight={ 1 }
             color="blue.600"
-            whiteSpace="nowrap"
-            overflow="hidden"
-            textOverflow="ellipsis"
           >
             { title }
           </Heading>

ui/apps/CategoriesMenu.tsx

@@ -37,7 +37,7 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect }: Props) => {
           display="flex"
           alignItems="center"
         >
-          { selectedCategory ? selectedCategory.name : 'All' }
+          { selectedCategory?.name }
           <Icon transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} as={ eastMiniArrowIcon } w={ 5 } h={ 5 }/>
         </Box>
       </MenuButton>

ui/apps/CategoriesMenuItem.tsx

-import { MenuItem } from '@chakra-ui/react';
+import { Icon, MenuItem } from '@chakra-ui/react';
+import type { FunctionComponent, SVGAttributes } from 'react';
 import React, { useCallback } from 'react';
 
 import type { MarketplaceCategoriesIds } from 'types/client/apps';
 
+import starFilledIcon from 'icons/star_filled.svg';
+
 type Props = {
   id: MarketplaceCategoriesIds;
   name: string;
   onClick: (category: MarketplaceCategoriesIds) => void;
 }
 
+const ICONS = {
+  favorites: starFilledIcon,
+} as { [key in MarketplaceCategoriesIds]: FunctionComponent<SVGAttributes<SVGElement>> };
+
 const CategoriesMenuItem = ({ id, name, onClick }: Props) => {
   const handleSelection = useCallback(() => {
     onClick(id);
@@ -18,7 +25,13 @@ const CategoriesMenuItem = ({ id, name, onClick }: Props) => {
     <MenuItem
       key={ id }
       onClick={ handleSelection }
+      display="flex"
+      alignItems="center"
     >
+      { id in ICONS && (
+        <Icon mr={ 3 } as={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/>
+      ) }
+
       { name }
     </MenuItem>
   );

ui/apps/constants.ts

 import type { MarketplaceCategoriesIds } from 'types/client/apps';
 
 export const APP_CATEGORIES: {[key in MarketplaceCategoriesIds]: string} = {
-  all: 'All',
   favorites: 'Favorites',
+  all: 'All apps',
   defi: 'DeFi',
   exchanges: 'Exchanges',
   finance: 'Finance',

ui/pages/MarketplaceApp.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { AppItemOverview } from 'types/client/apps';
 
 import useNetwork from 'lib/hooks/useNetwork';
+import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
 
 type Props = {
@@ -40,12 +41,7 @@ const MarketplaceApp = ({ app, isLoading }: Props) => {
         paddingTop={{ base: '138px', lg: 0 }}
       >
         { (isFrameLoading) && (
-          <Center
-            h="100%"
-            w="100%"
-          >
-            Loading...
-          </Center>
+          <ContentLoader/>
         ) }
 
         { app && (