mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Psychotoxical
68f0f09aae
Replace the raw hazard-triangle icon with a small amber motion chip (shared AnimatedThemeBadge): an Activity glyph on a tinted rounded surface. In the Theme Store it stays inline after the name; on installed theme cards it moves from bottom-right to top-centre, clear of the active indicator (top-right) and the uninstall control (top-left). Tooltip and aria-label are unchanged.
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { Activity } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
type Variant = 'inline' | 'overlay';
|
|
|
|
/**
|
|
* Small amber "animated theme" chip, shown only on animation-risk setups
|
|
* (Nvidia/Linux or compositing off). A motion glyph rather than a hazard
|
|
* triangle — the CPU-usage caveat lives in the tooltip.
|
|
*
|
|
* - `inline` — sits after a theme name (Theme Store rows).
|
|
* - `overlay` — pinned top-centre on an installed theme's preview swatch
|
|
* (top-right is the active indicator, top-left the uninstall X).
|
|
*/
|
|
export function AnimatedThemeBadge({ variant }: { variant: Variant }) {
|
|
const { t } = useTranslation();
|
|
const overlay = variant === 'overlay';
|
|
return (
|
|
<span
|
|
role="img"
|
|
aria-label={t('settings.themeAnimationWarning')}
|
|
data-tooltip={t('settings.themeAnimationWarning')}
|
|
data-tooltip-pos="top"
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxSizing: 'border-box',
|
|
width: overlay ? 18 : undefined,
|
|
height: overlay ? 18 : undefined,
|
|
padding: overlay ? 0 : '1px 5px',
|
|
borderRadius: 999,
|
|
background: 'color-mix(in srgb, var(--warning) 20%, var(--bg-elevated, var(--bg-card)))',
|
|
border: '1px solid color-mix(in srgb, var(--warning) 45%, transparent)',
|
|
color: 'var(--warning)',
|
|
...(overlay
|
|
? { position: 'absolute', top: 3, left: '50%', transform: 'translateX(-50%)' }
|
|
: { verticalAlign: 'middle' }),
|
|
}}
|
|
>
|
|
<Activity size={overlay ? 11 : 12} strokeWidth={2.5} />
|
|
</span>
|
|
);
|
|
}
|