Style mark-all-present modal confirm button with error color

Use the #actions slot in KModal to provide a custom confirm button
styled with $themeTokens.error background, matching the established
destructive-action pattern used by MoveToTrashModal and
PermanentDeleteModal. Update test mock to support #actions slot.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: rtibblesbot

kolibri/plugins/coach/frontend/views/attendance/AttendanceNewPage.vue

@@ -123,12 +123,21 @@
     <KModal
       v-if="showMarkAllModal"
       :title="markAllModalTitle$({ count: sortedLearners.length })"
-      :submitText="markAllPresentAction$()"
-      :cancelText="coreString('goBackAction')"
-      @submit="confirmMarkAll"
       @cancel="cancelMarkAll"
     >
       <p>{{ markAllModalDescription$({ count: absentCount }) }}</p>
+      <template #actions>
+        <KButton
+          :text="coreString('goBackAction')"
+          @click="cancelMarkAll"
+        />
+        <KButton
+          data-test="mark-all-confirm"
+          :text="markAllPresentAction$()"
+          :appearanceOverrides="confirmButtonStyles"
+          @click="confirmMarkAll"
+        />
+      </template>
     </KModal>
 
     <KModal
@@ -150,6 +159,8 @@
 
   import { computed, ref } from 'vue';
   import { useRouter } from 'vue-router/composables';
+  import { darken1 } from 'kolibri-design-system/lib/styles/darkenColors';
+  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
   import { localeCompare } from 'kolibri/utils/i18n';
   import { coreString } from 'kolibri/uiText/commonCoreStrings';
   import store from 'kolibri/store';
@@ -240,6 +251,12 @@
       );
       const absentCount = computed(() => sortedLearners.value.length - presentCount.value);
 
+      const confirmButtonStyles = {
+        color: themeTokens().textInverted,
+        backgroundColor: themeTokens().error,
+        ':hover': { backgroundColor: darken1(themeTokens().error) },
+      };
+
       // Mark all
       const allPresent = computed(
         () => sortedLearners.value.length > 0 && presentCount.value === sortedLearners.value.length,
@@ -328,6 +345,7 @@
         handleMarkAllChange,
         confirmMarkAll,
         cancelMarkAll,
+        confirmButtonStyles,
         handleSubmit,
         handleCancel,
         confirmLeave,

kolibri/plugins/coach/frontend/views/attendance/__tests__/AttendancePages.spec.js

@@ -61,7 +61,7 @@ const TEST_STUBS = {
     name: 'KModal',
     props: ['title', 'submitText', 'cancelText'],
     template:
-      '<div data-test="modal"><h2>{{ title }}</h2><slot /><button data-test="modal-submit" @click="$emit(\'submit\')">{{ submitText }}</button><button data-test="modal-cancel" @click="$emit(\'cancel\')">{{ cancelText }}</button></div>',
+      '<div data-test="modal"><h2>{{ title }}</h2><slot /><slot name="actions"><button data-test="modal-submit" @click="$emit(\'submit\')">{{ submitText }}</button><button data-test="modal-cancel" @click="$emit(\'cancel\')">{{ cancelText }}</button></slot></div>',
   },
   BottomAppBar: {
     name: 'BottomAppBar',
@@ -199,7 +199,7 @@ describe('AttendanceNewPage', () => {
     await markAllSwitch.trigger('click');
     await global.flushPromises();
 
-    await wrapper.find('[data-test="modal-submit"]').trigger('click');
+    await wrapper.find('[data-test="mark-all-confirm"]').trigger('click');
     await global.flushPromises();
 
     expect(wrapper.text()).toContain('3 present');