SF-3508 Use mat-card to show draft progress in new draft history UI (#3372)

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.html

@@ -206,34 +206,32 @@ <h1>
           @if (isPreviewSupported) {
             @if (draftJob != null) {
               @if (isDraftInProgress(draftJob) && featureFlags.newDraftHistory.enabled) {
-                <mat-expansion-panel [expanded]="true" [hideToggle]="true" [disabled]="true">
-                  <mat-expansion-panel-header>
-                    <mat-panel-title>
+                <mat-card class="draft-progress-card">
+                  <mat-card-header>
+                    <mat-card-title>
                       @if (isDraftQueued(draftJob)) {
                         @if (isSyncing()) {
-                          <span class="title">{{ t("draft_syncing") }}</span>
+                          {{ t("draft_syncing") }}
                         } @else {
-                          <span class="title">{{ t("draft_queued_header") }}</span>
-                          @if (hasDraftQueueDepth(draftJob)) {
-                            <span class="subtitle">{{
-                              t("draft_queued_multiple", { count: draftJob.queueDepth })
-                            }}</span>
-                          }
+                          {{ t("draft_queued_header") }}
                         }
                       } @else if (isDraftActive(draftJob)) {
-                        <span class="title">{{ t("draft_active_header") }}</span>
-                        <span class="subtitle">{{
-                          t("draft_percent_complete", { percent: draftJob.percentCompleted | l10nPercent })
-                        }}</span>
+                        {{ t("draft_active_header") }}
                       } @else if (isDraftFinishing(draftJob)) {
-                        <span class="title"> {{ t("draft_finishing_header") }}</span>
+                        {{ t("draft_finishing_header") }}
                       }
-                    </mat-panel-title>
-                    <mat-panel-description>
+                      •
                       {{ getTranslationScriptureRange(draftJob) }}
-                    </mat-panel-description>
-                  </mat-expansion-panel-header>
-                  <div class="progress-wrapper">
+                    </mat-card-title>
+                    <mat-card-subtitle>
+                      @if (hasDraftQueueDepth(draftJob)) {
+                        {{ t("draft_queued_multiple", { count: draftJob.queueDepth }) }}
+                      } @else if (isDraftActive(draftJob)) {
+                        {{ t("draft_percent_complete", { percent: draftJob.percentCompleted | l10nPercent }) }}
+                      }
+                    </mat-card-subtitle>
+                  </mat-card-header>
+                  <mat-card-content class="progress-wrapper">
                     <mat-progress-bar
                       [mode]="
                         draftJob.percentCompleted === 0 && !isDraftActive(draftJob) ? 'indeterminate' : 'determinate'
@@ -245,8 +243,8 @@ <h1>
                         {{ t("cancel_generation_button") }}
                       </button>
                     }
-                  </div>
-                </mat-expansion-panel>
+                  </mat-card-content>
+                </mat-card>
               } @else if (!featureFlags.newDraftHistory.enabled) {
                 @if (isDraftQueued(draftJob)) {
                   <section>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation.component.scss

@@ -181,39 +181,18 @@ section {
   gap: 0.5em;
 }
 
-mat-expansion-panel-header {
-  color: var(--mat-expansion-header-text-color, var(--mat-app-on-surface)) !important;
-}
-
-mat-panel-title {
-  display: flex;
-  align-items: start;
-  flex-direction: column;
-  flex: 0 1 auto;
-
-  .title {
-    color: var(
-      --mat-expansion-header-text-color,
-      var(--mat-app-on-surface)
-    ); /* Keep the text color, even when disabled */
+.draft-progress-card {
+  mat-card-title {
     font-size: 1.1em;
+    font-weight: 500;
   }
 
-  .subtitle {
+  mat-card-subtitle {
     font-size: 0.9em;
     color: var(--draft-history-entry-subtitle-color);
   }
 }
 
-mat-panel-description {
-  font-weight: normal;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
-}
-
 .progress-wrapper {
   display: flex;
   align-items: center;