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
server/public/assets/index-CnYxiRu2.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-DKzpxr2C.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-COzMxBLj.js → server/public/assets/index-DLm82-hG.js
+14 -8
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-COzMxBLj.js"></script> <script type="module" crossorigin src="/assets/index-DLm82-hG.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DKzpxr2C.css"> <link rel="stylesheet" crossorigin href="/assets/index-CnYxiRu2.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
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'; import { FaBook, FaCoffee, FaCrown, FaDiscord, FaLink } from 'react-icons/fa';
const ICONS_BY_ID = { const ICONS_BY_ID = {
@@ -8,14 +9,53 @@ const ICONS_BY_ID = {
throne: FaCrown, throne: FaCrown,
}; };
const VARIANT_BY_ID = { const GRADIENT_STYLE_BY_ID = {
discord: 'rainbow-animate-bg', discord: {
kofi: 'kofi-animate-bg', backgroundImage:
'ko-fi': 'kofi-animate-bg', 'linear-gradient(270deg,#5865F2,#404EED,#5865F2)',
wiki: 'wiki-animate-bg', backgroundSize: '600% 600%',
throne: 'throne-animate-bg', 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) { function normalizeId(id, label) {
if (typeof id === 'string' && id.trim()) return id.trim().toLowerCase(); if (typeof id === 'string' && id.trim()) return id.trim().toLowerCase();
if (typeof label === 'string' && label.trim()) { if (typeof label === 'string' && label.trim()) {
@@ -30,9 +70,10 @@ function normalizeId(id, label) {
export default function SocialButton({ id, label, url, className = '' }) { export default function SocialButton({ id, label, url, className = '' }) {
if (!url) return null; if (!url) return null;
useSocialButtonStyles();
const key = normalizeId(id, label); const key = normalizeId(id, label);
const Icon = ICONS_BY_ID[key] || FaLink; 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'; const text = label || id || 'Link';
return ( return (
@@ -41,7 +82,10 @@ export default function SocialButton({ id, label, url, className = '' }) {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label={text} 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" /> <Icon className="mr-0" />
{text} {text}
webui/src/index.css
-76
View File
@@ -75,82 +75,6 @@ body {
@apply px-0.5 py-0.5 text-sm font-medium text-white transition-colors bg-rose-600 hover:bg-rose-500 rounded-md; @apply px-0.5 py-0.5 text-sm font-medium text-white transition-colors bg-rose-600 hover:bg-rose-500 rounded-md;
} }
.rainbow-animate-bg {
background: linear-gradient(
270deg,
#ff0000,
#ff7f00,
#ffff00b3,
#00ff00,
#0000ff,
#4b0082,
#8b00ff
/* less colors: */
/* #ff0000,
#00ff00,
#0000ff */
/* blue, white, pink */
/* #00e5ff,
#ffffff,
#ff69b4 */
/* discord colors */
/* #5865f2,
#ffffff,
#ff4754 */
);
background-size: 1400% 1400%;
animation: rainbowBG 300s ease infinite;
}
@keyframes rainbowBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.kofi-animate-bg {
background: linear-gradient(
270deg,
#ff5f5f,
#ff9f43,
#ffd166,
#ff5f5f
);
background-size: 800% 800%;
animation: rainbowBG 240s ease infinite;
}
.wiki-animate-bg {
background: linear-gradient(
270deg,
#14b8a6,
#38bdf8,
#22d3ee,
#14b8a6
);
background-size: 700% 700%;
animation: rainbowBG 240s ease infinite;
}
.throne-animate-bg {
background: linear-gradient(
270deg,
#f59e0b,
#fbbf24,
#fde68a,
#f59e0b
);
background-size: 700% 700%;
animation: rainbowBG 240s ease infinite;
}
} }
@layer utilities { @layer utilities {