ryan
8e4f89f4ec
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 3m12s
- Changed "Skip tour" button to "Cancel" in various tutorial overlays. - Updated modal titles from "Confirm Task" to "Confirm Penalty" where applicable. - Modified tutorial step call-to-action labels from "Got it" and "Next" to "Continue" for consistency. - Added tests for new tutorial overlay behavior and button interactions. - Refactored tutorial controller to allow ignoring tutorial enabled state in step visibility checks. - Enhanced user profile tutorial restart functionality with appropriate modal messages. - Updated user profile and task confirmation dialog components to reflect new titles and messages. - Adjusted configuration files for local development environments.
55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<ModalDialog
|
|
v-if="task"
|
|
:title="dialogTitle"
|
|
:subtitle="task.name"
|
|
:imageUrl="task.image_url"
|
|
@backdrop-click="$emit('cancel')"
|
|
>
|
|
<div class="modal-message">
|
|
{{ task.type === 'penalty' ? 'Subtract' : 'Add' }} these points
|
|
{{ task.type === 'penalty' ? 'from' : 'to' }}
|
|
<span class="child-name">{{ childName }}</span>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button @click="$emit('confirm')" class="btn btn-primary">Yes</button>
|
|
<button @click="$emit('cancel')" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</ModalDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import ModalDialog from '../shared/ModalDialog.vue'
|
|
import type { Task } from '@/common/models'
|
|
|
|
const props = defineProps<{
|
|
task: Task | null
|
|
childName?: string
|
|
}>()
|
|
|
|
const dialogTitle = computed(() => {
|
|
if (props.task?.type === 'kindness') return 'Confirm Act'
|
|
if (props.task?.type === 'penalty') return 'Confirm Penalty'
|
|
return 'Confirm Task'
|
|
})
|
|
|
|
defineEmits<{
|
|
confirm: []
|
|
cancel: []
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal-message {
|
|
margin-bottom: 1.2rem;
|
|
font-size: 1rem;
|
|
color: var(--modal-message-color, #333);
|
|
}
|
|
|
|
.child-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
</style>
|