diff --git a/web/public/assets/graphics/portrait-pig.svg b/web/public/assets/graphics/portrait-pig.svg
new file mode 100644
index 0000000..e885e20
--- /dev/null
+++ b/web/public/assets/graphics/portrait-pig.svg
@@ -0,0 +1,22 @@
+
diff --git a/web/src/components/blocks/ContactEntityBlock.tsx b/web/src/components/blocks/ContactEntityBlock.tsx
index 4e4e5b2..ff6a254 100644
--- a/web/src/components/blocks/ContactEntityBlock.tsx
+++ b/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 (
-
+
+

+
{contact.name}
{contact.title &&
{contact.title}
}
@@ -28,7 +31,7 @@ export const ContactEntityBlock = ({
{contact.email && (
-
- ✉
+
{contact.email}
@@ -36,7 +39,7 @@ export const ContactEntityBlock = ({
)}
{phoneE164 && (
-
- ☎
+
{phoneFormatted}
diff --git a/web/src/components/blocks/contactEntityBlock.module.scss b/web/src/components/blocks/contactEntityBlock.module.scss
index a0f104e..a1a2022 100644
--- a/web/src/components/blocks/contactEntityBlock.module.scss
+++ b/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 {
diff --git a/web/src/components/general/Icon.tsx b/web/src/components/general/Icon.tsx
index eda7f1d..b874385 100644
--- a/web/src/components/general/Icon.tsx
+++ b/web/src/components/general/Icon.tsx
@@ -3,7 +3,7 @@ import styles from "./icon.module.scss";
export default function Icon({
type,
}: {
- type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "instagram" | "facebook" | "flickr";
+ type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "email" | "phone" | "instagram" | "facebook" | "flickr";
}) {
return (
@@ -53,6 +53,14 @@ export default function Icon({
)}
+ {type === "email" && (
+
+ )}
+
+ {type === "phone" && (
+
+ )}
+
{type === "instagram" && (