fix: force app icon 100% size in connect modal, fixes leather-io#455

Palem1988 · Jul 24, 2020 · 4f69f75 · 4f69f75
1 parent 8d13cf3
commit 4f69f75
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/connect/src/react/components/app-icon/index.tsx b/packages/connect/src/react/components/app-icon/index.tsx
@@ -9,7 +9,7 @@ interface AppIconProps {
 
 const AppIcon: React.FC<AppIconProps & BoxProps> = ({ src, alt, ...rest }) => (
   <Box borderRadius="6px" overflow="hidden" size="loose" {...rest}>
-    <Image src={src} alt={alt} title={alt} loading="lazy" />
+    <Image src={src} alt={alt} title={alt} loading="lazy" width="100%" maxHeight="100%" />
   </Box>
 );
 

diff --git a/packages/connect/src/react/components/image/index.tsx b/packages/connect/src/react/components/image/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { BoxProps, Box } from '@blockstack/ui';
 
-interface ImageProps {
+interface ImageProps extends BoxProps {
   src?: string;
   alt?: string;
   title?: string;
@@ -9,7 +10,8 @@ interface ImageProps {
 
 const Image: React.FC<ImageProps> = ({ loading: _loading, ...props }) => {
   return (
-    <img
+    <Box
+      as="img"
       style={{
         maxWidth: '100%',
         display: 'block',