legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

update colors of social buttons

Browse Source
This commit is contained in:
legop3
2026-02-10 20:26:17 -05:00
parent 42c99410f4
commit 0c3b3aa711
6 changed files with 69 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/SocialButton.jsx
+52 -8
View File
@@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { FaBook, FaCoffee, FaCrown, FaDiscord, FaLink } from 'react-icons/fa';
const ICONS_BY_ID = {
@@ -8,14 +9,53 @@ const ICONS_BY_ID = {
throne: FaCrown,
};
const VARIANT_BY_ID = {
discord: 'rainbow-animate-bg',
kofi: 'kofi-animate-bg',
'ko-fi': 'kofi-animate-bg',
wiki: 'wiki-animate-bg',
throne: 'throne-animate-bg',
const GRADIENT_STYLE_BY_ID = {
discord: {
backgroundImage:
'linear-gradient(270deg,#5865F2,#404EED,#5865F2)',
backgroundSize: '600% 600%',
animation: 'socialGradient 180s ease infinite',
},
kofi: {
backgroundImage: 'linear-gradient(270deg,#FF6433,#E04822,#FF6433)',
backgroundSize: '600% 600%',
animation: 'socialGradient 170s ease infinite',
},
'ko-fi': {
backgroundImage: 'linear-gradient(270deg,#FF6433,#E04822,#FF6433)',
backgroundSize: '600% 600%',
animation: 'socialGradient 170s ease infinite',
},
wiki: {
backgroundImage: 'linear-gradient(270deg,#EE8019,#C65C08,#EE8019)',
backgroundSize: '600% 600%',
animation: 'socialGradient 180s ease infinite',
},
throne: {
backgroundImage: 'linear-gradient(270deg,#7C3AED,#5B21B6,#7C3AED)',
backgroundSize: '600% 600%',
animation: 'socialGradient 180s ease infinite',
},
};
function useSocialButtonStyles() {
useEffect(() => {
if (typeof document === 'undefined') return;
const styleId = 'social-button-keyframes';
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
@keyframes socialGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
`;
document.head.appendChild(style);
}, []);
}
function normalizeId(id, label) {
if (typeof id === 'string' && id.trim()) return id.trim().toLowerCase();
if (typeof label === 'string' && label.trim()) {
@@ -30,9 +70,10 @@ function normalizeId(id, label) {
export default function SocialButton({ id, label, url, className = '' }) {
if (!url) return null;
useSocialButtonStyles();
const key = normalizeId(id, label);
const Icon = ICONS_BY_ID[key] || FaLink;
const variantClass = VARIANT_BY_ID[key] || 'bg-slate-700 hover:bg-slate-600';
const gradientStyle = GRADIENT_STYLE_BY_ID[key] || null;
const text = label || id || 'Link';
return (
@@ -41,7 +82,10 @@ export default function SocialButton({ id, label, url, className = '' }) {
target="_blank"
rel="noopener noreferrer"
aria-label={text}
className={`inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white transition justify-center gap-1 rounded-md ${variantClass} ${className}`}
className={`inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white transition justify-center gap-1 rounded-md ${
gradientStyle ? '' : 'bg-slate-700 hover:bg-slate-600'
} ${className}`}
style={gradientStyle || undefined}
>
<Icon className="mr-0" />
{text}