Align the associate editor with the design spec

Pair rows, cards, chips and pool boxes took colours, padding and copy that
diverge from the issue's mockups. Measured against them:

- pair rows: grey.v_50 with a fineLine border, cards on surface, 40px tall
- chips: 12px each side, 8px before the delete control, tinted only in the
  distractor pool, where they sit on the surface rather than the tint
- pair validation message: aligned to the row's left edge, not indented
  under the cards
- correct-answer chip border: green.v_600, as the sibling editors use
- section and button copy taken verbatim from the mockups

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: rtibblesbot

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/AssociateInteractionEditor.vue

@@ -230,7 +230,7 @@
           <li
             v-for="(choice, index) in state.distractors"
             :key="`${choice.id}-${index}`"
-            :class="isDistractorOpen(index) ? 'distractor-editing' : 'chip'"
+            :class="isDistractorOpen(index) ? 'distractor-editing' : ['chip', 'is-muted']"
             :style="cardStyle(choice.id)"
           >
             <ClickableRegion
@@ -530,7 +530,7 @@
       function poolChipStyle(id) {
         const isCorrect = props.showAnswers && pairedIds.value.has(id);
         return {
-          borderColor: isCorrect ? palette.green.v_500 : tokens.fineLine,
+          borderColor: isCorrect ? palette.green.v_600 : tokens.fineLine,
           backgroundColor: isCorrect ? palette.green.v_50 : null,
         };
       }
@@ -697,15 +697,19 @@
     display: grid;
     grid-template-areas:
       'label cards actions'
-      '. message .';
+      'message message message';
     grid-template-columns: auto 1fr auto;
-    gap: 8px;
+
+    // Row gap is carried by the message itself: the message track is always
+    // present, so a gap here would pad every row that has no message.
+    column-gap: 8px;
     align-items: center;
     border-radius: 4px;
 
     &.is-editable {
       padding: 8px;
-      background-color: v-bind('$themePalette.grey.v_100');
+      background-color: v-bind('$themePalette.grey.v_50');
+      border: 1px solid v-bind('$themeTokens.fineLine');
     }
 
     &.is-stacked {
@@ -714,6 +718,10 @@
         'cards cards'
         'message message';
       grid-template-columns: 1fr auto;
+
+      .pair-cards {
+        margin-top: 8px;
+      }
     }
   }
 
@@ -736,9 +744,32 @@
     }
   }
 
+  // A pair card sits on the tinted row, so it carries the surface colour itself,
+  // and is more compact than the prompt card: the text sits 8px from the border
+  // rather than at the editor's default 24px inset.
   .pair-card {
     flex: 1;
     min-width: 0;
+    background-color: v-bind('$themeTokens.surface');
+
+    .item-card-text {
+      padding: 0;
+
+      &.is-closed {
+        min-height: 40px;
+
+        // A closed card shows one line, so the editor's paragraph margins would
+        // only make it taller than the 40px the design gives it.
+        ::v-deep .ProseMirror p {
+          margin: 0;
+          margin-block: 0;
+        }
+      }
+    }
+
+    ::v-deep .editor-content {
+      padding: 8px;
+    }
   }
 
   .pair-actions {
@@ -749,6 +780,7 @@
 
   .pair-message {
     grid-area: message;
+    margin-top: 8px;
   }
 
   .pool-box {
@@ -760,7 +792,7 @@
     border-radius: 4px;
 
     &.is-shuffled {
-      background-color: v-bind('$themePalette.grey.v_100');
+      background-color: v-bind('$themePalette.grey.v_50');
     }
   }
 
@@ -773,16 +805,31 @@
     list-style: none;
   }
 
-  // A chip is a compact pill, so it overrides the editor's own content padding.
+  // A chip is a compact pill, so it drops the editor's own content padding and
+  // paragraph margins and sets its own — 12px on each side, 8px before the
+  // delete control.
   .chip {
     display: flex;
+    gap: 8px;
     align-items: center;
-    padding: 0 4px 0 12px;
+    padding: 4px 12px;
+    background-color: v-bind('$themeTokens.surface');
     border: 1px solid;
     border-radius: 4px;
 
+    // Chips in the distractor pool sit on the surface, so they are tinted to
+    // stand out; chips in the shuffled pool sit on the tint, so they are not.
+    &.is-muted {
+      background-color: v-bind('$themePalette.grey.v_50');
+    }
+
     ::v-deep .editor-content {
-      padding: 8px 0;
+      padding: 0;
+    }
+
+    ::v-deep .ProseMirror p {
+      margin: 0;
+      margin-block: 0;
     }
   }
 

contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js

@@ -109,24 +109,25 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     context: 'Description for the associate question type in the info modal',
   },
   correctPairsLabel: {
-    message: 'Correct pairs',
+    message: 'Matching pairs',
     context: 'Section header above the list of correctly associated pairs',
   },
   correctPairsDescription: {
-    message: 'Learners will see all options shuffled together',
-    context: 'Subtitle under the correct pairs header',
+    message:
+      'Learners match responses from a shuffled set to each prompt. Include distractors to increase difficulty.',
+    context: 'Subtitle under the matching pairs header',
   },
   distractorsLabel: {
-    message: 'Additional options',
-    context: 'Section header above the options that belong to no correct pair',
+    message: 'Distractors (optional)',
+    context: 'Section header above the choices that belong to no correct pair',
   },
   distractorsDescription: {
-    message: 'Options that are not part of any correct pair',
-    context: 'Subtitle under the additional options header',
+    message: "Extra items shown in the response pool that don't match any prompt",
+    context: 'Subtitle under the distractors header',
   },
   responsePoolLabel: {
-    message: 'Options (shuffled)',
-    context: 'Header above the shuffled pool of options learners will pick from',
+    message: 'Response pool (shuffled)',
+    context: 'Header above the shuffled pool of choices learners will pick from',
   },
   correctAnswersLabel: {
     message: 'Answers',
@@ -145,20 +146,20 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     context: 'Accessible label for the delete icon button next to a pair row',
   },
   addDistractorBtn: {
-    message: 'Add option',
-    context: 'Button that appends a new additional option',
+    message: 'Add distractor',
+    context: 'Button that appends a new distractor',
   },
   deleteDistractorBtn: {
-    message: 'Delete option {number}',
-    context: 'Accessible label for the delete icon button on an additional option',
+    message: 'Delete distractor {number}',
+    context: 'Accessible label for the delete icon button on a distractor',
   },
   editPairItemLabel: {
     message: 'Edit pair {number}, item {position}',
     context: 'Accessible label for the clickable region to edit one item of a pair',
   },
   editDistractorLabel: {
-    message: 'Edit option {number}',
-    context: 'Accessible label for the clickable region to edit an additional option',
+    message: 'Edit distractor {number}',
+    context: 'Accessible label for the clickable region to edit a distractor',
   },
   errorTooFewPairs: {
     message: '1 or more valid pairs are required',