add contact entity portrait placeholder + icons

web/src/components/blocks/ContactEntityBlock.tsx

@@ -1,6 +1,7 @@
 import { ContactEntityBlock as ContactEntityBlockType } from "@/gql/graphql";
 import styles from "./contactEntityBlock.module.scss";
 import { formatNorwegianPhoneNumber, formatPhoneE164 } from "@/lib/common";
+import Icon from "../general/Icon";
 
 export const ContactEntityBlock = ({
   block,
@@ -20,7 +21,9 @@ export const ContactEntityBlock = ({
 
   return (
     <li className={styles.contactItem}>
-      <div className={styles.image}></div>
+      <div className={styles.image}>
+        <img src="/assets/graphics/portrait-pig.svg" className={styles.portraitPlaceholder} />
+      </div>
       <div className={styles.text}>
         <h1 className={styles.name}>{contact.name}</h1>
         {contact.title && <p className={styles.role}>{contact.title}</p>}
@@ -28,7 +31,7 @@ export const ContactEntityBlock = ({
           <ul className={styles.contact}>
             {contact.email && (
               <li>
-                <span className={styles.icon}>&#9993;&nbsp;</span>
+                <span className={styles.icon}><Icon type="email" /></span>
                 <a href={`mailto:${contact.email}`} target="_blank">
                   {contact.email}
                 </a>
@@ -36,7 +39,7 @@ export const ContactEntityBlock = ({
             )}
             {phoneE164 && (
               <li>
-                <span className={styles.icon}>&#9742;&nbsp;</span>
+                <span className={styles.icon}><Icon type="phone" /></span>
                 <a href={`tel:${phoneE164}`} target="_blank">
                   {phoneFormatted}
                 </a>

web/src/components/blocks/contactEntityBlock.module.scss

@@ -12,6 +12,12 @@
     height: 7rem;
     background: var(--color-placeholder);
     border-radius: 100%;
+    overflow: hidden;
+  }
+
+  .portraitPlaceholder {
+    width: 100%;
+    height: 100%;
   }
   
   .text {