Tighten tasks tab controls
This commit is contained in:
@@ -87,9 +87,6 @@ export default function MobileEventTasksPage() {
|
||||
glassBorder,
|
||||
glassShadow,
|
||||
} = useAdminTheme();
|
||||
const stickySurface = glassSurface ?? surface;
|
||||
const stickyBorder = glassBorder ?? border;
|
||||
const stickyShadow = glassShadow ?? shadow;
|
||||
const isMember = user?.role === 'member';
|
||||
const [assignedTasks, setAssignedTasks] = React.useState<TenantTask[]>([]);
|
||||
const [library, setLibrary] = React.useState<TenantTask[]>([]);
|
||||
@@ -818,11 +815,17 @@ export default function MobileEventTasksPage() {
|
||||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||||
{t('events.tasks.tabs.library', 'Task Library')}
|
||||
</Text>
|
||||
<Pressable onPress={() => setActiveTab('collections')}>
|
||||
<Text fontSize={12} fontWeight="600" color={primary}>
|
||||
<Button
|
||||
size="$2"
|
||||
backgroundColor={withAlpha(primary, 0.12)}
|
||||
borderWidth={1}
|
||||
borderColor={withAlpha(primary, 0.35)}
|
||||
onPress={() => setActiveTab('collections')}
|
||||
>
|
||||
<Text fontSize="$xs" fontWeight="700" color={primary}>
|
||||
{t('events.tasks.import', 'Import photo task pack')}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</Button>
|
||||
</XStack>
|
||||
{!canAddTasks ? (
|
||||
<Text fontSize={12} fontWeight="600" color={dangerText}>
|
||||
@@ -966,15 +969,21 @@ export default function MobileEventTasksPage() {
|
||||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||||
{t('events.tasks.tabs.emotions', 'Emotions')}
|
||||
</Text>
|
||||
<CTAButton
|
||||
label={t('events.tasks.addEmotion', 'Add emotion')}
|
||||
fullWidth={false}
|
||||
<Button
|
||||
size="$2"
|
||||
backgroundColor={withAlpha(primary, 0.12)}
|
||||
borderWidth={1}
|
||||
borderColor={withAlpha(primary, 0.35)}
|
||||
onPress={() => {
|
||||
setEditingEmotion(null);
|
||||
setEmotionForm({ name: '', color: border });
|
||||
setShowEmotionSheet(true);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Text fontSize="$xs" fontWeight="700" color={primary}>
|
||||
{t('events.tasks.addEmotion', 'Add emotion')}
|
||||
</Text>
|
||||
</Button>
|
||||
</XStack>
|
||||
{emotions.length === 0 ? (
|
||||
<Text fontSize={12} fontWeight="500" color={muted}>
|
||||
@@ -1182,53 +1191,47 @@ export default function MobileEventTasksPage() {
|
||||
<Tabs.Content value="assigned" paddingTop="$2">
|
||||
<Card borderRadius={18} borderWidth={1} borderColor={border} backgroundColor={surface} padding="$3">
|
||||
<YStack space="$2">
|
||||
<YStack className="admin-sticky-toolbar">
|
||||
<Card
|
||||
borderRadius={16}
|
||||
borderWidth={1}
|
||||
borderColor={stickyBorder}
|
||||
backgroundColor={stickySurface}
|
||||
padding="$2.5"
|
||||
shadowColor={stickyShadow}
|
||||
shadowOpacity={0.12}
|
||||
shadowRadius={12}
|
||||
shadowOffset={{ width: 0, height: 8 }}
|
||||
>
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack flex={1}>
|
||||
<MobileInput
|
||||
type="search"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder={t('events.tasks.search', 'Search photo tasks')}
|
||||
compact
|
||||
/>
|
||||
</XStack>
|
||||
<Pressable onPress={() => setShowEmotionFilterSheet(true)}>
|
||||
<XStack
|
||||
alignItems="center"
|
||||
space="$1.5"
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
borderRadius={14}
|
||||
borderWidth={1}
|
||||
borderColor={border}
|
||||
backgroundColor={surface}
|
||||
>
|
||||
<Text fontSize={11} fontWeight="700" color={text}>
|
||||
{t('events.tasks.emotionFilterShort', 'Emotion')}
|
||||
</Text>
|
||||
<Text fontSize={11} color={muted}>
|
||||
{emotionFilter
|
||||
? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
|
||||
: t('events.tasks.allEmotions', 'All')}
|
||||
</Text>
|
||||
<ChevronDown size={14} color={muted} />
|
||||
</XStack>
|
||||
</Pressable>
|
||||
<Card
|
||||
borderRadius={16}
|
||||
borderWidth={1}
|
||||
borderColor={border}
|
||||
backgroundColor={surfaceMuted}
|
||||
padding="$2.5"
|
||||
>
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack flex={1}>
|
||||
<MobileInput
|
||||
type="search"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder={t('events.tasks.search', 'Search photo tasks')}
|
||||
compact
|
||||
/>
|
||||
</XStack>
|
||||
</Card>
|
||||
</YStack>
|
||||
<Pressable onPress={() => setShowEmotionFilterSheet(true)}>
|
||||
<XStack
|
||||
alignItems="center"
|
||||
space="$1.5"
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
borderRadius={14}
|
||||
borderWidth={1}
|
||||
borderColor={border}
|
||||
backgroundColor={surface}
|
||||
>
|
||||
<Text fontSize={11} fontWeight="700" color={text}>
|
||||
{t('events.tasks.emotionFilterShort', 'Emotion')}
|
||||
</Text>
|
||||
<Text fontSize={11} color={muted}>
|
||||
{emotionFilter
|
||||
? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
|
||||
: t('events.tasks.allEmotions', 'All')}
|
||||
</Text>
|
||||
<ChevronDown size={14} color={muted} />
|
||||
</XStack>
|
||||
</Pressable>
|
||||
</XStack>
|
||||
</Card>
|
||||
{taskPanel}
|
||||
</YStack>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user