Tighten tasks tab controls

resources/js/admin/mobile/EventTasksPage.tsx

@@ -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')}>
+        <Button
-          <Text fontSize={12} fontWeight="600" color={primary}>
+          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
+        <Button
-          label={t('events.tasks.addEmotion', 'Add emotion')}
+          size="$2"
-          fullWidth={false}
+          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,17 +1191,12 @@ 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}
+                      borderColor={border}
-                        backgroundColor={stickySurface}
+                      backgroundColor={surfaceMuted}
                       padding="$2.5"
-                        shadowColor={stickyShadow}
-                        shadowOpacity={0.12}
-                        shadowRadius={12}
-                        shadowOffset={{ width: 0, height: 8 }}
                     >
                       <XStack alignItems="center" space="$2">
                         <XStack flex={1}>
@@ -1228,7 +1232,6 @@ export default function MobileEventTasksPage() {
                         </Pressable>
                       </XStack>
                     </Card>
-                    </YStack>
                     {taskPanel}
                   </YStack>
                 </Card>