That's the icon in the background.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user