From 9be8fa56c2cb0818c50c2df8ccff4835b906f4b8 Mon Sep 17 00:00:00 2001
From: Germaine Lee <118464031+germainelee@users.noreply.github.com>
Date: Fri, 7 Feb 2025 21:56:24 -0500
Subject: [PATCH] Add background color and title attribute to social images
 (#4192)

* Make social links wrap

* Add background to social links

* add title to social link

* fix lint attempt

* css lint fix attempt

* scss prettier

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
---
 web/components/ui/SocialLinks/SocialLinks.module.scss | 9 ++++++++-
 web/components/ui/SocialLinks/SocialLinks.tsx         | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/components/ui/SocialLinks/SocialLinks.module.scss b/web/components/ui/SocialLinks/SocialLinks.module.scss
index c13b69fa8..446811404 100644
--- a/web/components/ui/SocialLinks/SocialLinks.module.scss
+++ b/web/components/ui/SocialLinks/SocialLinks.module.scss
@@ -1,10 +1,17 @@
 .link {
   width: 30px;
-  margin-right: 16px;
+}
+
+.linkBackground {
+  background-color: var(--theme-color-components-content-background);
+  border-radius: 50%;
+  padding: 8px;
 }
 
 .links {
   display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   margin-top: 5px;
diff --git a/web/components/ui/SocialLinks/SocialLinks.tsx b/web/components/ui/SocialLinks/SocialLinks.tsx
index de7922592..82d7f6fb0 100644
--- a/web/components/ui/SocialLinks/SocialLinks.tsx
+++ b/web/components/ui/SocialLinks/SocialLinks.tsx
@@ -30,7 +30,8 @@ export const SocialLinks: FC<SocialLinksProps> = ({ links }) => {
           <a
             key={link.platform}
             href={link.url}
-            className={styles.link}
+            className={styles.linkBackground}
+            title={link.platform}
             target="_blank"
             // eslint-disable-next-line react/no-invalid-html-attribute
             rel="noreferrer me"