feat: redesign comments section for better UX/UI

- Redesigned comment cards with improved spacing and typography
- Added vertical line indicator for reply nesting
- Implemented native details/summary toggle for reply forms (replacing JS)
- Styled 'Join the conversation' section to be more distinct from existing comments
- Added solid-pink shadow to Tailwind configuration
- Updated E2E tests to match new UI structure and elements

e2e/test_comments.py

@@ -72,10 +72,10 @@ def test_reply_form_visible_on_approved_comment(page: Page, base_url: str) -> No
     """An approved seeded comment must display a reply form."""
     _go_to_article(page, base_url)
 
-    # The seeded approved comment should be visible
-    expect(page.get_by_text("E2E Approved Commenter")).to_be_visible()
-    # And a Reply button for it
-    expect(page.get_by_role("button", name="Reply")).to_be_visible()
+    # The seeded approved comment should be visible (as author name)
+    expect(page.get_by_text("E2E Approved Commenter", exact=True)).to_be_visible()
+    # And a Reply toggle for it
+    expect(page.locator("summary").filter(has_text="Reply")).to_be_visible()
 
 
 @pytest.mark.e2e
@@ -83,12 +83,20 @@ def test_reply_submission_shows_moderation_message(page: Page, base_url: str) ->
     """Submitting a reply to an approved comment should show moderation message."""
     _go_to_article(page, base_url)
 
-    # The reply form is always visible below the approved seeded comment
-    reply_form = page.locator("form[action]").filter(has=page.get_by_role("button", name="Reply")).first
-    reply_form.locator('input[name="author_name"]').fill("E2E Replier")
-    reply_form.locator('input[name="author_email"]').fill("replier@example.com")
-    reply_form.locator('textarea[name="body"]').fill("This is a test reply.")
-    reply_form.get_by_role("button", name="Reply").click()
+    # Click the Reply toggle (summary element)
+    page.locator("summary").filter(has_text="Reply").first.click()
+
+    # The reply form should now be visible
+    post_reply_btn = page.get_by_test_id("post-reply-btn").first
+    expect(post_reply_btn).to_be_visible()
+
+    # Fill the form fields
+    # Use a locator that finds the container for this reply form (the details element)
+    reply_container = page.locator("details").filter(has=post_reply_btn).first
+    reply_container.locator('input[name="author_name"]').fill("E2E Replier")
+    reply_container.locator('input[name="author_email"]').fill("replier@example.com")
+    reply_container.locator('textarea[name="body"]').fill("This is a test reply.")
+    post_reply_btn.click()
 
     # HTMX swaps the reply form container inline
     expect(page.get_by_text("awaiting moderation")).to_be_visible(timeout=10_000)

theme/static_src/tailwind.config.js

@@ -28,6 +28,7 @@ module.exports = {
         'neon-pink': '0 0 20px rgba(236, 72, 153, 0.3)',
         'solid-dark': '6px 6px 0px 0px #09090b',
         'solid-light': '6px 6px 0px 0px #e4e4e7',
+        'solid-pink': '6px 6px 0px 0px #ec4899',
       },
     },
   },