Improve active states for admin tabs and filters
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user