add share button to app modal and update colors

ui/marketplace/FavoriteIcon.tsx

@@ -9,13 +9,13 @@ type Props = {
 }
 
 const FavoriteIcon = ({ isFavorite, color }: Props) => {
-  const heartFilledColor = useColorModeValue('blue.700', 'gray.400');
-  const defaultColor = isFavorite ? heartFilledColor : 'gray.400';
+  const heartFilledColor = useColorModeValue('blue.600', 'blue.300');
+  const defaultColor = isFavorite ? heartFilledColor : (color || 'gray.400');
 
   return (
     <IconSvg
       name={ isFavorite ? 'heart_filled' : 'heart_outline' }
-      color={ color || defaultColor }
+      color={ defaultColor }
       boxSize={ 5 }
     />
   );

ui/marketplace/MarketplaceAppCard.tsx

@@ -185,6 +185,7 @@ const MarketplaceAppCard = ({
                 aria-label="Mark as favorite"
                 title="Mark as favorite"
                 variant="ghost"
+                colorScheme="gray"
                 w={{ base: 6, md: '30px' }}
                 h={{ base: 6, md: '30px' }}
                 onClick={ handleFavoriteClick }
@@ -196,6 +197,7 @@ const MarketplaceAppCard = ({
                 icon="share"
                 size={ 4 }
                 variant="ghost"
+                colorScheme="gray"
                 w={{ base: 6, md: '30px' }}
                 h={{ base: 6, md: '30px' }}
                 color="gray.400"

ui/marketplace/MarketplaceAppModal.tsx

@@ -10,7 +10,9 @@ import { ContractListTypes } from 'types/client/marketplace';
 import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
+import isBrowser from 'lib/isBrowser';
 import * as mixpanel from 'lib/mixpanel/index';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -113,6 +115,8 @@ const MarketplaceAppModal = ({
     } catch (err) {}
   }
 
+  const iconColor = useColorModeValue('blue.600', 'gray.400');
+
   return (
     <Modal
       isOpen={ Boolean(data.id) }
@@ -206,8 +210,23 @@ const MarketplaceAppModal = ({
                   colorScheme="gray"
                   w={ 9 }
                   h={ 8 }
+                  flexShrink={ 0 }
                   onClick={ handleFavoriteClick }
-                  icon={ <FavoriteIcon isFavorite={ isFavorite } color={ useColorModeValue('blue.700', 'gray.400') }/> }
+                  icon={ <FavoriteIcon isFavorite={ isFavorite } color={ iconColor }/> }
+                />
+
+                <CopyToClipboard
+                  text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
+                  icon="share"
+                  size={ 4 }
+                  variant="outline"
+                  colorScheme="gray"
+                  w={ 9 }
+                  h={ 8 }
+                  color={ iconColor }
+                  _hover={{ color: iconColor }}
+                  display="inline-flex"
+                  borderRadius="base"
                 />
               </Flex>
             </Flex>

ui/shared/CopyToClipboard.tsx

@@ -13,9 +13,10 @@ export interface Props {
   type?: 'link';
   icon?: IconName;
   variant?: string;
+  colorScheme?: string;
 }
 
-const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type, icon, variant = 'simple' }: Props) => {
+const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type, icon, variant = 'simple', colorScheme }: Props) => {
   const { hasCopied, onCopy } = useClipboard(text, 1000);
   const [ copied, setCopied ] = useState(false);
   // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
@@ -48,6 +49,7 @@ const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type,
         boxSize={ size }
         color={ iconColor }
         variant={ variant }
+        colorScheme={ colorScheme }
         display="inline-block"
         flexShrink={ 0 }
         onClick={ handleClick }