Merge pull request #942 from prezly/feature/dev-19087-lena-theme-miss…

…ing-website-links-in-contact-cards [DEV-19087] Fix - Lena theme - missing website links in contact cards
prezly · Feb 3, 2025 · 7f4fa9f · 7f4fa9f
2 parents 5e3c694 + eaab944
commit 7f4fa9f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/components/ContactCard/ContactCard.module.scss b/components/ContactCard/ContactCard.module.scss
@@ -57,10 +57,6 @@
     align-items: center;
     gap: $spacing-1;
     overflow: hidden;
-
-    .linkGroup.social & {
-        color: $color-base-600;
-    }
 }
 
 .linkText {

diff --git a/components/ContactCard/ContactCard.tsx b/components/ContactCard/ContactCard.tsx
@@ -94,6 +94,9 @@ function ContactCard({ className, contactInfo, layout, renderAvatar, showAvatar,
                     {website && isCard && (
                         <a href={website.toString()} className={styles.link} title="Website">
                             <IconGlobe width={16} height={16} className={styles.icon} />
+                            <span className={styles.linkText}>
+                                {website.toString().replace(/(^\w+:|^)\/\//, '')}
+                            </span>
                         </a>
                     )}
                     {facebook && (
@@ -103,6 +106,7 @@ function ContactCard({ className, contactInfo, layout, renderAvatar, showAvatar,
                             title="Facebook"
                         >
                             <IconFacebook width={16} height={16} className={styles.icon} />
+                            <span className={styles.linkText}>{facebook}</span>
                         </a>
                     )}
                     {twitter && (
@@ -112,6 +116,7 @@ function ContactCard({ className, contactInfo, layout, renderAvatar, showAvatar,
                             title="Twitter"
                         >
                             <IconTwitter width={16} height={16} className={styles.icon} />
+                            <span className={styles.linkText}>{`@${twitter}`}</span>
                         </a>
                     )}
                 </div>