Add prop to CredentialImage in order to hide the ribbon in fullscreen vc

Author: gkatrakazas

src/components/Credentials/CredentialImage.js

@@ -3,7 +3,7 @@ import { parseCredential } from "../../functions/parseCredential";
 import StatusRibbon from '../../components/Credentials/StatusRibbon';
 
 
-export const CredentialImage = ({ credential, className, onClick }) => {
+export const CredentialImage = ({ credential, className, onClick, showRibbon = true }) => {
 	const [parsedCredential, setParsedCredential] = useState(null);
 
 	useEffect(() => {
@@ -14,10 +14,12 @@ export const CredentialImage = ({ credential, className, onClick }) => {
 
 	return (
 		<>
-			{parsedCredential &&(
+			{parsedCredential && (
 				<>
-				<img src={parsedCredential.credentialBranding.image.url} alt={"Credential"} className={className} onClick={onClick} />
-				<StatusRibbon credential={credential}/>
+					<img src={parsedCredential.credentialBranding.image.url} alt={"Credential"} className={className} onClick={onClick} />
+					{showRibbon &&
+						<StatusRibbon credential={credential} />
+					}
 				</>
 			)}
 		</>

src/components/Popups/SelectCredentials.js

@@ -36,7 +36,6 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 					);
 
 				setRequestedFields(conformantCredentialsMap[keys[currentIndex]].requestedFields);
-				console.log('->',simplifiedCredentials);
 				setImages(simplifiedCredentials);
 			} catch (error) {
 				console.error('Failed to fetch data', error);
@@ -83,7 +82,7 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 	};
 
 	return (
-		<div className="fixed inset-0 flex items-center justify-center z-40">
+		<div className="fixed inset-0 flex items-center justify-center z-50">
 			<div className="absolute inset-0 bg-black opacity-50"></div>
 			<div className="bg-white p-4 rounded-lg shadow-lg w-full lg:max-w-[33.33%] sm:max-w-[66.67%] max-h-[90vh] z-10 relative m-4 overflow-y-auto">
 				<h2 className="text-lg font-bold mb-2 text-custom-blue">

src/pages/Home/CredentialDetail.js

@@ -111,7 +111,7 @@ const CredentialDetail = () => {
 					isOpen={showFullscreenImgPopup}
 					onClose={() => setShowFullscreenImgPopup(false)}
 					content={
-						<CredentialImage credential={vcEntity.credential} className={"max-w-full max-h-full rounded-xl"} />
+						<CredentialImage credential={vcEntity.credential} className={"max-w-full max-h-full rounded-xl"} showRibbon={false} />
 					}
 				/>
 			)}

src/pages/Home/Home.js

@@ -213,7 +213,7 @@ const Home = () => {
 					isOpen={showFullscreenImgPopup}
 					onClose={() => setShowFullscreenImgPopup(false)}
 					content={
-						<CredentialImage credential={selectedVcEntity.credential} className={"max-w-full max-h-full rounded-xl"} />
+						<CredentialImage credential={selectedVcEntity.credential} className={"max-w-full max-h-full rounded-xl"} showRibbon={false} />
 					}
 				/>
 			)}