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

@@ -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;

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"