That's the icon in the background.

This commit is contained in:
2026-02-16 09:31:49 +01:00
parent 07a8276899
commit ebaeb1722d
6 changed files with 122 additions and 87 deletions

View File

@@ -58,8 +58,8 @@ const updateTextValue = (event) => {
</script>
<template>
<div class="py-4">
<p class="text-white mb-3">{{ question.text }}</p>
<div class="py-5 first:pt-0">
<p class="text-white font-medium leading-relaxed mb-4">{{ question.text }}</p>
<!-- Text-only question (no radio buttons) -->
<div v-if="isTextOnly">
@@ -67,7 +67,7 @@ const updateTextValue = (event) => {
:value="modelValue.text_value"
@input="updateTextValue"
rows="3"
class="w-full rounded-lg border border-gray-600 bg-surface px-3 py-2 text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary"
class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-gray-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/20 transition-colors duration-200"
placeholder="Enter your response..."
></textarea>
</div>
@@ -83,18 +83,27 @@ const updateTextValue = (event) => {
/>
<!-- Details textarea (conditional) -->
<div v-if="showDetails" class="mt-2">
<label class="block text-sm text-gray-400 mb-1">
Details{{ detailsRequired ? ' (required)' : ' (optional)' }}
</label>
<textarea
:value="modelValue.text_value"
@input="updateTextValue"
rows="2"
class="w-full rounded-lg border border-gray-600 bg-surface px-3 py-2 text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary text-sm"
placeholder="Enter details..."
></textarea>
</div>
<Transition
enter-active-class="transition-all duration-300 ease-out"
enter-from-class="opacity-0 -translate-y-1 max-h-0"
enter-to-class="opacity-100 translate-y-0 max-h-40"
leave-active-class="transition-all duration-200 ease-in"
leave-from-class="opacity-100 translate-y-0 max-h-40"
leave-to-class="opacity-0 -translate-y-1 max-h-0"
>
<div v-if="showDetails" class="mt-2">
<label class="block text-sm text-gray-400 mb-1">
Details{{ detailsRequired ? ' (required)' : ' (optional)' }}
</label>
<textarea
:value="modelValue.text_value"
@input="updateTextValue"
rows="2"
class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-gray-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/20 text-sm transition-colors duration-200"
placeholder="Enter details..."
></textarea>
</div>
</Transition>
</div>
</div>
</template>