LogalDeveloper/owncast
0
Fork 0
Code Activity

Add background color and title attribute to social images (#4192)

Browse Source 
* 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>
This commit is contained in:
Germaine Lee
2025-02-07 21:56:24 -05:00
committed by GitHub
parent 7eb415112b
commit 9be8fa56c2
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/ui/SocialLinks/SocialLinks.module.scss
View File

@@ -1,10 +1,17 @@
.link { .link {
width: 30px; width: 30px;
margin-right: 16px; }
.linkBackground {
background-color: var(--theme-color-components-content-background);
border-radius: 50%;
padding: 8px;
} }
.links { .links {
display: flex; display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-top: 5px; margin-top: 5px;

3
web/components/ui/SocialLinks/SocialLinks.tsx
View File

@@ -30,7 +30,8 @@ export const SocialLinks: FC<SocialLinksProps> = ({ links }) => {
<a <a
key={link.platform} key={link.platform}
href={link.url} href={link.url}
className={styles.link} className={styles.linkBackground}
title={link.platform}
target="_blank" target="_blank"
// eslint-disable-next-line react/no-invalid-html-attribute // eslint-disable-next-line react/no-invalid-html-attribute
rel="noreferrer me" rel="noreferrer me"