Update styles and terminology

Author: breity

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.html

@@ -1,9 +1,8 @@
-@if (components.length == 1) {
-  <button mat-button aria-label="Assessment items to show" i18n-aria-label disabled i18n>
-    1 assessment item
-  </button>
-} @else if (components.length > 1) {
-  <mat-form-field appearance="fill" class="component-select">
+<mat-form-field appearance="fill" class="component-select form-field-no-hint">
+  @if (components.length == 1) {
+    <mat-select disabled placeholder="1 item ({{ getComponentTypeLabel(components[0].type) }})">
+    </mat-select>
+  } @else if (components.length > 1) {
     <mat-select
       [(ngModel)]="selectedComponents"
       (selectionChange)="updateSelectedComponents()"
@@ -12,13 +11,11 @@
       multiple
     >
       <mat-select-trigger>{{ selectedText }}</mat-select-trigger>
-      <mat-optgroup label="Assessment items to show" i18n-label>
-        @for (component of components; track component.id; let i = $index) {
-          <mat-option [value]="component" color="primary">
-            {{ i + 1 }}: {{ getComponentTypeLabel(component.type) }}
-          </mat-option>
-        }
-      </mat-optgroup>
+      @for (component of components; track component.id; let i = $index) {
+        <mat-option [value]="component" color="primary">
+          {{ i + 1 }}: {{ getComponentTypeLabel(component.type) }}
+        </mat-option>
+      }
     </mat-select>
-  </mat-form-field>
-}
+  }
+</mat-form-field>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.scss

@@ -0,0 +1,10 @@
+@use '@angular/material' as mat;
+
+.component-select {
+  @include mat.form-field-overrides(
+    (
+      container-vertical-padding: 8px,
+      container-height: 40px
+    )
+  );
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts

@@ -10,6 +10,7 @@ import { ComponentContent } from '../../../../common/ComponentContent';
 @Component({
   imports: [CommonModule, FormsModule, MatButtonModule, MatFormFieldModule, MatSelectModule],
   selector: 'filter-components',
+  styleUrls: ['./filter-components.component.scss'],
   templateUrl: './filter-components.component.html'
 })
 export class FilterComponentsComponent {

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html

@@ -24,8 +24,8 @@ <h2 class="content-head__item">
         </div>
       </button>
     </div>
-    <div class="mat-elevation-z1 list-item component-select">
-      <span i18n>Question: </span>
+    <div class="flex gap-2 items-center flex-wrap mb-2 mx-2">
+      <h3 class="mat-body-1" i18n>Class Responses</h3>
       <filter-components
         [components]="components"
         (componentsChange)="setVisibleComponents($event)"

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts

@@ -36,6 +36,10 @@ import { NodeClassResponsesComponent } from '../node-class-responses/node-class-
       .list-item {
         display: block;
       }
+
+      .mat-body-1 {
+        margin: 0;
+      }
     `
   ],
   templateUrl: './node-grading.component.html'