fix: display empty circle when no photo is provided

src/components/ContactPersonCard/ContactPersonCard.tsx

@@ -31,7 +31,7 @@ export const ContactPersonCard = ({
   return (
     <div className={styles.card}>
       <div>
-        {photo && (
+        {photo ? (
           <Image
             className={styles.photo}
             src={photo}
@@ -40,6 +40,8 @@ export const ContactPersonCard = ({
             height={200}
             unoptimized={true}
           />
+        ) : (
+          <div className={styles.photoPlaceholder} />
         )}
       </div>
 

src/components/ContactPersonCard/styles.module.scss

@@ -14,6 +14,13 @@
   border-radius: 50%;
 }
 
+.photoPlaceholder {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background-color: #efefef;
+}
+
 .role {
   font-size: 25px;
   color: $base-color;