Improve active states for admin tabs and filters
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled

This commit is contained in:
Codex Agent
2026-02-04 08:44:50 +01:00
parent eecb1a5b85
commit 93ae23fd0a
7 changed files with 178 additions and 91 deletions

View File

@@ -129,7 +129,7 @@ export default function MobileBrandingPage() {
const slug = slugParam ?? null;
const navigate = useNavigate();
const { t } = useTranslation('management');
const { textStrong, muted, subtle, border, primary, accentSoft, danger, surfaceMuted, surface } = useAdminTheme();
const { textStrong, text, muted, subtle, border, primary, accentSoft, danger, surfaceMuted, surface } = useAdminTheme();
const [event, setEvent] = React.useState<TenantEvent | null>(null);
const [form, setForm] = React.useState<BrandingFormValues>(() => buildBrandingFormBase(BRANDING_FORM_DEFAULTS));
@@ -645,13 +645,41 @@ export default function MobileBrandingPage() {
>
<MobileCard gap="$2">
<Tabs.List gap="$2">
<Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="branding"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'branding' ? '700' : '600'}
color={activeTab === 'branding' ? text : muted}
textAlign="center"
>
{t('events.branding.titleShort', 'Branding')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="watermark" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="watermark"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'watermark' ? '700' : '600'}
color={activeTab === 'watermark' ? text : muted}
textAlign="center"
>
{t('events.watermark.tab', 'Wasserzeichen')}
</Text>
</Tabs.Tab>