marketplace: support dark mode logo version

types/client/marketplace.ts

@@ -3,6 +3,7 @@ export type MarketplaceAppPreview = {
   external?: boolean;
   title: string;
   logo: string;
+  logoDarkMode?: string;
   shortDescription: string;
   categories: Array<string>;
   url: string;

ui/marketplace/MarketplaceAppCard.tsx

@@ -22,6 +22,7 @@ const MarketplaceAppCard = ({
   external,
   title,
   logo,
+  logoDarkMode,
   shortDescription,
   categories,
   onInfoClick,
@@ -39,6 +40,8 @@ const MarketplaceAppCard = ({
     onFavoriteClick(id, isFavorite);
   }, [ onFavoriteClick, id, isFavorite ]);
 
+  const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
+
   return (
     <LinkBox
       _hover={{
@@ -73,7 +76,7 @@ const MarketplaceAppCard = ({
           justifyContent="center"
         >
           <Image
-            src={ logo }
+            src={ logoUrl }
             alt={ `${ title } app icon` }
           />
         </Box>

ui/marketplace/MarketplaceAppModal.tsx

 import {
   Box, Flex, Heading, Icon, IconButton, Image, Link, List, Modal, ModalBody,
-  ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text,
+  ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text, useColorModeValue,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
@@ -41,6 +41,7 @@ const MarketplaceAppModal = ({
     telegram,
     twitter,
     logo,
+    logoDarkMode,
     categories,
   } = data;
 
@@ -64,6 +65,7 @@ const MarketplaceAppModal = ({
   }, [ onFavoriteClick, data.id, isFavorite ]);
 
   const isMobile = useIsMobile();
+  const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
 
   return (
     <Modal
@@ -89,7 +91,7 @@ const MarketplaceAppModal = ({
             gridRow={{ base: '1 / 3', sm: '1 / 4' }}
           >
             <Image
-              src={ logo }
+              src={ logoUrl }
               alt={ `${ title } app icon` }
             />
           </Flex>

ui/marketplace/MarketplaceList.tsx

@@ -36,6 +36,7 @@ const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Pr
             url={ app.url }
             title={ app.title }
             logo={ app.logo }
+            logoDarkMode={ app.logoDarkMode }
             shortDescription={ app.shortDescription }
             categories={ app.categories }
             isFavorite={ favoriteApps.includes(app.id) }