Merge pull request #323 from raifdmueller/fix/feedback-styling

feat: style discussion section in modal with heading and background

Author: rdmueller

website/src/components/anchor-modal.js

@@ -311,6 +311,12 @@ export async function loadAnchorContent(anchorId) {
       if (fb.recentComments && fb.recentComments.length > 0) {
         const commentsHtml = `
           <div class="feedback-section">
+            <h4 class="feedback-heading">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
+              </svg>
+              ${i18n.t('feedback.discussionHeading')}
+            </h4>
             <div class="feedback-comments">
               ${fb.recentComments
                 .map(

website/src/styles/main.css

@@ -184,7 +184,14 @@ body {
 
 /* Feedback section in anchor modal (comments area) */
 .feedback-section {
-  @apply mt-8 pt-6 border-t border-gray-200 dark:border-gray-700;
+  @apply mt-8 p-4 rounded-lg;
+  @apply bg-gray-50 dark:bg-gray-800/50;
+  @apply border border-gray-200 dark:border-gray-700;
+}
+
+.feedback-heading {
+  @apply flex items-center gap-2 text-sm font-semibold mb-3;
+  @apply text-gray-500 dark:text-gray-400;
 }
 
 .feedback-actions {

website/src/translations/de.json

@@ -61,5 +61,6 @@
   "feedback.vote": "Abstimmen",
   "feedback.discuss": "Diskutieren",
   "feedback.cta": "Ist dieser Anker hilfreich?",
+  "feedback.discussionHeading": "Community-Diskussion",
   "feedback.requiresLogin": "Erfordert GitHub-Login"
 }

website/src/translations/en.json

@@ -61,5 +61,6 @@
   "feedback.vote": "Vote",
   "feedback.discuss": "Discuss",
   "feedback.cta": "Is this anchor useful?",
+  "feedback.discussionHeading": "Community Discussion",
   "feedback.requiresLogin": "Requires GitHub login"
 }