3010: Styling for contact cards

native/src/utils/renderHtml.ts

@@ -394,6 +394,36 @@ const renderHtml = (
         font-weight: bold;
       }
 
+      .contact-card {
+        display: inline-block;
+        box-sizing: border-box;
+        padding: 16px;
+        border-radius: 4px;
+        background-repeat: no-repeat;
+        background-color: rgb(127 127 127 / 15%);
+        background-image: linear-gradient(to right, rgb(255 255 255 / 90%) 0 100%),
+          url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMuMDE4IDEyLjQ4aC0yLjAzNkE5LjA5IDkuMDkgMCAwIDAgMS45MiAyMS42YS40OC40OCAwIDAgMCAuNDguNDhoMTkuMmEuNTMuNTMgMCAwIDAgLjQ4LS41MzggOS4wOCA5LjA4IDAgMCAwLTkuMDYyLTkuMDYyTTE2LjggNi43MmE0LjggNC44IDAgMCAxLTQuOCA0LjggNC44IDQuOCAwIDAgMS00LjgtNC44IDQuOCA0LjggMCAwIDEgNC44LTQuOCA0LjggNC44IDAgMCAxIDQuOCA0LjgiLz48L3N2Zz4=');
+        background-blend-mode: difference;
+        background-position: calc(100% + 32px) 100%, calc(100% + 24px) calc(100% + 24px);
+        background-size: 104px;
+        box-shadow: 0 1px 1px rgb(0 0 0 / 40%);
+        width: 100%;
+
+        p {
+          margin-top: 4px;
+          margin-bottom: 0;
+        }
+
+        h4 {
+          margin-bottom: 12px;
+          margin-top: 0;
+        }
+
+        img {
+          margin-inline-end: 8px;
+        }
+      }
+
       #opt-in-settings-button {
         border: none;
         background-color: transparent;

release-notes/unreleased/3010-styling-for-contact-cards.yml

@@ -0,0 +1,9 @@
+issue_key: 3010
+show_in_stores: true
+platforms: # relevant platforms, possible values: web, android and ios
+  - ios
+  - android
+  - web
+en: We enhanced the styling of the contact cards to improve readability.
+# de is required for notes with show_in_stores set to true
+de: Wir haben das Styling der Kontaktkarten verbessert, um die Lesbarkeit zu optimieren.

web/src/assets/index.ts

@@ -40,6 +40,7 @@ import MinimizeIcon from '../../../assets/icons/minimize.svg'
 import NewsIcon from '../../../assets/icons/news.svg'
 import NoteIcon from '../../../assets/icons/note.svg'
 import PdfIcon from '../../../assets/icons/pdf.svg'
+import PersonIcon from '../../../assets/icons/person.svg'
 import PetIcon from '../../../assets/icons/pet.svg'
 import PhoneIcon from '../../../assets/icons/phone.svg'
 import POIsIcon from '../../../assets/icons/pois.svg'
@@ -107,6 +108,7 @@ export {
   POIsIcon,
   PoiThumbnailPlaceholder,
   PoiThumbnailPlaceholderLarge,
+  PersonIcon,
   RefreshIcon,
   SadSmileyIcon,
   SearchIcon,

web/src/components/RemoteContentSandBox.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-import { ExternalLinkIcon } from '../assets'
+import { ExternalLinkIcon, PersonIcon } from '../assets'
 import dimensions from '../constants/dimensions'
 import { helpers } from '../constants/theme'
 
@@ -144,6 +144,41 @@ const RemoteContentSandBox = styled.div<{ $centered: boolean; $smallText: boolea
     font-weight: bold;
   }
 
+  .contact-card {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 16px;
+    border-radius: 4px;
+    background-repeat: no-repeat;
+    background-color: rgb(127 127 127 / 15%);
+    background-image: linear-gradient(to right, rgb(255 255 255 / 90%) 0 100%), url(${PersonIcon});
+    background-blend-mode: difference;
+    background-position:
+      calc(100% + 32px) 100%,
+      calc(100% + 24px) calc(100% + 24px);
+    background-size: 104px;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 40%);
+    min-width: 72%;
+
+    p {
+      margin-top: 4px;
+      margin-bottom: 0;
+    }
+
+    h4 {
+      margin-bottom: 12px;
+      margin-top: 0;
+    }
+
+    img {
+      margin-inline-end: 8px;
+    }
+
+    @media ${dimensions.smallViewport} {
+      width: 100%;
+    }
+  }
+
   #opt-in-settings-link {
     margin-inline-start: 12px;
     padding: 0;

web/src/components/__tests__/RemoteContent.spec.tsx

@@ -102,4 +102,14 @@ describe('RemoteContent', () => {
     alertSpy.mockRestore()
     errorSpy.mockRestore()
   })
+
+  it('should render contact card', () => {
+    const testContent = 'Contact: [email protected]'
+    const html = `<div class="contact-card">${testContent}</div>`
+    const { getByText } = renderWithTheme(<RemoteContent html={html} />)
+    expect(getByText(testContent)).toHaveClass('contact-card')
+    expect(getByText(testContent)).toHaveStyle('background-color: rgb(127 127 127 / 15%)')
+    expect(getByText(testContent)).toHaveStyle('background-image:')
+    expect(getByText(testContent)).toHaveStyle('min-width: 72%')
+  })
 })