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

@@ -215,18 +215,60 @@ export default function MobileEventRecapPage() {
flexDirection="column"
>
<Tabs.List gap="$2">
<Tabs.Tab value="overview" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="overview"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'overview' ? '700' : '600'}
color={activeTab === 'overview' ? text : muted}
textAlign="center"
>
{t('events.recap.tabs.overview', 'Overview')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="engagement" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="engagement"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'engagement' ? '700' : '600'}
color={activeTab === 'engagement' ? text : muted}
textAlign="center"
>
{t('events.recap.tabs.engagement', 'Engagement')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="compliance" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
<Tabs.Tab
value="compliance"
flex={1}
paddingVertical="$2.5"
paddingHorizontal="$3"
borderRadius="$4"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress' }}
>
<Text
fontSize="$sm"
fontWeight={activeTab === 'compliance' ? '700' : '600'}
color={activeTab === 'compliance' ? text : muted}
textAlign="center"
>
{t('events.recap.tabs.compliance', 'Compliance')}
</Text>
</Tabs.Tab>