fix: Improve rich text formatting in emails and add button hints
Fix highlighting display in emailed notes and add clear formatting hints to email/download buttons. Changes: - Added proper HTML/CSS structure to email template for rich text support - Added CSS styles for mark (highlight), strong, em, u, s, headings, and lists - Highlight now renders with yellow background (#fef08a) in emails - All rich text formatting now properly displays in email clients - Added formatting hints to buttons: "Email Notes (Formatting included)" and "Download Notes (No formatting)" - Button hints use smaller text with opacity for subtle visual hierarchy Email template improvements: - Proper DOCTYPE and HTML structure - Style block in head for rich text elements - Removed white-space: pre-wrap from notes div to allow HTML rendering - Maintained all existing sermon content styling This ensures users understand that: - Email preserves all rich text formatting (bold, italic, highlights, lists, etc.) - Download converts to plain text for universal compatibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -135,13 +135,19 @@
|
||||
class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed font-medium transition-colors"
|
||||
>
|
||||
<span v-if="emailStatus === 'sending'">Sending...</span>
|
||||
<span v-else>📧 Email Notes</span>
|
||||
<span v-else class="flex flex-col items-center">
|
||||
<span>📧 Email Notes</span>
|
||||
<span class="text-xs opacity-80 mt-0.5">(Formatting included)</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="downloadNotes"
|
||||
class="flex-1 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium transition-colors"
|
||||
>
|
||||
📥 Download Notes
|
||||
<span class="flex flex-col items-center">
|
||||
<span>📥 Download Notes</span>
|
||||
<span class="text-xs opacity-80 mt-0.5">(No formatting)</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="emailStatus === 'success'" class="mt-2 text-sm text-green-600">
|
||||
|
||||
Reference in New Issue
Block a user