Move the status ribbon into CredentialImage.js

Author: gkatrakazas

src/components/Credentials/CredentialImage.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react"
 import { parseCredential } from "../../functions/parseCredential";
+import StatusRibbon from '../../components/Credentials/StatusRibbon';
 
 
 export const CredentialImage = ({ credential, className, onClick }) => {
@@ -13,9 +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}/>
+				</>
+			)}
 		</>
 	)
 }

src/components/Popups/SelectCredentials.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FaShare } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { useApi } from '../../api';
 import { CredentialImage } from '../Credentials/CredentialImage';
 
@@ -37,6 +36,7 @@ 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 +83,7 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 	};
 
 	return (
-		<div className="fixed inset-0 flex items-center justify-center z-50">
+		<div className="fixed inset-0 flex items-center justify-center z-40">
 			<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">
@@ -134,7 +134,6 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 						<div className="m-3 flex justify-center">
 							<div className="relative rounded-xl w-2/3 overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer">
 								<CredentialImage key={image.credentialIdentifier} credential={image.credential} onClick={() => handleClick(image.credentialIdentifier)} className={"w-full object-cover rounded-xl"} />
-								<StatusRibbon credential={image.credential} />
 							</div>
 						</div>
 					))}

src/pages/History/History.js

@@ -10,7 +10,6 @@ import { useApi } from '../../api';
 
 import CredentialInfo from '../../components/Credentials/CredentialInfo';
 import { formatDate } from '../../functions/DateFormat';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { base64url } from 'jose';
 import { CredentialImage } from '../../components/Credentials/CredentialImage';
 
@@ -132,7 +131,6 @@ const History = () => {
 									<React.Fragment key={Math.random()}>
 										<div className="relative rounded-xl xl:w-full md:w-full  sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full">
 											<CredentialImage credential={credential} className={"w-full object-cover rounded-xl"} />
-											<StatusRibbon credential={credential} />
 										</div>
 										<div className="flex items-center justify-end mt-2 mr-3">
 											<span className="mr-4">{currentSlide} of {matchingCredentials.length}</span>

src/pages/Home/CredentialDetail.js

@@ -13,7 +13,6 @@ import CredentialJson from '../../components/Credentials/CredentialJson';
 import CredentialDeleteButton from '../../components/Credentials/CredentialDeleteButton';
 import FullscreenPopup from '../../components/Popups/FullscreenImg';
 import DeletePopup from '../../components/Popups/DeletePopup';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { CredentialImage } from '../../components/Credentials/CredentialImage';
 
 const CredentialDetail = () => {
@@ -87,7 +86,6 @@ const CredentialDetail = () => {
 							// Open the modal when the credential is clicked
 							<div className="relative rounded-xl xl:w-4/5 pt-5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => setShowFullscreenImgPopup(true)}>
 								<CredentialImage credential={vcEntity.credential} className={"w-full object-cover rounded-xl"} />
-								<StatusRibbon credential={vcEntity.credential} />
 							</div>
 						) : (
 							<></>

src/pages/Home/Home.js

@@ -19,7 +19,6 @@ import CredentialDeleteButton from '../../components/Credentials/CredentialDelet
 import QRCodeScanner from '../../components/QRCodeScanner/QRCodeScanner';
 import FullscreenPopup from '../../components/Popups/FullscreenImg';
 import DeletePopup from '../../components/Popups/DeletePopup';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { CredentialImage } from '../../components/Credentials/CredentialImage';
 
 const Home = () => {
@@ -159,7 +158,6 @@ const Home = () => {
 											<>
 												<div className="relative rounded-xl xl:w-4/5 md:w-full	sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => { setShowFullscreenImgPopup(true); setSelectedVcEntity(vcEntity); }}>
 													<CredentialImage credential={vcEntity.credential} className={"w-full h-full object-cover rounded-xl"} />
-													<StatusRibbon credential={vcEntity.credential} />
 												</div>
 												<div className="flex items-center justify-end mt-2 mr-3">
 													<span className="mr-4">{currentSlide} of {vcEntityList.length}</span>
@@ -189,7 +187,6 @@ const Home = () => {
 									onClick={() => handleImageClick(vcEntity)}
 								>
 									<CredentialImage credential={vcEntity.credential} className={"w-full h-full object-cover rounded-xl"} />
-									<StatusRibbon credential={vcEntity.credential} />
 								</div>
 							))}
 							<div