Darker card for not-pre-translation-enabled

Author: marksvc

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/_draft-jobs-theme.scss

@@ -8,6 +8,7 @@
   --sf-draft-jobs-book-count-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 70, 40))};
   --sf-draft-jobs-disabled-link-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 50, 50))};
   --sf-serval-project-card-background: #{mat.get-theme-color($theme, neutral, if($is-dark, 30, 90))};
+  --sf-serval-project-card-background-disabled: #{mat.get-theme-color($theme, neutral, if($is-dark, 20, 96))};
 }
 
 @mixin theme($theme) {

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-projects.component.html

@@ -76,7 +76,7 @@
     <!-- Show cards in narrow viewport. -->
     <div class="card-list card-view">
       @for (row of rows; track row.id) {
-        <div class="project-card">
+        <div class="project-card" [class.pre-translate-disabled]="!row.preTranslate">
           <div class="card-header">
             <a [appRouterLink]="['/serval-administration', row.id]" class="card-project-name">{{ row.name }}</a>
           </div>

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-projects.component.scss

@@ -43,6 +43,10 @@ mat-form-field {
   background-color: var(--sf-serval-project-card-background);
   position: relative;
 
+  &.pre-translate-disabled {
+    background-color: var(--sf-serval-project-card-background-disabled);
+  }
+
   .card-header {
     padding: 16px 16px 8px 16px;