diff --git a/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss index 4837ee9b..3f195248 100644 --- a/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss +++ b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.scss @@ -27,11 +27,18 @@ } svg, img { - width: rem(16px); - height: rem(16px); + width: rem(22px); + height: rem(22px); + background-color: $color-white; + padding: rem(2px); + border-radius: rem(4px); object-position: center; object-fit: contain; + + path { + fill: $color-grey-3; + } } &__top { diff --git a/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx index 6f8b3ead..d3218ab0 100644 --- a/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx +++ b/packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx @@ -14,6 +14,7 @@ import { VerifiableCredentialStatus, } from '@shared/storage/types'; +import Img from '@popup/shared/Img'; import { defaultFormatAttribute, useCredentialLocalization, @@ -21,7 +22,6 @@ import { useCredentialSchema, useCredentialStatus, } from '../utils/verifiable-credentials'; -import Img from '@popup/shared/Img'; /** * Component for displaying the status of a verifiable credential. @@ -75,9 +75,9 @@ export function Web3IdCardView({ status, title, attributes, className, warning,
-
-
- {logo !== undefined ? : } +
+
+ {logo !== undefined ? : } {title}
@@ -149,8 +149,6 @@ type Props = Pick & { credential: VerifiableCredential; }; -// TODO: -// - Use the icon from the issuer if available export default function Web3IdCard({ credential, ...viewProps }: Props) { const { t } = useTranslation('x', { keyPrefix: 'sharedX.web3IdCard.warning' }); const status = useCredentialStatus(credential); @@ -184,6 +182,7 @@ export default function Web3IdCard({ credential, ...viewProps }: Props) { title={metadata.title} status={status} warning={warning} + logo={metadata.logo} {...viewProps} /> ); diff --git a/packages/browser-wallet/src/popup/shared/Img.tsx b/packages/browser-wallet/src/popup/shared/Img.tsx index 87961791..88dfe873 100644 --- a/packages/browser-wallet/src/popup/shared/Img.tsx +++ b/packages/browser-wallet/src/popup/shared/Img.tsx @@ -17,7 +17,7 @@ type WithDefaultsProps = BaseProps & { type NoDefaultsProps = BaseProps & { withDefaults?: false; loadingImage?: string; - failedImage?: string; + failedImage?: string | JSX.Element; }; type Props = WithDefaultsProps | NoDefaultsProps; @@ -49,7 +49,10 @@ export default function Img({ src, alt, className, ...props }: Props) { }} onError={handleError} /> - {shouldHide && {alt}} + {shouldHide && failed && typeof failedImage !== 'string' && failedImage !== undefined && failedImage} + {shouldHide && (typeof failedImage === 'string' || failedImage === undefined || !failed) && ( + {alt} + )} ); }